From 7ceae8250384f2f7f57ebab6f951208edfc0bec0 Mon Sep 17 00:00:00 2001
From: Holtz Yan <yan.holtz@datadoghq.com>
Date: Wed, 4 Dec 2024 13:40:46 +0100
Subject: [PATCH] try animating the treemap

---
 viz/TreemapFrenchTravel/Rectangle.tsx | 62 +++++++++++++++++++--------
 viz/TreemapFrenchTravel/Treemap.tsx   | 54 ++++++++++++-----------
 2 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/viz/TreemapFrenchTravel/Rectangle.tsx b/viz/TreemapFrenchTravel/Rectangle.tsx
index a37c60a9..5f5a7957 100644
--- a/viz/TreemapFrenchTravel/Rectangle.tsx
+++ b/viz/TreemapFrenchTravel/Rectangle.tsx
@@ -1,20 +1,21 @@
-import { useSpring, animated } from '@react-spring/web';
+import { useSpring, animated, config } from '@react-spring/web';
 
 type RectangleProps = {
   width: number;
   height: number;
   x: number;
   y: number;
+  label: string;
+  value: number;
+  color: string;
 };
 
 export const Rectangle = (props: RectangleProps) => {
-  const { x, y, width, height } = props;
+  const { x, y, width, height, label, value, color } = props;
 
   const springProps = useSpring({
-    to: { x, y, width, height },
-    config: {
-      friction: 30,
-    },
+    to: { x, y, width, height, value },
+    config: config.molasses,
   });
 
   if (y === undefined) {
@@ -22,17 +23,42 @@ export const Rectangle = (props: RectangleProps) => {
   }
 
   return (
-    <animated.rect
-      x={springProps.x}
-      y={springProps.y}
-      width={springProps.width}
-      height={springProps.height}
-      opacity={0.7}
-      stroke="#9d174d"
-      fill="#9d174d"
-      fillOpacity={0.3}
-      strokeWidth={1}
-      rx={1}
-    />
+    <g>
+      <animated.rect
+        key={label}
+        x={springProps.x}
+        y={springProps.y}
+        width={springProps.width}
+        height={springProps.height}
+        opacity={0.7}
+        stroke={color}
+        fill={color}
+        fillOpacity={0.9}
+        strokeWidth={1}
+        rx={1}
+      />
+      <animated.text
+        x={springProps.x.to((x) => x + 3)}
+        y={springProps.y.to((y) => y + 3)}
+        fontSize={12}
+        textAnchor="start"
+        alignmentBaseline="hanging"
+        fill="white"
+        className="font-bold"
+      >
+        {label}
+      </animated.text>
+      <animated.text
+        x={springProps.x.to((x) => x + 3)}
+        y={springProps.y.to((y) => y + 18)}
+        fontSize={12}
+        textAnchor="start"
+        alignmentBaseline="hanging"
+        fill="white"
+        className="font-light"
+      >
+        {springProps.value.to((val) => Math.round(val))}
+      </animated.text>
+    </g>
   );
 };
diff --git a/viz/TreemapFrenchTravel/Treemap.tsx b/viz/TreemapFrenchTravel/Treemap.tsx
index df8980ce..c5b0d33f 100644
--- a/viz/TreemapFrenchTravel/Treemap.tsx
+++ b/viz/TreemapFrenchTravel/Treemap.tsx
@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import styles from './treemap.module.css';
 import { Tree } from '@/viz/TreemapFrenchTravel/data';
 import { Rectangle } from './Rectangle';
+import { useMemo } from 'react';
 
 type TreemapProps = {
   width: number;
@@ -17,47 +18,48 @@ const colors = [
   '#9a6fb0',
   '#a53253',
   '#7f7f7f',
+  'red',
 ];
 
 export const Treemap = ({ width, height, data }: TreemapProps) => {
-  const hierarchy = d3.hierarchy(data).sum((d) => d.value);
-  console.log('hierarchy', hierarchy);
+  const hierarchy = d3
+    .hierarchy(data)
+    .sum((d) => d.value)
+    .sort((a, b) => b.value - a.value);
+
+  const treeGenerator = useMemo(() => {
+    console.log('compute tree generator');
+
+    return d3
+      .treemap()
+      .size([width, height])
+      .padding(4)
+      .round(true)
+      .tile(d3.treemapResquarify);
+  }, []);
 
-  const treeGenerator = d3.treemap<Tree>().size([width, height]).padding(4);
   const root = treeGenerator(hierarchy);
 
+  const allGroups = hierarchy
+    .leaves()
+    .map((l) => l.data.name)
+    .sort((a, b) => b.localeCompare(a));
+
+  var colorScale = d3.scaleOrdinal().domain(allGroups).range(colors);
+
   const allShapes = root.leaves().map((leaf) => {
     return (
       <g key={leaf.id}>
         <Rectangle
+          key={leaf.data.name}
           x={leaf.x0}
           y={leaf.y0}
           width={leaf.x1 - leaf.x0}
           height={leaf.y1 - leaf.y0}
+          label={leaf.data.name}
+          value={leaf.data.value}
+          color={colorScale(leaf.data.name)}
         />
-
-        {/* <text
-          x={leaf.x0 + 3}
-          y={leaf.y0 + 3}
-          fontSize={12}
-          textAnchor="start"
-          alignmentBaseline="hanging"
-          fill="white"
-          className="font-bold"
-        >
-          {leaf.data.name}
-        </text>
-        <text
-          x={leaf.x0 + 3}
-          y={leaf.y0 + 18}
-          fontSize={12}
-          textAnchor="start"
-          alignmentBaseline="hanging"
-          fill="white"
-          className="font-light"
-        >
-          {leaf.data.value}
-        </text> */}
       </g>
     );
   });