simpler treemap basic

viz/TreemapBasic/Treemap.tsx

@@ -1,6 +1,5 @@
-import { useMemo } from "react";
-import { Tree } from "./data";
-import * as d3 from "d3";
+import { Tree } from './data';
+import * as d3 from 'd3';
 
 type TreemapProps = {
   width: number;
@@ -9,14 +8,10 @@ type TreemapProps = {
 };
 
 export const Treemap = ({ width, height, data }: TreemapProps) => {
-  const hierarchy = useMemo(() => {
-    return d3.hierarchy(data).sum((d) => d.value);
-  }, [data]);
+  const hierarchy = d3.hierarchy(data).sum((d) => d.value);
 
-  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);
 
   const allShapes = root.leaves().map((leaf) => {
     return (
@@ -27,8 +22,8 @@ export const Treemap = ({ width, height, data }: TreemapProps) => {
           width={leaf.x1 - leaf.x0}
           height={leaf.y1 - leaf.y0}
           stroke="transparent"
-          fill={"#69b3a2"}
-          className={"opacity-80 hover:opacity-100"}
+          fill={'#69b3a2'}
+          className={'opacity-80 hover:opacity-100'}
         />
         <text
           x={leaf.x0 + 3}