Try using react-d3-treemap

src/TreeMap.tsx

@@ -1,10 +1,13 @@
 
 import {useMemo} from "react";
 
-import D3TreeMap from "./D3TreeMap";
 import buildNestedData from "./TreeMap/BuildData";
 import {formatBytes, formatTime} from "./Util";
 
+// import D3TreeMap from "./D3TreeMap";
+
+import D3TreeMap from "react-d3-treemap";
+import "react-d3-treemap/dist/react.d3.treemap.css";
 
 interface Props {
   aggregate: Aggregate;
@@ -20,13 +23,24 @@ export default function TreeMap({aggregate, data}: Props) {
   // Modes: squarify, resquarify, slice, dice, slicedice, binary, circlePack, partition, partition-pivot
 
   return (
-    <D3TreeMap
+    <D3TreeMap<Tree<TreeNode>>
+      id="myTreeMap"
       width={500}
-      height={500}
+      height={400}
       data={nestedData}
-      labelFn={(x) => x.name}
-      subLabelFn={(x) => aggregate === "time" ? formatTime(x.size) : formatBytes(x.size)}
-      valueFn={(x) => x.size}
-    />
+      valueUnit={aggregate === "time" ? "us" : "B"}
+      levelsToDisplay={2}
+      />
   );
+
+  // return (
+  //   <D3TreeMap
+  //     width={500}
+  //     height={500}
+  //     data={nestedData}
+  //     labelFn={(x) => x.name}
+  //     subLabelFn={(x) => aggregate === "time" ? formatTime(x.value) : formatBytes(x.value)}
+  //     valueFn={(x) => x.value}
+  //   />
+  // );
 }

src/TreeMap/BuildData.ts

@@ -8,7 +8,7 @@ export default function buildNestedData(
 ) {
   const ret: Tree<TreeNode> = {
     name: "Top-level",
-    size: 0,
+    value: 0,
     part: "",
     children: [],
   };
@@ -26,17 +26,17 @@ export default function buildNestedData(
         item = {
           name: soFar,
           part,
-          size: 0,
+          value: 0,
           children: [],
         };
         current.children.push(item);
       }
       current = item;
-      current.size += (aggregate === "time" ? m["time"]: m["alloc"]);
+      current.value += (aggregate === "time" ? m["time"]: m["alloc"]);
     }
   }
   forEach(ret.children, (x) => {
-    ret.size += x.size;
+    ret.value += x.value;
   });
 
   console.log("Built nestedData", ret);

src/types.d.ts

@@ -27,5 +27,5 @@ interface TreeNode {
   name: string;
   part: string;
   color?: string;
-  size: number;
+  value: number;
 }