2022-08-24 20:51:31 -04:00 · 2022-08-24 20:35:41 -04:00
6 changed files with 886 additions and 123 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -41,7 +41,11 @@
  "files.eol": "\n",
  "[markdown]": {
    "editor.wordWrap": "on",
-    "editor.quickSuggestions": false,
+    "editor.quickSuggestions": {
+      "comments": "off",
+      "strings": "off",
+      "other": "off"
+    },
    "editor.tabSize": 4
  }
 }
--- a/components/LineGraph.tsx
+++ b/components/LineGraph.tsx
@ -1,14 +1,16 @@
-import { AxisLeft, AxisBottom } from "@visx/axis";
-import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
-import { curveLinear } from "@visx/curve";
-import { GridRows, GridColumns } from "@visx/grid";
-import { Group } from "@visx/group";
-import { scaleBand, scaleLinear } from "@visx/scale";
-import { LinePath } from "@visx/shape";
+import {
+  Axis,
+  Grid,
+  buildChartTheme,
+  LineSeries,
+  XYChart,
+  Annotation,
+  AnnotationLabel,
+  AnnotationConnector,
+  AnnotationCircleSubject,
+} from "@visx/xychart";
 import React from "react";

-export const background = "#252D41";
-
 interface LineGraphData {
  x: string;
  y: number;
@ -27,11 +29,13 @@ interface BarGraphProps {
 }

 const COLOURS = {
+  background: "#252D41",
  salmon: "#ffcad0",
  navy: "#2c3651",
  white: "#ffffff",
  pink: "#ef83b1",
  darkpink: "#cc5773",
+  darkblue: "#354265",
 };

 const defaultMargin = { top: 40, right: 30, bottom: 50, left: 40 };
@ -44,101 +48,98 @@ export default function LineGraph({
 }: BarGraphProps) {
  if (width < 10) return null;

-  // bounds
-  const xMax = width - margin.left - margin.right - 15;
-  const yMax = height - margin.top - margin.bottom - 15;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+  const customTheme = buildChartTheme({
+    // colors
+    backgroundColor: COLOURS.background, // used by Tooltip, Annotation
+    colors: [COLOURS.pink], // categorical colors, mapped to series via `dataKey`s
+
+    tickLength: 5,
+
+    // grid
+    gridColor: "#354265",
+    gridColorDark: "#222831", // used for axis baseline if x/yxAxisLineStyles not set
+  });

  // accessors
-  const getX = (d: LineGraphData) => d.x;
-  const getY = (d: LineGraphData) => d.y;
-
-  // scales
-  const xScale = scaleBand({
-    range: [0, xMax],
-    domain: data.map(getX),
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-    nice: true,
-    domain: [0, 100],
-    // domain: [0, Math.max(...data.map(getY))],
-  });
-
-  const xPoint = (d: LineGraphData) => xScale(getX(d));
-  const yPoint = (d: LineGraphData) => yScale(getY(d));
-
-  console.log(xPoint);
+  const xAccessor = (d: LineGraphData) => d.x;
+  const yAccessor = (d: LineGraphData) => d.y;

  return (
-    <div>
-      <svg width={width} height={height}>
-        <rect
-          x={0}
-          y={0}
-          width={width}
-          height={height}
-          fill={background}
-          rx={14}
-        />
-        <Group left={margin.left} top={margin.top}>
-          <GridRows
-            left={30}
-            scale={yScale}
-            width={xMax - 30}
-            height={yMax}
-            stroke="#354265"
-          />
-          <GridColumns
-            scale={xScale}
-            width={xMax}
-            height={yMax}
-            stroke="#354265"
-          />
-          <AxisBottom
-            top={yMax + 20}
-            scale={xScale}
-            hideAxisLine
-            hideTicks
-            tickLabelProps={() => {
-              return {
-                ...bottomTickLabelProps(),
-                fill: COLOURS.white,
-                fontSize: "1rem",
-                fontFamily: "Inconsolata",
-                fontWeight: 800,
-              };
-            }}
-          />
-          <AxisLeft
-            scale={yScale}
-            hideAxisLine
-            hideTicks
-            tickLabelProps={() => {
-              return {
-                ...bottomTickLabelProps(),
-                fill: COLOURS.white,
-                fontSize: "1rem",
-                fontFamily: "Inconsolata",
-                fontWeight: 800,
-              };
-            }}
-          />
-          <text x="15" y="5" fontSize={10} color={COLOURS.white}>
-            (%)
-          </text>
+    <XYChart
+      height={height}
+      width={width}
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      theme={customTheme}
+      margin={margin}
+      xScale={{ type: "band" }}
+      yScale={{ type: "linear" }}
+    >
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={COLOURS.background}
+      />

-          {/* BUG: alignment with x-axis */}
-          <LinePath
-            data={data}
-            curve={curveLinear}
-            x={xPoint}
-            y={yPoint}
-            translate={margin.left}
-            stroke="#EF839D"
-            strokeWidth={1.5}
-          />
-        </Group>
-      </svg>
-    </div>
+      <LineSeries
+        dataKey="Line 1"
+        data={data}
+        xAccessor={xAccessor}
+        yAccessor={yAccessor}
+      />
+
+      <Annotation
+        dataKey="Line 1" // use this Series's accessor functions, alternatively specify x/yAccessor here
+        datum={data[2]}
+        dx={-40}
+        dy={-50}
+      >
+        <AnnotationLabel
+          title="Title"
+          subtitle="Subtitle deets"
+          showAnchorLine={false}
+          backgroundFill="#FFFFFF"
+          showBackground
+        />
+        {/** Draw circle around point */}
+        <AnnotationCircleSubject />
+        {/** Connect label to CircleSubject */}
+        <AnnotationConnector />
+      </Annotation>
+
+      <Axis
+        orientation="bottom"
+        hideAxisLine
+        hideTicks
+        tickLabelProps={() => {
+          return {
+            dy: "0.25rem",
+            fill: COLOURS.white,
+            fontSize: `${width / 700}rem`,
+            fontFamily: "Inconsolata",
+            fontWeight: 800,
+          };
+        }}
+      />
+      <Axis
+        orientation="left"
+        hideAxisLine
+        hideTicks
+        numTicks={4}
+        rangePadding={100}
+        tickLabelProps={() => {
+          return {
+            dy: "0.25rem",
+            fill: COLOURS.white,
+            fontSize: `${height / 300}rem`,
+            fontFamily: "Inconsolata",
+            fontWeight: 800,
+          };
+        }}
+      />
+      <Grid numTicks={data.length} strokeWidth={0.5} strokeDasharray="6" />
+    </XYChart>
  );
 }
--- a/data/mocks.ts
+++ b/data/mocks.ts
@ -39,7 +39,7 @@ export const mockCategoricalData = [
 export const mockLineGraphlData = [
  {
    x: "1A",
-    y: 80,
+    y: 30,
  },
  {
    x: "1B",
@ -47,7 +47,7 @@ export const mockLineGraphlData = [
  },
  {
    x: "2A",
-    y: 90,
+    y: 93,
  },
  {
    x: "2B",
@ -55,7 +55,7 @@ export const mockLineGraphlData = [
  },
  {
    x: "3A",
-    y: 60,
+    y: 100,
  },
  {
    x: "3B",
--- a/package-lock.json
+++ b/package-lock.json
@ -13,6 +13,7 @@
        "@visx/mock-data": "^2.1.2",
        "@visx/shape": "^2.10.0",
        "@visx/threshold": "^2.10.0",
+        "@visx/xychart": "^2.11.1",
        "d3-array": "^3.1.6",
        "next": "12.1.6",
        "react": "18.1.0",
@ -340,6 +341,11 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
      "dev": true
    },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
    "node_modules/@next/env": {
      "version": "12.1.6",
      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz",
@ -569,6 +575,79 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@react-spring/animated": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz",
+      "integrity": "sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || >=17.0.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5.tgz",
+      "integrity": "sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || >=17.0.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5.tgz",
+      "integrity": "sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==",
+      "peer": true
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5.tgz",
+      "integrity": "sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || >=17.0.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5.tgz",
+      "integrity": "sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==",
+      "peer": true
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5.tgz",
+      "integrity": "sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || >=17.0.0 || >=18.0.0",
+        "react-dom": "^16.8.0  || >=17.0.0 || >=18.0.0"
+      }
+    },
    "node_modules/@rushstack/eslint-patch": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
@ -625,6 +704,11 @@
      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg=="
    },
+    "node_modules/@types/d3-voronoi": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz",
+      "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ=="
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -667,7 +751,6 @@
      "version": "18.0.5",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
-      "dev": true,
      "dependencies": {
        "@types/react": "*"
      }
@ -883,16 +966,69 @@
        "url": "https://opencollective.com/typescript-eslint"
      }
    },
+    "node_modules/@visx/annotation": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.11.1.tgz",
+      "integrity": "sha512-YzqLr9SB/obwyoCF+yqXRtjMNZEHwwwW2HYTtZP7dWBVgVK9u23FOGNim1More+6RoPdMCUA2e4GpKceUu877A==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/drag": "2.10.0",
+        "@visx/group": "2.10.0",
+        "@visx/point": "2.6.0",
+        "@visx/shape": "2.11.1",
+        "@visx/text": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10",
+        "react-use-measure": "^2.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/annotation/node_modules/@visx/shape": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+      "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "2.1.0",
+        "@visx/group": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/annotation/node_modules/react-use-measure": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
+      "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
+      "dependencies": {
+        "debounce": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      }
+    },
    "node_modules/@visx/axis": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz",
-      "integrity": "sha512-myEcXPzD7ZmKiXuhue2lpiuTDgl3Glhe1LB+xoUDS8ZAW76Asd6PwurjoxSnq3tHCz0EDBh7YlgApeFy3Bw38A==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.11.1.tgz",
+      "integrity": "sha512-RZdT+yhAEOXtcLc3PgD14Xh5bJh5B64IG+zvHe3YVMkiFWGT1phy0sGTRRxritHke16ErB9vndx+pwVIGSkxAw==",
      "dependencies": {
        "@types/react": "*",
        "@visx/group": "2.10.0",
        "@visx/point": "2.6.0",
        "@visx/scale": "2.2.2",
-        "@visx/shape": "2.10.0",
+        "@visx/shape": "2.11.1",
        "@visx/text": "2.10.0",
        "classnames": "^2.3.1",
        "prop-types": "^15.6.0"
@ -901,6 +1037,28 @@
        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
      }
    },
+    "node_modules/@visx/axis/node_modules/@visx/shape": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+      "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "2.1.0",
+        "@visx/group": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
    "node_modules/@visx/clip-path": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/@visx/clip-path/-/clip-path-2.10.0.tgz",
@ -922,17 +1080,56 @@
        "d3-shape": "^1.0.6"
      }
    },
-    "node_modules/@visx/grid": {
+    "node_modules/@visx/drag": {
      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.10.0.tgz",
-      "integrity": "sha512-2uj8vfwQ0f7EN1MuNne/1a94gyux19MZxBd36BqXmyUpnRxC4DSYQRra05tqoydUupe1mAlJZHUuKl2zDK7tOw==",
+      "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz",
+      "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/event": "2.6.0",
+        "@visx/point": "2.6.0",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/event": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz",
+      "integrity": "sha512-WGp91g82s727g3NAnENF1ppC3ZAlvWg+Y+GG0WFg34NmmOZbvPI/PTOqTqZE3x6B8EUn8NJiMxRjxIMbi+IvRw==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/point": "2.6.0"
+      }
+    },
+    "node_modules/@visx/glyph": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-2.10.0.tgz",
+      "integrity": "sha512-qjbnfSgV920+V4ctXeDJWwzBorZLz97cDA4b/GmJ2tk2h0AVMrAejF2LNLgPQpzsVb7BIuVXAJXgp0dop2gr6w==",
+      "dependencies": {
+        "@types/d3-shape": "^1.3.1",
+        "@types/react": "*",
+        "@visx/group": "2.10.0",
+        "classnames": "^2.3.1",
+        "d3-shape": "^1.2.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/grid": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.11.1.tgz",
+      "integrity": "sha512-mcF0OHIEm5LxkC7/seKq7GDgVfLgN1FS8XFiKHnvnA9BNkCMFdeHqnM8o46yS00/hYzh7El6jzu5OrGkSeuzaA==",
      "dependencies": {
        "@types/react": "*",
        "@visx/curve": "2.1.0",
        "@visx/group": "2.10.0",
        "@visx/point": "2.6.0",
        "@visx/scale": "2.2.2",
-        "@visx/shape": "2.10.0",
+        "@visx/shape": "2.11.1",
        "classnames": "^2.3.1",
        "prop-types": "^15.6.2"
      },
@ -940,6 +1137,28 @@
        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
      }
    },
+    "node_modules/@visx/grid/node_modules/@visx/shape": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+      "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "2.1.0",
+        "@visx/group": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
    "node_modules/@visx/group": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/@visx/group/-/group-2.10.0.tgz",
@ -967,6 +1186,39 @@
      "resolved": "https://registry.npmjs.org/@visx/point/-/point-2.6.0.tgz",
      "integrity": "sha512-amBi7yMz4S2VSchlPdliznN41TuES64506ySI22DeKQ+mc1s1+BudlpnY90sM1EIw4xnqbKmrghTTGfy6SVqvQ=="
    },
+    "node_modules/@visx/react-spring": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-2.11.1.tgz",
+      "integrity": "sha512-EFJMKj1rAh9bC+clROMREQd98kP1RoTy6y1j8IMeaNdhAF3gHxaG+OZH4e0dD3y+62NdeI+o+FLjHdw2NWQMDA==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/axis": "2.11.1",
+        "@visx/grid": "2.11.1",
+        "@visx/scale": "2.2.2",
+        "@visx/text": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "@react-spring/web": "^9.4.5",
+        "react": "^16.3.0-0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@visx/responsive": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-2.10.0.tgz",
+      "integrity": "sha512-NssDPpuUYp7hqVISuYkKZ5zk6ob0++RdTIaUjRcUdyFEbvzb9+zIb8QToOkvI90L2EC/MY4Jx0NpDbEe79GpAw==",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
    "node_modules/@visx/scale": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-2.2.2.tgz",
@ -1033,6 +1285,141 @@
        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
      }
    },
+    "node_modules/@visx/voronoi": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-2.10.0.tgz",
+      "integrity": "sha512-2GSosmQ25a9OctY4xPpPTwY6N4CW53Ssos8kzPHTo5Si/2h9AUNqVg7eGUb8lrEjakQYAAdX0J4U8D02tsQI+w==",
+      "dependencies": {
+        "@types/d3-voronoi": "^1.1.9",
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "d3-voronoi": "^1.1.2",
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/xychart": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-2.11.1.tgz",
+      "integrity": "sha512-9BxWPa4vU/RxgyzwnGvspLyuKTvZ/APvS5razaBxYIe92T0uNL+ci5tmBJTCrs4QY7AM615cJI3i2KVriJ4CBw==",
+      "dependencies": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/annotation": "2.11.1",
+        "@visx/axis": "2.11.1",
+        "@visx/event": "2.6.0",
+        "@visx/glyph": "2.10.0",
+        "@visx/grid": "2.11.1",
+        "@visx/react-spring": "2.11.1",
+        "@visx/responsive": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "@visx/shape": "2.11.1",
+        "@visx/text": "2.10.0",
+        "@visx/tooltip": "2.10.0",
+        "@visx/voronoi": "2.10.0",
+        "classnames": "^2.3.1",
+        "d3-array": "^2.6.0",
+        "d3-interpolate-path": "2.2.1",
+        "d3-shape": "^2.0.0",
+        "lodash": "^4.17.21",
+        "mitt": "^2.1.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "@react-spring/web": "^9.4.5",
+        "react": "^16.8.0 || ^17.0.0 || ^ 18.0.0"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/@visx/shape": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+      "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "2.1.0",
+        "@visx/group": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/@visx/shape/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/@visx/tooltip": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-2.10.0.tgz",
+      "integrity": "sha512-6Zrd79MIEfyuLBcZ1ypSeAkpQc8oLRNB7FQnegzl3Lje4LK5lJtuf5ST0mwK6G2Uv+GlOW9REJ6VK4gfAGkq9A==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/bounds": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10",
+        "react-use-measure": "^2.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0",
+        "react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/@visx/tooltip/node_modules/@visx/bounds": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-2.10.0.tgz",
+      "integrity": "sha512-rY7WFTIjQaXA8tFL45O2qbtSRkyF4yF75HiWz06F7BVmJ9UjF2qlomB3Y1z6gk6ZiFhwQ4zxABjOVjAQPLn7nQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0",
+        "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/@visx/tooltip/node_modules/react-use-measure": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
+      "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
+      "dependencies": {
+        "debounce": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/d3-shape": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "dependencies": {
+        "d3-path": "1 - 2"
+      }
+    },
    "node_modules/acorn": {
      "version": "8.7.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
@ -1501,6 +1888,11 @@
        "d3-color": "1"
      }
    },
+    "node_modules/d3-interpolate-path": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz",
+      "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q=="
+    },
    "node_modules/d3-path": {
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
@ -1563,12 +1955,22 @@
        "internmap": "^1.0.0"
      }
    },
+    "node_modules/d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
    "node_modules/damerau-levenshtein": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
      "dev": true
    },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -2963,6 +3365,11 @@
      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
      "dev": true
    },
+    "node_modules/mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -4616,6 +5023,11 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
      "dev": true
    },
+    "@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
    "@next/env": {
      "version": "12.1.6",
      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz",
@ -4728,6 +5140,62 @@
        "fastq": "^1.6.0"
      }
    },
+    "@react-spring/animated": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz",
+      "integrity": "sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==",
+      "peer": true,
+      "requires": {
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      }
+    },
+    "@react-spring/core": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5.tgz",
+      "integrity": "sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==",
+      "peer": true,
+      "requires": {
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      }
+    },
+    "@react-spring/rafz": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5.tgz",
+      "integrity": "sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==",
+      "peer": true
+    },
+    "@react-spring/shared": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5.tgz",
+      "integrity": "sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==",
+      "peer": true,
+      "requires": {
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      }
+    },
+    "@react-spring/types": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5.tgz",
+      "integrity": "sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==",
+      "peer": true
+    },
+    "@react-spring/web": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5.tgz",
+      "integrity": "sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==",
+      "peer": true,
+      "requires": {
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
+      }
+    },
    "@rushstack/eslint-patch": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
@ -4784,6 +5252,11 @@
      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg=="
    },
+    "@types/d3-voronoi": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz",
+      "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ=="
+    },
    "@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -4826,7 +5299,6 @@
      "version": "18.0.5",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
-      "dev": true,
      "requires": {
        "@types/react": "*"
      }
@ -4949,19 +5421,85 @@
        "eslint-visitor-keys": "^3.3.0"
      }
    },
+    "@visx/annotation": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.11.1.tgz",
+      "integrity": "sha512-YzqLr9SB/obwyoCF+yqXRtjMNZEHwwwW2HYTtZP7dWBVgVK9u23FOGNim1More+6RoPdMCUA2e4GpKceUu877A==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/drag": "2.10.0",
+        "@visx/group": "2.10.0",
+        "@visx/point": "2.6.0",
+        "@visx/shape": "2.11.1",
+        "@visx/text": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10",
+        "react-use-measure": "^2.0.4"
+      },
+      "dependencies": {
+        "@visx/shape": {
+          "version": "2.11.1",
+          "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+          "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+          "requires": {
+            "@types/d3-path": "^1.0.8",
+            "@types/d3-shape": "^1.3.1",
+            "@types/lodash": "^4.14.172",
+            "@types/react": "*",
+            "@visx/curve": "2.1.0",
+            "@visx/group": "2.10.0",
+            "@visx/scale": "2.2.2",
+            "classnames": "^2.3.1",
+            "d3-path": "^1.0.5",
+            "d3-shape": "^1.2.0",
+            "lodash": "^4.17.21",
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-use-measure": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
+          "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
+          "requires": {
+            "debounce": "^1.2.1"
+          }
+        }
+      }
+    },
    "@visx/axis": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz",
-      "integrity": "sha512-myEcXPzD7ZmKiXuhue2lpiuTDgl3Glhe1LB+xoUDS8ZAW76Asd6PwurjoxSnq3tHCz0EDBh7YlgApeFy3Bw38A==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.11.1.tgz",
+      "integrity": "sha512-RZdT+yhAEOXtcLc3PgD14Xh5bJh5B64IG+zvHe3YVMkiFWGT1phy0sGTRRxritHke16ErB9vndx+pwVIGSkxAw==",
      "requires": {
        "@types/react": "*",
        "@visx/group": "2.10.0",
        "@visx/point": "2.6.0",
        "@visx/scale": "2.2.2",
-        "@visx/shape": "2.10.0",
+        "@visx/shape": "2.11.1",
        "@visx/text": "2.10.0",
        "classnames": "^2.3.1",
        "prop-types": "^15.6.0"
+      },
+      "dependencies": {
+        "@visx/shape": {
+          "version": "2.11.1",
+          "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+          "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+          "requires": {
+            "@types/d3-path": "^1.0.8",
+            "@types/d3-shape": "^1.3.1",
+            "@types/lodash": "^4.14.172",
+            "@types/react": "*",
+            "@visx/curve": "2.1.0",
+            "@visx/group": "2.10.0",
+            "@visx/scale": "2.2.2",
+            "classnames": "^2.3.1",
+            "d3-path": "^1.0.5",
+            "d3-shape": "^1.2.0",
+            "lodash": "^4.17.21",
+            "prop-types": "^15.5.10"
+          }
+        }
      }
    },
    "@visx/clip-path": {
@ -4982,19 +5520,73 @@
        "d3-shape": "^1.0.6"
      }
    },
-    "@visx/grid": {
+    "@visx/drag": {
      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.10.0.tgz",
-      "integrity": "sha512-2uj8vfwQ0f7EN1MuNne/1a94gyux19MZxBd36BqXmyUpnRxC4DSYQRra05tqoydUupe1mAlJZHUuKl2zDK7tOw==",
+      "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz",
+      "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/event": "2.6.0",
+        "@visx/point": "2.6.0",
+        "prop-types": "^15.5.10"
+      }
+    },
+    "@visx/event": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz",
+      "integrity": "sha512-WGp91g82s727g3NAnENF1ppC3ZAlvWg+Y+GG0WFg34NmmOZbvPI/PTOqTqZE3x6B8EUn8NJiMxRjxIMbi+IvRw==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/point": "2.6.0"
+      }
+    },
+    "@visx/glyph": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-2.10.0.tgz",
+      "integrity": "sha512-qjbnfSgV920+V4ctXeDJWwzBorZLz97cDA4b/GmJ2tk2h0AVMrAejF2LNLgPQpzsVb7BIuVXAJXgp0dop2gr6w==",
+      "requires": {
+        "@types/d3-shape": "^1.3.1",
+        "@types/react": "*",
+        "@visx/group": "2.10.0",
+        "classnames": "^2.3.1",
+        "d3-shape": "^1.2.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "@visx/grid": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.11.1.tgz",
+      "integrity": "sha512-mcF0OHIEm5LxkC7/seKq7GDgVfLgN1FS8XFiKHnvnA9BNkCMFdeHqnM8o46yS00/hYzh7El6jzu5OrGkSeuzaA==",
      "requires": {
        "@types/react": "*",
        "@visx/curve": "2.1.0",
        "@visx/group": "2.10.0",
        "@visx/point": "2.6.0",
        "@visx/scale": "2.2.2",
-        "@visx/shape": "2.10.0",
+        "@visx/shape": "2.11.1",
        "classnames": "^2.3.1",
        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@visx/shape": {
+          "version": "2.11.1",
+          "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+          "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+          "requires": {
+            "@types/d3-path": "^1.0.8",
+            "@types/d3-shape": "^1.3.1",
+            "@types/lodash": "^4.14.172",
+            "@types/react": "*",
+            "@visx/curve": "2.1.0",
+            "@visx/group": "2.10.0",
+            "@visx/scale": "2.2.2",
+            "classnames": "^2.3.1",
+            "d3-path": "^1.0.5",
+            "d3-shape": "^1.2.0",
+            "lodash": "^4.17.21",
+            "prop-types": "^15.5.10"
+          }
+        }
      }
    },
    "@visx/group": {
@ -5021,6 +5613,32 @@
      "resolved": "https://registry.npmjs.org/@visx/point/-/point-2.6.0.tgz",
      "integrity": "sha512-amBi7yMz4S2VSchlPdliznN41TuES64506ySI22DeKQ+mc1s1+BudlpnY90sM1EIw4xnqbKmrghTTGfy6SVqvQ=="
    },
+    "@visx/react-spring": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-2.11.1.tgz",
+      "integrity": "sha512-EFJMKj1rAh9bC+clROMREQd98kP1RoTy6y1j8IMeaNdhAF3gHxaG+OZH4e0dD3y+62NdeI+o+FLjHdw2NWQMDA==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/axis": "2.11.1",
+        "@visx/grid": "2.11.1",
+        "@visx/scale": "2.2.2",
+        "@visx/text": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "@visx/responsive": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-2.10.0.tgz",
+      "integrity": "sha512-NssDPpuUYp7hqVISuYkKZ5zk6ob0++RdTIaUjRcUdyFEbvzb9+zIb8QToOkvI90L2EC/MY4Jx0NpDbEe79GpAw==",
+      "requires": {
+        "@juggle/resize-observer": "^3.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.6.1"
+      }
+    },
    "@visx/scale": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-2.2.2.tgz",
@ -5078,6 +5696,125 @@
        "prop-types": "^15.5.10"
      }
    },
+    "@visx/voronoi": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-2.10.0.tgz",
+      "integrity": "sha512-2GSosmQ25a9OctY4xPpPTwY6N4CW53Ssos8kzPHTo5Si/2h9AUNqVg7eGUb8lrEjakQYAAdX0J4U8D02tsQI+w==",
+      "requires": {
+        "@types/d3-voronoi": "^1.1.9",
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "d3-voronoi": "^1.1.2",
+        "prop-types": "^15.6.1"
+      }
+    },
+    "@visx/xychart": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-2.11.1.tgz",
+      "integrity": "sha512-9BxWPa4vU/RxgyzwnGvspLyuKTvZ/APvS5razaBxYIe92T0uNL+ci5tmBJTCrs4QY7AM615cJI3i2KVriJ4CBw==",
+      "requires": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/annotation": "2.11.1",
+        "@visx/axis": "2.11.1",
+        "@visx/event": "2.6.0",
+        "@visx/glyph": "2.10.0",
+        "@visx/grid": "2.11.1",
+        "@visx/react-spring": "2.11.1",
+        "@visx/responsive": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "@visx/shape": "2.11.1",
+        "@visx/text": "2.10.0",
+        "@visx/tooltip": "2.10.0",
+        "@visx/voronoi": "2.10.0",
+        "classnames": "^2.3.1",
+        "d3-array": "^2.6.0",
+        "d3-interpolate-path": "2.2.1",
+        "d3-shape": "^2.0.0",
+        "lodash": "^4.17.21",
+        "mitt": "^2.1.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@visx/shape": {
+          "version": "2.11.1",
+          "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.11.1.tgz",
+          "integrity": "sha512-0ak3wTkXjExH7kzU62yXPu+RtuG35G1sNL58Ax4NBr4yKh2nTHcLRsMZ7k6yUG+wSjb8DgG/ywZ0bBGWXJYGbg==",
+          "requires": {
+            "@types/d3-path": "^1.0.8",
+            "@types/d3-shape": "^1.3.1",
+            "@types/lodash": "^4.14.172",
+            "@types/react": "*",
+            "@visx/curve": "2.1.0",
+            "@visx/group": "2.10.0",
+            "@visx/scale": "2.2.2",
+            "classnames": "^2.3.1",
+            "d3-path": "^1.0.5",
+            "d3-shape": "^1.2.0",
+            "lodash": "^4.17.21",
+            "prop-types": "^15.5.10"
+          },
+          "dependencies": {
+            "d3-shape": {
+              "version": "1.3.7",
+              "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+              "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+              "requires": {
+                "d3-path": "1"
+              }
+            }
+          }
+        },
+        "@visx/tooltip": {
+          "version": "2.10.0",
+          "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-2.10.0.tgz",
+          "integrity": "sha512-6Zrd79MIEfyuLBcZ1ypSeAkpQc8oLRNB7FQnegzl3Lje4LK5lJtuf5ST0mwK6G2Uv+GlOW9REJ6VK4gfAGkq9A==",
+          "requires": {
+            "@types/react": "*",
+            "@visx/bounds": "2.10.0",
+            "classnames": "^2.3.1",
+            "prop-types": "^15.5.10",
+            "react-use-measure": "^2.0.4"
+          },
+          "dependencies": {
+            "@visx/bounds": {
+              "version": "2.10.0",
+              "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-2.10.0.tgz",
+              "integrity": "sha512-rY7WFTIjQaXA8tFL45O2qbtSRkyF4yF75HiWz06F7BVmJ9UjF2qlomB3Y1z6gk6ZiFhwQ4zxABjOVjAQPLn7nQ==",
+              "requires": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "prop-types": "^15.5.10"
+              }
+            },
+            "react-use-measure": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
+              "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
+              "requires": {
+                "debounce": "^1.2.1"
+              }
+            }
+          }
+        },
+        "d3-array": {
+          "version": "2.12.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
+        },
+        "d3-shape": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+          "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+          "requires": {
+            "d3-path": "1 - 2"
+          }
+        }
+      }
+    },
    "acorn": {
      "version": "8.7.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
@ -5388,6 +6125,11 @@
        "d3-color": "1"
      }
    },
+    "d3-interpolate-path": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz",
+      "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q=="
+    },
    "d3-path": {
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
@ -5454,12 +6196,22 @@
        "d3-time": "1 - 2"
      }
    },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
    "damerau-levenshtein": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
      "dev": true
    },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
    "debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -6505,6 +7257,11 @@
      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
      "dev": true
    },
+    "mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
    "ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
    "@visx/mock-data": "^2.1.2",
    "@visx/shape": "^2.10.0",
    "@visx/threshold": "^2.10.0",
+    "@visx/xychart": "^2.11.1",
    "d3-array": "^3.1.6",
    "next": "12.1.6",
    "react": "18.1.0",
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@ -15,7 +15,7 @@ export default function Home() {
        // className={styles.barGraphDemo}
        data={mockLineGraphlData}
        width={700}
-        height={400}
+        height={300}
        margin={{
          top: 20,
          bottom: 40,