treemap deplacement fail

holtzy · Nov 26, 2024 · 99887c9 · 99887c9
1 parent e60c187
commit 99887c9
Show file tree

Hide file tree

Showing 3 changed files with 274 additions and 60 deletions.
diff --git a/pages/example/deplacement-en-france.tsx b/pages/example/deplacement-en-france.tsx
@@ -8,7 +8,8 @@ import Link from 'next/link';
 import { SankeyBumpChartDemo } from 'viz/SankeyBumpChart/SankeyBumpChartDemo';
 import { LinkAsButton } from 'component/LinkAsButton';
 import { Treemap } from '@/viz/TreemapFrenchTravel/Treemap';
-import { data } from '@/viz/TreemapFrenchTravel/data';
+import { data, rawData } from '@/viz/TreemapFrenchTravel/data';
+import { stratify } from 'd3';
 
 const graphDescription = (
   <>
@@ -17,6 +18,31 @@ const graphDescription = (
 );
 
 export default function Home() {
+  const groups = ['Etudes', 'Professionnel', 'Vacances'];
+  const target = 'Temps';
+
+  const mainDataSelection = rawData['Motifs de déplacement'];
+  console.log('mainDataSelection', mainDataSelection);
+
+  const selectedData = Object.keys(mainDataSelection).map((key) => {
+    return {
+      parent: 'Temps',
+      name: key,
+      value: Number(mainDataSelection[key]['Temps'].replace('%', '')),
+    };
+  });
+  console.log('selectedData', selectedData);
+
+  const hierarchyBuilder = stratify()
+    .id((d) => d.name)
+    .parentId((d) => d.parent);
+  const hierarchy = hierarchyBuilder([
+    { parent: undefined, name: 'Temps' },
+    ...selectedData,
+  ]);
+
+  console.log(hierarchy);
+
   return (
     <Layout
       title="How do people travel in France"
@@ -38,7 +64,7 @@ export default function Home() {
         here, together with its code:🙇‍♂️
       </p>
 
-      <Treemap data={data} width={600} height={400} />
+      <Treemap data={hierarchy} width={900} height={600} />
 
       <div className="full-bleed border-t h-0 bg-gray-100 mb-3 mt-24" />
       <ChartFamilySection chartFamily="flow" />

diff --git a/viz/TreemapFrenchTravel/Treemap.tsx b/viz/TreemapFrenchTravel/Treemap.tsx
@@ -1,12 +1,24 @@
 import { useMemo } from 'react';
-import { Tree } from './data';
 import * as d3 from 'd3';
 import styles from './treemap.module.css';
 
+export type TreeNode = {
+  type: 'node';
+  name: string;
+  children: Tree[];
+};
+export type TreeLeaf = {
+  parent: string;
+  name: string;
+  value: number;
+};
+
+export type Tree = TreeNode | TreeLeaf;
+
 type TreemapProps = {
   width: number;
   height: number;
-  data: Tree;
+  data: d3.HierarchyNode<unknown>;
 };
 
 const colors = [
@@ -21,21 +33,22 @@ const colors = [
 
 export const Treemap = ({ width, height, data }: TreemapProps) => {
   const hierarchy = d3.hierarchy(data).sum((d) => d.value);
+  console.log('hierarchy', hierarchy);
 
-  // List of item of level 1 (just under root) & related color scale
   const firstLevelGroups = hierarchy?.children?.map((child) => child.data.name);
+  console.log('firstLevelGroups', firstLevelGroups);
+
   var colorScale = d3
     .scaleOrdinal<string>()
     .domain(firstLevelGroups || [])
     .range(colors);
 
-  const root = useMemo(() => {
-    const treeGenerator = d3.treemap<Tree>().size([width, height]).padding(4);
-    return treeGenerator(hierarchy);
-  }, [hierarchy, width, height]);
+  const treeGenerator = d3.treemap<Tree>().size([width, height]).padding(4);
+  const root = treeGenerator(hierarchy);
+  console.log('root', root);
 
   const allShapes = root.leaves().map((leaf, i) => {
-    const parentName = leaf.parent?.data.name;
+    console.log('leaf', leaf);
     return (
       <g key={leaf.id} className={styles.rectangle}>
         <rect
@@ -44,7 +57,7 @@ export const Treemap = ({ width, height, data }: TreemapProps) => {
           width={leaf.x1 - leaf.x0}
           height={leaf.y1 - leaf.y0}
           stroke="transparent"
-          fill={colorScale(parentName)}
+          fill={colorScale(leaf.data.name)}
           className={'opacity-80 hover:opacity-100'}
         />
         <text

diff --git a/viz/TreemapFrenchTravel/data.ts b/viz/TreemapFrenchTravel/data.ts
@@ -1,52 +1,227 @@
-export type TreeNode = {
-  type: 'node';
-  value: number;
-  name: string;
-  children: Tree[];
-};
-export type TreeLeaf = {
-  type: 'leaf';
-  name: string;
-  value: number;
-};
+export const rawData = {
+  "Motifs de déplacement": {
+    "Etudes": {
+      "Déplacements": "7.6%",
+      "Temps": "6.3%",
+      "Distances": "2.8%",
+      "Emissions directes": "1.8%",
+      "Emissions avec Amt/traînées": "1.6%"
+    },
+    "Professionnel": {
+      "Déplacements": "21%",
+      "Temps": "25%",
+      "Distances": "24%",
+      "Emissions directes": "33%",
+      "Emissions avec Amt/traînées": "30%"
+    },
+    "Achats": {
+      "Déplacements": "21%",
+      "Temps": "14%",
+      "Distances": "8%",
+      "Emissions directes": "9.4%",
+      "Emissions avec Amt/traînées": "8.2%"
+    },
+    "Soin-Admin.": {
+      "Déplacements": "5.5%",
+      "Temps": "4.9%",
+      "Distances": "3.3%",
+      "Emissions directes": "4.2%",
+      "Emissions avec Amt/traînées": "3.7%"
+    },
+    "Accompagn.": {
+      "Déplacements": "10%",
+      "Temps": "6.3%",
+      "Distances": "4.9%",
+      "Emissions directes": "5.1%",
+      "Emissions avec Amt/traînées": "4.5%"
+    },
+    "Visite": {
+      "Déplacements": "11%",
+      "Temps": "14%",
+      "Distances": "18%",
+      "Emissions directes": "15%",
+      "Emissions avec Amt/traînées": "15%"
+    },
+    "Sport": {
+      "Déplacements": "13%",
+      "Temps": "14%",
+      "Distances": "6.7%",
+      "Emissions directes": "5.8%",
+      "Emissions avec Amt/traînées": "5.2%"
+    },
+    "Loisirs": {
+      "Déplacements": "9%",
+      "Temps": "8.7%",
+      "Distances": "7.6%",
+      "Emissions directes": "6.1%",
+      "Emissions avec Amt/traînées": "5.8%"
+    },
+    "Vacances": {
+      "Déplacements": "0.5%",
+      "Temps": "5.9%",
+      "Distances": "22%",
+      "Emissions directes": "18%",
+      "Emissions avec Amt/traînées": "23%"
+    },
+    "Autre": {
+      "Déplacements": "0.9%",
+      "Temps": "1.2%",
+      "Distances": "2.2%",
+      "Emissions directes": "1.9%",
+      "Emissions avec Amt/traînées": "2.1%"
+    }
+  },
+  "Modes de transport": {
+    "Marche": {
+      "Déplacements": "23.6%",
+      "Temps": "15.3%",
+      "Distances": "1.5%",
+      "Emissions directes": "0%",
+      "Emissions avec Amt/traînées": "0%"
+    },
+    "Vélo": {
+      "Déplacements": "2.5%",
+      "Temps": "2%",
+      "Distances": "0.5%",
+      "Emissions directes": "0%",
+      "Emissions avec Amt/traînées": "0%"
+    },
+    "2RM": {
+      "Déplacements": "1%",
+      "Temps": "1%",
+      "Distances": "0.8%",
+      "Emissions directes": "0.7%",
+      "Emissions avec Amt/traînées": "0.6%"
+    },
+    "Voiture": {
+      "Déplacements": "64%",
+      "Temps": "62.2%",
+      "Distances": "65.2%",
+      "Emissions directes": "79.4%",
+      "Emissions avec Amt/traînées": "69.1%"
+    },
+    "Bus et car": {
+      "Déplacements": "3.6%",
+      "Temps": "5.8%",
+      "Distances": "2.7%",
+      "Emissions directes": "1.6%",
+      "Emissions avec Amt/traînées": "1.4%"
+    },
+    "Ferroviaire": {
+      "Déplacements": "4.7%",
+      "Temps": "10.9%",
+      "Distances": "8.6%",
+      "Emissions directes": "0.2%",
+      "Emissions avec Amt/traînées": "0.5%"
+    },
+    "Avion": {
+      "Déplacements": "0.1%",
+      "Temps": "2.2%",
+      "Distances": "19.5%",
+      "Emissions directes": "16.8%",
+      "Emissions avec Amt/traînées": "27.2%"
+    },
+    "Autres": {
+      "Déplacements": "0.4%",
+      "Temps": "0.7%",
+      "Distances": "1.1%",
+      "Emissions directes": "1.3%",
+      "Emissions avec Amt/traînées": "1.2%"
+    }
+  },
+  "Gammes de distances": {
+    "0-1 km": {
+      "Déplacements": "17.3%",
+      "Temps": "5.5%",
+      "Distances": "0.5%",
+      "Emissions directes": "0.2%",
+      "Emissions avec Amt/traînées": "0.1%"
+    },
+    "1-10 km": {
+      "Déplacements": "53.7%",
+      "Temps": "36.7%",
+      "Distances": "12.2%",
+      "Emissions directes": "14.6%",
+      "Emissions avec Amt/traînées": "12.8%"
+    },
+    "10-100 km": {
+      "Déplacements": "27.5%",
+      "Temps": "42%",
+      "Distances": "40.6%",
+      "Emissions directes": "48.4%",
+      "Emissions avec Amt/traînées": "42.4%"
+    },
+    "100-1000 km": {
+      "Déplacements": "1.4%",
+      "Temps": "13.2%",
+      "Distances": "25.4%",
+      "Emissions directes": "19.1%",
+      "Emissions avec Amt/traînées": "18.6%"
+    },
+    "1000 km+": {
+      "Déplacements": "0.1%",
+      "Temps": "2.6%",
+      "Distances": "21.3%",
+      "Emissions directes": "17.7%",
+      "Emissions avec Amt/traînées": "26.1%"
+    }
+  },
+  "Quartiles de revenus": {
+    "Q1": {
+      "Déplacements": "23.2%",
+      "Temps": "21.6%",
+      "Distances": "16%",
+      "Emissions directes": "14.6%",
+      "Emissions avec Amt/traînées": "14.3%"
+    },
+    "Q2": {
+      "Déplacements": "24.5%",
+      "Temps": "22.9%",
+      "Distances": "20.4%",
+      "Emissions directes": "20.8%",
+      "Emissions avec Amt/traînées": "19.8%"
+    },
+    "Q3": {
+      "Déplacements": "26.2%",
+      "Temps": "26.4%",
+      "Distances": "27.7%",
+      "Emissions directes": "29.1%",
+      "Emissions avec Amt/traînées": "28.7%"
+    },
+    "Q4": {
+      "Déplacements": "26.1%",
+      "Temps": "29.1%",
+      "Distances": "35.9%",
+      "Emissions directes": "35.5%",
+      "Emissions avec Amt/traînées": "37.2%"
+    }
+  },
+  "Densité de commune de résidence": {
+    "Rural": {
+      "Déplacements": "33%",
+      "Temps": "31.6%",
+      "Distances": "37.3%",
+      "Emissions directes": "41.8%",
+      "Emissions avec Amt/traînées": "39.8%"
+    },
+    "Intermédiaire": {
+      "Déplacements": "28%",
+      "Temps": "25.5%",
+      "Distances": "26.2%",
+      "Emissions directes": "27.3%",
+      "Emissions avec Amt/traînées": "26.7%"
+    },
+    "Dense": {
+      "Déplacements": "39%",
+      "Temps": "42.9%",
+      "Distances": "36.6%",
+      "Emissions directes": "30.9%",
+      "Emissions avec Amt/traînées": "33.5%"
+    }
+  }
+}
+
+
 
-export type Tree = TreeNode | TreeLeaf;
 
 
-export const data: Tree = {
-  type: "node",
-  name: "boss",
-  value: 0,
-  children: [
-    {
-      type: "node",
-      name: "Team Dataviz",
-      value: 0,
-      children: [
-        { type: "leaf", name: "Mark", value: 90 },
-        { type: "leaf", name: "Robert", value: 12 },
-        { type: "leaf", name: "Emily", value: 34 },
-        { type: "leaf", name: "Marion", value: 53 },
-      ],
-    },
-    {
-      type: "node",
-      name: "Team DevOps",
-      value: 0,
-      children: [
-        { type: "leaf", name: "Nicolas", value: 98 },
-        { type: "leaf", name: "Malki", value: 22 },
-        { type: "leaf", name: "Djé", value: 12 },
-      ],
-    },
-    {
-      type: "node",
-      name: "Team Sales",
-      value: 0,
-      children: [
-        { type: "leaf", name: "Mélanie", value: 45 },
-        { type: "leaf", name: "Einstein", value: 76 },
-      ],
-    },
-  ],
-};