diff --git a/package.json b/package.json
index a2833baba6..bdc9136bd4 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@mui/x-data-grid": "^6.18.0",
     "@reduxjs/toolkit": "^1.9.7",
     "axios": "^0.27.2",
+    "d3": "^7.9.0",
     "i18next": "^23.6.0",
     "lodash.isequal": "^4.5.0",
     "react": "^18.2.0",
diff --git a/src/pages/taxonomyWalk/ForceGraph.tsx b/src/pages/taxonomyWalk/ForceGraph.tsx
new file mode 100644
index 0000000000..c1b556efd9
--- /dev/null
+++ b/src/pages/taxonomyWalk/ForceGraph.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { runForceGraph } from "./forceGraphGenerator";
+
+export default function ForceGraph({ linksData, nodesData }) {
+  const containerRef = React.useRef(null);
+  const graphRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      try {
+        graphRef.current = runForceGraph(
+          containerRef.current,
+          linksData,
+          nodesData,
+        );
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    return () => {
+      graphRef.current?.destroy?.();
+    };
+  }, [linksData, nodesData]);
+
+  return <canvas ref={containerRef} style={{ width: 500, height: 500 }} />;
+}
diff --git a/src/pages/taxonomyWalk/forceGraphGenerator.ts b/src/pages/taxonomyWalk/forceGraphGenerator.ts
new file mode 100644
index 0000000000..c4fcac6a81
--- /dev/null
+++ b/src/pages/taxonomyWalk/forceGraphGenerator.ts
@@ -0,0 +1,128 @@
+import * as d3 from "d3";
+// import "@fortawesome/fontawesome-free/css/all.min.css";
+
+export function runForceGraph(
+  container,
+  linksData,
+  nodesData,
+  //   nodeHoverTooltip,
+) {
+  // Specify the dimensions of the chart.
+  const width = 500;
+  const height = 500;
+
+  // Specify the color scale.
+  const color = d3.scaleOrdinal(d3.schemeCategory10);
+
+  // The force simulation mutates links and nodes, so create a copy
+  // so that re-evaluating this cell produces the same result.
+  const links = linksData.map((d) => ({ ...d }));
+  const nodes = nodesData.map((d) => ({ ...d, fy: 250 + 50 * d.depth }));
+
+  // Create a simulation with several forces.
+  const simulation = d3
+    .forceSimulation(nodes)
+    .force(
+      "link",
+      d3.forceLink(links).id((d) => d.id),
+    )
+    .force("charge", d3.forceManyBody())
+    .force("center", d3.forceCenter(width / 2, height / 2))
+    .on("tick", draw);
+
+  // Create the canvas.
+  const dpi = devicePixelRatio; // _e.g._, 2 for retina screens
+  const canvas = d3
+    .select(container)
+    .attr("width", dpi * width)
+    .attr("height", dpi * height)
+    .attr("style", `width: ${width}px; max-width: 100%; height: auto;`)
+    .node();
+
+  const context = canvas.getContext("2d");
+  context.scale(dpi, dpi);
+
+  function draw() {
+    context.clearRect(0, 0, width, height);
+
+    context.save();
+    context.globalAlpha = 0.6;
+    context.strokeStyle = "#999";
+    context.beginPath();
+    links.forEach(drawLink);
+    context.stroke();
+    context.restore();
+
+    context.save();
+    context.strokeStyle = "#fff";
+    context.globalAlpha = 1;
+    nodes.forEach((node) => {
+      context.beginPath();
+      drawNode(node);
+      context.fillStyle = color(node.depth % 10);
+      context.strokeStyle = "#fff";
+      context.fill();
+      context.stroke();
+    });
+    context.restore();
+  }
+
+  function drawLink(d) {
+    context.moveTo(d.source.x, d.source.y);
+    context.lineTo(d.target.x, d.target.y);
+  }
+
+  function drawNode(d) {
+    context.moveTo(d.x + 5, d.y);
+    context.arc(d.x, d.y, 5, 0, 2 * Math.PI);
+  }
+
+  // Add a drag behavior. The _subject_ identifies the closest node to the pointer,
+  // conditional on the distance being less than 20 pixels.
+  d3.select(canvas).call(
+    d3
+      .drag()
+      .subject((event) => {
+        const [px, py] = d3.pointer(event, canvas);
+        return d3.least(nodes, ({ x, y }) => {
+          const dist2 = (x - px) ** 2 + (y - py) ** 2;
+          if (dist2 < 400) return dist2;
+        });
+      })
+      .on("start", dragstarted)
+      .on("drag", dragged)
+      .on("end", dragended),
+  );
+
+  // Reheat the simulation when drag starts, and fix the subject position.
+  function dragstarted(event) {
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    event.subject.fx = event.subject.x;
+    // event.subject.fy = event.subject.y;
+  }
+
+  // Update the subject (dragged node) position during drag.
+  function dragged(event) {
+    event.subject.fx = event.x;
+    // event.subject.fy = event.y;
+  }
+
+  // Restore the target alpha so the simulation cools after dragging ends.
+  // Unfix the subject position now that it’s no longer being dragged.
+  function dragended(event) {
+    if (!event.active) simulation.alphaTarget(0);
+    event.subject.fx = null;
+    // event.subject.fy = null;
+  }
+
+  // When this cell is re-run, stop the previous simulation. (This doesn’t
+  // really matter since the target alpha is zero and the simulation will
+  // stop naturally, but it’s a good practice.)
+  //   invalidation.then(() => simulation.stop());
+
+  return {
+    destroy: () => {
+      simulation.stop();
+    },
+  };
+}
diff --git a/src/pages/taxonomyWalk/generateGraph.ts b/src/pages/taxonomyWalk/generateGraph.ts
new file mode 100644
index 0000000000..12cdf03ee1
--- /dev/null
+++ b/src/pages/taxonomyWalk/generateGraph.ts
@@ -0,0 +1,84 @@
+import { CategoryType } from "./ItemCard";
+
+type NodeType = {
+  id: string;
+  /**
+   * length of the shortest path with the item. Can be negative
+   */
+  depth: number;
+};
+
+type LinkType = {
+  child: string;
+  parent: string;
+};
+
+function itemOrUndefined(
+  item: "loading" | "failed" | CategoryType,
+): CategoryType | undefined {
+  if (typeof item === "string") {
+    return undefined;
+  }
+  return item;
+}
+
+export function generateGraph(
+  rootId: string,
+  taxoLookup: Record<string, "loading" | "failed" | CategoryType>,
+) {
+  const nodeDepth: Record<string, number> = { [rootId]: 0 };
+  const links: LinkType[] = [];
+  const seen = new Set<string>();
+
+  const parentsLinksFIFO =
+    itemOrUndefined(taxoLookup[rootId])?.parents?.map((parent) => ({
+      child: rootId,
+      parent,
+    })) ?? [];
+  const childLinksFIFO =
+    itemOrUndefined(taxoLookup[rootId])?.children?.map((child) => ({
+      child,
+      parent: rootId,
+    })) ?? [];
+
+  while (parentsLinksFIFO.length > 0) {
+    const link = parentsLinksFIFO.shift();
+    const node = link.parent;
+    if (!seen.has(node)) {
+      seen.add(node);
+      links.push(link);
+      nodeDepth[node] = nodeDepth[link.child] - 1;
+
+      itemOrUndefined(taxoLookup[node])
+        ?.parents?.map((parent) => ({ child: node, parent }))
+        ?.forEach((link) => parentsLinksFIFO.push(link));
+    }
+  }
+
+  while (childLinksFIFO.length > 0) {
+    const link = childLinksFIFO.shift();
+    const node = link.child;
+    if (!seen.has(node)) {
+      seen.add(node);
+      links.push(link);
+      nodeDepth[node] = nodeDepth[link.parent] + 1;
+
+      itemOrUndefined(taxoLookup[node])
+        ?.children?.map((child) => ({ child, parent: node }))
+        ?.forEach((link) => childLinksFIFO.push(link));
+    }
+  }
+
+  const nodes: NodeType[] = Object.entries(nodeDepth).map(([id, depth]) => ({
+    id,
+    depth,
+  }));
+
+  return {
+    nodes,
+    links: links?.map(({ child, parent }) => ({
+      source: child,
+      target: parent,
+    })),
+  };
+}
diff --git a/src/pages/taxonomyWalk/index.tsx b/src/pages/taxonomyWalk/index.tsx
index d0c8509d21..fce86b2da2 100644
--- a/src/pages/taxonomyWalk/index.tsx
+++ b/src/pages/taxonomyWalk/index.tsx
@@ -5,6 +5,8 @@ import getTaxonomy from "../../offTaxonomy";
 import Stack from "@mui/material/Stack";
 import { ErrorBoundary } from "./Error";
 import { Button, Typography } from "@mui/material";
+import ForceGraph from "./ForceGraph";
+import { generateGraph } from "./generateGraph";
 
 export default function TaxonomyWalk() {
   const [initialItem, setInitialItem] = React.useState<null | {
@@ -12,7 +14,10 @@ export default function TaxonomyWalk() {
     text: string;
   }>(null);
 
-  const [currentId, setCurrentId] = React.useState("en:carrots");
+  const [currentId, setCurrentId] = React.useState(
+    "en:meals",
+    // "en:carrots"
+  );
 
   const [taxonomyLookup, setTaxonomyLookup] = React.useState<
     Record<string, "loading" | "failed" | CategoryType>
@@ -33,6 +38,133 @@ export default function TaxonomyWalk() {
       name: { en: "Carrots", fr: "Carottes" },
       parents: ["en:vegetables"],
     },
+    "en:meals": {
+      children: [
+        "en:acras",
+        "en:aligots",
+        "en:banh-bao",
+        "en:basque-style-piperade",
+        "en:bean-dishes",
+        "en:boiled-meat-with-vegetables",
+        "en:braised-european-hake",
+        "en:buckwheat-crepe-filled-with-cheese-ham-and-mushrooms",
+        "en:buckwheat-crepe-with-mushrooms",
+        "en:bulgur-dishes",
+        "en:canned-meals",
+        "en:chinese-dumplings",
+        "en:chop-suey",
+        "en:combination-meals",
+        "en:cooked-egg-yolk",
+        "en:cooked-steamed-shrimp-dumplings",
+        "en:cooked-unsalted-couscous",
+        "en:couscous",
+        "en:crepe-filled-with-cheese",
+        "en:crepe-filled-with-egg-ham-and-cheese",
+        "en:crepe-filled-with-scallops",
+        "en:crepes-filled-with-fish",
+        "en:crepes-filled-with-seafood",
+        "en:dough-based-meals-ready",
+        "en:dough-based-meals-variety-packs",
+        "en:dried-meals",
+        "en:egg-white-cooked",
+        "en:endives-with-ham",
+        "en:fajitas",
+        "en:filled-buckwheat-crepes",
+        "en:filled-fritter-garnished-with-shrimps-and-vegetables-and-poultry-and-meat",
+        "en:filled-fritters",
+        "en:filled-pinsa",
+        "en:filled-steamed-buns",
+        "en:focaccia",
+        "en:fresh-meals",
+        "en:fried-egg",
+        "en:frozen-dough-based-meals-to-prepare",
+        "en:frozen-grain-based-meals",
+        "en:frozen-ready-made-meals",
+        "en:grain-based-meals",
+        "en:gratins",
+        "en:hotpots",
+        "en:irish-stews",
+        "en:khatfa",
+        "en:lentil-dishes",
+        "en:low-fat-prepared-meals",
+        "en:meal-replacements",
+        "en:meals-with-falafels",
+        "en:meals-with-fish",
+        "en:meals-with-meat",
+        "en:meals-with-shellfish",
+        "en:microwave-meals",
+        "en:moussaka",
+        "en:nems",
+        "en:non-frozen-dough-based-meals-to-prepare",
+        "en:omelettes",
+        "en:pad-thai",
+        "en:pan-fried-dishes",
+        "en:pasta-dishes",
+        "en:pizzas-pies-and-quiches",
+        "en:plant-based-meals",
+        "en:poached-eggs",
+        "en:pork-sausage-stew-with-cabbage-carrots-and-potatoes",
+        "en:potato-dishes",
+        "en:prepared-lentils",
+        "en:prepared-salads",
+        "en:puff-pastry-meals",
+        "en:quinoa-dishes",
+        "en:ratatouille",
+        "en:refrigerated-dough-based-meals-ready",
+        "en:refrigerated-meals",
+        "en:rice-dishes",
+        "en:samosas",
+        "en:sauerkraut-with-garnish",
+        "en:savory-semolina-dishes",
+        "en:scrambled-egg",
+        "en:soft-boiled-eggs",
+        "en:soups",
+        "en:spanish-omelettes",
+        "en:spring-rolls",
+        "en:stews",
+        "en:stuffed-cabbage",
+        "en:stuffed-vine-leaves",
+        "en:sushi-and-maki",
+        "en:tabbouleh",
+        "en:tajine",
+        "en:truffades",
+        "en:vegetarian-meals",
+        "en:waterzooi",
+        "fr:cereales-preparees",
+        "fr:choucroutes-de-la-mer",
+        "fr:crepes-au-jambon",
+        "fr:fondues",
+        "fr:quenelles",
+      ],
+      food_groups: {
+        en: "en:one-dish-meals",
+      },
+      incompatible_with: {
+        en: "categories:en:beverages",
+      },
+      name: {
+        en: "Meals",
+        fr: "Plats préparés",
+      },
+      nova: {
+        en: "3",
+      },
+      pnns_group_2: {
+        en: "One-dish meals",
+      },
+      synonyms: {
+        en: ["Meals", "Prepared meals", "Prepared dishes"],
+        fr: [
+          "Plats préparés",
+          "plat préparé",
+          "plats cuisinés",
+          "plat cuisiné",
+        ],
+      },
+      wikidata: {
+        en: "Q3391775",
+      },
+    },
   });
 
   const fetchItem = React.useCallback(async (tag: string) => {
@@ -67,9 +199,11 @@ export default function TaxonomyWalk() {
     });
   }, [taxonomyLookup, currentItem]);
 
+  const { nodes, links } = generateGraph("en:meals", taxonomyLookup);
   return (
     <ErrorBoundary>
       <div>
+        <ForceGraph linksData={links} nodesData={nodes} />
         <Stack direction="row" sx={{ m: 2 }} justifyContent="flex-start">
           <TaxonomyAutoSelect
             taxonomy="category"
diff --git a/yarn.lock b/yarn.lock
index f4084655b0..137e84baf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1914,6 +1914,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:7":
+  version: 7.2.0
+  resolution: "commander@npm:7.2.0"
+  checksum: 53501cbeee61d5157546c0bef0fedb6cdfc763a882136284bed9a07225f09a14b82d2a84e7637edfd1a679fb35ed9502fd58ef1d091e6287f60d790147f68ddc
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -1984,6 +1991,324 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-array@npm:2 - 3, d3-array@npm:2.10.0 - 3, d3-array@npm:2.5.0 - 3, d3-array@npm:3, d3-array@npm:^3.2.0":
+  version: 3.2.4
+  resolution: "d3-array@npm:3.2.4"
+  dependencies:
+    internmap: 1 - 2
+  checksum: a5976a6d6205f69208478bb44920dd7ce3e788c9dceb86b304dbe401a4bfb42ecc8b04c20facde486e9adcb488b5d1800d49393a3f81a23902b68158e12cddd0
+  languageName: node
+  linkType: hard
+
+"d3-axis@npm:3":
+  version: 3.0.0
+  resolution: "d3-axis@npm:3.0.0"
+  checksum: 227ddaa6d4bad083539c1ec245e2228b4620cca941997a8a650cb0af239375dc20271993127eedac66f0543f331027aca09385e1e16eed023f93eac937cddf0b
+  languageName: node
+  linkType: hard
+
+"d3-brush@npm:3":
+  version: 3.0.0
+  resolution: "d3-brush@npm:3.0.0"
+  dependencies:
+    d3-dispatch: 1 - 3
+    d3-drag: 2 - 3
+    d3-interpolate: 1 - 3
+    d3-selection: 3
+    d3-transition: 3
+  checksum: 1d042167769a02ac76271c71e90376d7184206e489552b7022a8ec2860209fe269db55e0a3430f3dcbe13b6fec2ff65b1adeaccba3218991b38e022390df72e3
+  languageName: node
+  linkType: hard
+
+"d3-chord@npm:3":
+  version: 3.0.1
+  resolution: "d3-chord@npm:3.0.1"
+  dependencies:
+    d3-path: 1 - 3
+  checksum: ddf35d41675e0f8738600a8a2f05bf0858def413438c12cba357c5802ecc1014c80a658acbbee63cbad2a8c747912efb2358455d93e59906fe37469f1dc6b78b
+  languageName: node
+  linkType: hard
+
+"d3-color@npm:1 - 3, d3-color@npm:3":
+  version: 3.1.0
+  resolution: "d3-color@npm:3.1.0"
+  checksum: 4931fbfda5d7c4b5cfa283a13c91a954f86e3b69d75ce588d06cde6c3628cebfc3af2069ccf225e982e8987c612aa7948b3932163ce15eb3c11cd7c003f3ee3b
+  languageName: node
+  linkType: hard
+
+"d3-contour@npm:4":
+  version: 4.0.2
+  resolution: "d3-contour@npm:4.0.2"
+  dependencies:
+    d3-array: ^3.2.0
+  checksum: 56aa082c1acf62a45b61c8d29fdd307041785aa17d9a07de7d1d848633769887a33fb6823888afa383f31c460d0f21d24756593e84e334ddb92d774214d32f1b
+  languageName: node
+  linkType: hard
+
+"d3-delaunay@npm:6":
+  version: 6.0.4
+  resolution: "d3-delaunay@npm:6.0.4"
+  dependencies:
+    delaunator: 5
+  checksum: ce6d267d5ef21a8aeadfe4606329fc80a22ab6e7748d47bc220bcc396ee8be84b77a5473033954c5ac4aa522d265ddc45d4165d30fe4787dd60a15ea66b9bbb4
+  languageName: node
+  linkType: hard
+
+"d3-dispatch@npm:1 - 3, d3-dispatch@npm:3":
+  version: 3.0.1
+  resolution: "d3-dispatch@npm:3.0.1"
+  checksum: fdfd4a230f46463e28e5b22a45dd76d03be9345b605e1b5dc7d18bd7ebf504e6c00ae123fd6d03e23d9e2711e01f0e14ea89cd0632545b9f0c00b924ba4be223
+  languageName: node
+  linkType: hard
+
+"d3-drag@npm:2 - 3, d3-drag@npm:3":
+  version: 3.0.0
+  resolution: "d3-drag@npm:3.0.0"
+  dependencies:
+    d3-dispatch: 1 - 3
+    d3-selection: 3
+  checksum: d297231e60ecd633b0d076a63b4052b436ddeb48b5a3a11ff68c7e41a6774565473a6b064c5e9256e88eca6439a917ab9cea76032c52d944ddbf4fd289e31111
+  languageName: node
+  linkType: hard
+
+"d3-dsv@npm:1 - 3, d3-dsv@npm:3":
+  version: 3.0.1
+  resolution: "d3-dsv@npm:3.0.1"
+  dependencies:
+    commander: 7
+    iconv-lite: 0.6
+    rw: 1
+  bin:
+    csv2json: bin/dsv2json.js
+    csv2tsv: bin/dsv2dsv.js
+    dsv2dsv: bin/dsv2dsv.js
+    dsv2json: bin/dsv2json.js
+    json2csv: bin/json2dsv.js
+    json2dsv: bin/json2dsv.js
+    json2tsv: bin/json2dsv.js
+    tsv2csv: bin/dsv2dsv.js
+    tsv2json: bin/dsv2json.js
+  checksum: 5fc0723647269d5dccd181d74f2265920ab368a2868b0b4f55ffa2fecdfb7814390ea28622cd61ee5d9594ab262879509059544e9f815c54fe76fbfb4ffa4c8a
+  languageName: node
+  linkType: hard
+
+"d3-ease@npm:1 - 3, d3-ease@npm:3":
+  version: 3.0.1
+  resolution: "d3-ease@npm:3.0.1"
+  checksum: 06e2ee5326d1e3545eab4e2c0f84046a123dcd3b612e68858219aa034da1160333d9ce3da20a1d3486d98cb5c2a06f7d233eee1bc19ce42d1533458bd85dedcd
+  languageName: node
+  linkType: hard
+
+"d3-fetch@npm:3":
+  version: 3.0.1
+  resolution: "d3-fetch@npm:3.0.1"
+  dependencies:
+    d3-dsv: 1 - 3
+  checksum: 382dcea06549ef82c8d0b719e5dc1d96286352579e3b51b20f71437f5800323315b09cf7dcfd4e1f60a41e1204deb01758470cea257d2285a7abd9dcec806984
+  languageName: node
+  linkType: hard
+
+"d3-force@npm:3":
+  version: 3.0.0
+  resolution: "d3-force@npm:3.0.0"
+  dependencies:
+    d3-dispatch: 1 - 3
+    d3-quadtree: 1 - 3
+    d3-timer: 1 - 3
+  checksum: 6c7e96438cab62fa32aeadb0ade3297b62b51f81b1b38b0a60a5ec9fd627d74090c1189654d92df2250775f31b06812342f089f1d5947de9960a635ee3581def
+  languageName: node
+  linkType: hard
+
+"d3-format@npm:1 - 3, d3-format@npm:3":
+  version: 3.1.0
+  resolution: "d3-format@npm:3.1.0"
+  checksum: f345ec3b8ad3cab19bff5dead395bd9f5590628eb97a389b1dd89f0b204c7c4fc1d9520f13231c2c7cf14b7c9a8cf10f8ef15bde2befbab41454a569bd706ca2
+  languageName: node
+  linkType: hard
+
+"d3-geo@npm:3":
+  version: 3.1.1
+  resolution: "d3-geo@npm:3.1.1"
+  dependencies:
+    d3-array: 2.5.0 - 3
+  checksum: 3cc4bb50af5d2d4858d2df1729a1777b7fd361854079d9faab1166186c988d2cba0d11911da0c4598d5e22fae91d79113ed262a9f98cabdbc6dbf7c30e5c0363
+  languageName: node
+  linkType: hard
+
+"d3-hierarchy@npm:3":
+  version: 3.1.2
+  resolution: "d3-hierarchy@npm:3.1.2"
+  checksum: 0fd946a8c5fd4686d43d3e11bbfc2037a145fda29d2261ccd0e36f70b66af6d7638e2c0c7112124d63fc3d3127197a00a6aecf676bd5bd392a94d7235a214263
+  languageName: node
+  linkType: hard
+
+"d3-interpolate@npm:1 - 3, d3-interpolate@npm:1.2.0 - 3, d3-interpolate@npm:3":
+  version: 3.0.1
+  resolution: "d3-interpolate@npm:3.0.1"
+  dependencies:
+    d3-color: 1 - 3
+  checksum: a42ba314e295e95e5365eff0f604834e67e4a3b3c7102458781c477bd67e9b24b6bb9d8e41ff5521050a3f2c7c0c4bbbb6e187fd586daa3980943095b267e78b
+  languageName: node
+  linkType: hard
+
+"d3-path@npm:1 - 3, d3-path@npm:3, d3-path@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "d3-path@npm:3.1.0"
+  checksum: 2306f1bd9191e1eac895ec13e3064f732a85f243d6e627d242a313f9777756838a2215ea11562f0c7630c7c3b16a19ec1fe0948b1c82f3317fac55882f6ee5d8
+  languageName: node
+  linkType: hard
+
+"d3-polygon@npm:3":
+  version: 3.0.1
+  resolution: "d3-polygon@npm:3.0.1"
+  checksum: 0b85c532517895544683849768a2c377cee3801ef8ccf3fa9693c8871dd21a0c1a2a0fc75ff54192f0ba2c562b0da2bc27f5bf959dfafc7fa23573b574865d2c
+  languageName: node
+  linkType: hard
+
+"d3-quadtree@npm:1 - 3, d3-quadtree@npm:3":
+  version: 3.0.1
+  resolution: "d3-quadtree@npm:3.0.1"
+  checksum: 5469d462763811475f34a7294d984f3eb100515b0585ca5b249656f6b1a6e99b20056a2d2e463cc9944b888896d2b1d07859c50f9c0cf23438df9cd2e3146066
+  languageName: node
+  linkType: hard
+
+"d3-random@npm:3":
+  version: 3.0.1
+  resolution: "d3-random@npm:3.0.1"
+  checksum: a70ad8d1cabe399ebeb2e482703121ac8946a3b336830b518da6848b9fdd48a111990fc041dc716f16885a72176ffa2898f2a250ca3d363ecdba5ef92b18e131
+  languageName: node
+  linkType: hard
+
+"d3-scale-chromatic@npm:3":
+  version: 3.1.0
+  resolution: "d3-scale-chromatic@npm:3.1.0"
+  dependencies:
+    d3-color: 1 - 3
+    d3-interpolate: 1 - 3
+  checksum: ab6324bd8e1f708e731e02ab44e09741efda2b174cea1d8ca21e4a87546295e99856bc44e2fd3890f228849c96bccfbcf922328f95be6a7df117453eb5cf22c9
+  languageName: node
+  linkType: hard
+
+"d3-scale@npm:4":
+  version: 4.0.2
+  resolution: "d3-scale@npm:4.0.2"
+  dependencies:
+    d3-array: 2.10.0 - 3
+    d3-format: 1 - 3
+    d3-interpolate: 1.2.0 - 3
+    d3-time: 2.1.1 - 3
+    d3-time-format: 2 - 4
+  checksum: a9c770d283162c3bd11477c3d9d485d07f8db2071665f1a4ad23eec3e515e2cefbd369059ec677c9ac849877d1a765494e90e92051d4f21111aa56791c98729e
+  languageName: node
+  linkType: hard
+
+"d3-selection@npm:2 - 3, d3-selection@npm:3":
+  version: 3.0.0
+  resolution: "d3-selection@npm:3.0.0"
+  checksum: f4e60e133309115b99f5b36a79ae0a19d71ee6e2d5e3c7216ef3e75ebd2cb1e778c2ed2fa4c01bef35e0dcbd96c5428f5bd6ca2184fe2957ed582fde6841cbc5
+  languageName: node
+  linkType: hard
+
+"d3-shape@npm:3":
+  version: 3.2.0
+  resolution: "d3-shape@npm:3.2.0"
+  dependencies:
+    d3-path: ^3.1.0
+  checksum: de2af5fc9a93036a7b68581ca0bfc4aca2d5a328aa7ba7064c11aedd44d24f310c20c40157cb654359d4c15c3ef369f95ee53d71221017276e34172c7b719cfa
+  languageName: node
+  linkType: hard
+
+"d3-time-format@npm:2 - 4, d3-time-format@npm:4":
+  version: 4.1.0
+  resolution: "d3-time-format@npm:4.1.0"
+  dependencies:
+    d3-time: 1 - 3
+  checksum: 7342bce28355378152bbd4db4e275405439cabba082d9cd01946d40581140481c8328456d91740b0fe513c51ec4a467f4471ffa390c7e0e30ea30e9ec98fcdf4
+  languageName: node
+  linkType: hard
+
+"d3-time@npm:1 - 3, d3-time@npm:2.1.1 - 3, d3-time@npm:3":
+  version: 3.1.0
+  resolution: "d3-time@npm:3.1.0"
+  dependencies:
+    d3-array: 2 - 3
+  checksum: 613b435352a78d9f31b7f68540788186d8c331b63feca60ad21c88e9db1989fe888f97f242322ebd6365e45ec3fb206a4324cd4ca0dfffa1d9b5feb856ba00a7
+  languageName: node
+  linkType: hard
+
+"d3-timer@npm:1 - 3, d3-timer@npm:3":
+  version: 3.0.1
+  resolution: "d3-timer@npm:3.0.1"
+  checksum: 1cfddf86d7bca22f73f2c427f52dfa35c49f50d64e187eb788dcad6e927625c636aa18ae4edd44d084eb9d1f81d8ca4ec305dae7f733c15846a824575b789d73
+  languageName: node
+  linkType: hard
+
+"d3-transition@npm:2 - 3, d3-transition@npm:3":
+  version: 3.0.1
+  resolution: "d3-transition@npm:3.0.1"
+  dependencies:
+    d3-color: 1 - 3
+    d3-dispatch: 1 - 3
+    d3-ease: 1 - 3
+    d3-interpolate: 1 - 3
+    d3-timer: 1 - 3
+  peerDependencies:
+    d3-selection: 2 - 3
+  checksum: cb1e6e018c3abf0502fe9ff7b631ad058efb197b5e14b973a410d3935aead6e3c07c67d726cfab258e4936ef2667c2c3d1cd2037feb0765f0b4e1d3b8788c0ea
+  languageName: node
+  linkType: hard
+
+"d3-zoom@npm:3":
+  version: 3.0.0
+  resolution: "d3-zoom@npm:3.0.0"
+  dependencies:
+    d3-dispatch: 1 - 3
+    d3-drag: 2 - 3
+    d3-interpolate: 1 - 3
+    d3-selection: 2 - 3
+    d3-transition: 2 - 3
+  checksum: 8056e3527281cfd1ccbcbc458408f86973b0583e9dac00e51204026d1d36803ca437f970b5736f02fafed9f2b78f145f72a5dbc66397e02d4d95d4c594b8ff54
+  languageName: node
+  linkType: hard
+
+"d3@npm:^7.9.0":
+  version: 7.9.0
+  resolution: "d3@npm:7.9.0"
+  dependencies:
+    d3-array: 3
+    d3-axis: 3
+    d3-brush: 3
+    d3-chord: 3
+    d3-color: 3
+    d3-contour: 4
+    d3-delaunay: 6
+    d3-dispatch: 3
+    d3-drag: 3
+    d3-dsv: 3
+    d3-ease: 3
+    d3-fetch: 3
+    d3-force: 3
+    d3-format: 3
+    d3-geo: 3
+    d3-hierarchy: 3
+    d3-interpolate: 3
+    d3-path: 3
+    d3-polygon: 3
+    d3-quadtree: 3
+    d3-random: 3
+    d3-scale: 4
+    d3-scale-chromatic: 3
+    d3-selection: 3
+    d3-shape: 3
+    d3-time: 3
+    d3-time-format: 4
+    d3-timer: 3
+    d3-transition: 3
+    d3-zoom: 3
+  checksum: 1c0e9135f1fb78aa32b187fafc8b56ae6346102bd0e4e5e5a5339611a51e6038adbaa293fae373994228100eddd87320e930b1be922baeadc07c9fd43d26d99b
+  languageName: node
+  linkType: hard
+
 "data-view-buffer@npm:^1.0.1":
   version: 1.0.1
   resolution: "data-view-buffer@npm:1.0.1"
@@ -2069,6 +2394,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"delaunator@npm:5":
+  version: 5.0.1
+  resolution: "delaunator@npm:5.0.1"
+  dependencies:
+    robust-predicates: ^3.0.2
+  checksum: 69ee43ec649b4a13b7f33c8a027fb3e8dfcb09266af324286118da757e04d3d39df619b905dca41421405c311317ccf632ecfa93db44519bacec3303c57c5a0b
+  languageName: node
+  linkType: hard
+
 "delayed-stream@npm:~1.0.0":
   version: 1.0.0
   resolution: "delayed-stream@npm:1.0.0"
@@ -3183,6 +3517,7 @@ __metadata:
     "@typescript-eslint/parser": latest
     "@vitejs/plugin-react": ^4.1.1
     axios: ^0.27.2
+    d3: ^7.9.0
     eslint: ^8.53.0
     eslint-plugin-prettier: ^5.1.3
     eslint-plugin-react: ^7.34.4
@@ -3224,7 +3559,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:^0.6.2":
+"iconv-lite@npm:0.6, iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
   dependencies:
@@ -3317,6 +3652,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"internmap@npm:1 - 2":
+  version: 2.0.3
+  resolution: "internmap@npm:2.0.3"
+  checksum: 7ca41ec6aba8f0072fc32fa8a023450a9f44503e2d8e403583c55714b25efd6390c38a87161ec456bf42d7bc83aab62eb28f5aef34876b1ac4e60693d5e1d241
+  languageName: node
+  linkType: hard
+
 "ip@npm:^2.0.0":
   version: 2.0.1
   resolution: "ip@npm:2.0.1"
@@ -4750,6 +5092,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"robust-predicates@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "robust-predicates@npm:3.0.2"
+  checksum: 36854c1321548ceca96d36ad9d6e0a5a512986029ec6929ad6ed3ec1612c22cc8b46cc72d2c5674af42e8074a119d793f6f0ea3a5b51373e3ab926c64b172d7a
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^3.27.1":
   version: 3.29.4
   resolution: "rollup@npm:3.29.4"
@@ -4773,6 +5122,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rw@npm:1":
+  version: 1.3.3
+  resolution: "rw@npm:1.3.3"
+  checksum: c20d82421f5a71c86a13f76121b751553a99cd4a70ea27db86f9b23f33db941f3f06019c30f60d50c356d0bd674c8e74764ac146ea55e217c091bde6fba82aa3
+  languageName: node
+  linkType: hard
+
 "safe-array-concat@npm:^1.0.1":
   version: 1.0.1
   resolution: "safe-array-concat@npm:1.0.1"