Init commit on branch

web/components/Sections/SingleLevelChart.js

@@ -2,6 +2,8 @@ import { Box, Container, useColorModeValue } from '@chakra-ui/react'
 import { ResponsivePie } from '@nivo/pie'
 import Caption from './shared/Caption'
 import Wrapper from './Wrapper'
+// import Donut from './dataVizualisation/Donut'
+// import ParentSize from '@visx/responsive/lib/components/ParentSize'
 
 // make sure parent container have a defined height when using
 // responsive component, otherwise height will be 0 and
@@ -64,6 +66,14 @@ export default function SingleLevelChart(props) {
       <Container as="figcaption" maxW={['md', null, '2xl', null]}>
         <Caption title={label} content={caption} />
       </Container>
+      {/*       <Container maxW={['sm', 'lg', '4xl', null]} h="50vh">
+        <ParentSize>
+          {({ width, height }) => (
+            <Donut data={JSON.parse(data.code)} width={width} height={height} />
+          )}
+        </ParentSize>
+      </Container> */}
+      {/* <Donut data={JSON.parse(data.code)} /> */}
     </Wrapper>
   )
 }

web/components/Sections/dataVizualisation/Donut.tsx

+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react'
+import Pie, { ProvidedProps, PieArcDatum } from '@visx/shape/lib/shapes/Pie'
+import { scaleOrdinal } from '@visx/scale'
+import { Group } from '@visx/group'
+
+import { animated, useTransition, interpolate } from 'react-spring'
+
+type Slice = {
+  id: string
+  value: number
+}
+
+/* const test: Slice[] = [
+  {
+    id: 'Universitetet i Bergen',
+    value: 67,
+  },
+  {
+    id: 'Havforskningsinstituttet',
+    value: 59,
+  },
+  {
+    id: 'Alfred Wegner Institute - Helmholz Centre for Polar Marine Research / Helmholz Association',
+    value: 57,
+  },
+  {
+    id: 'Norges Arktiske Universitet, UiT',
+    value: 51,
+  },
+  {
+    id: 'Bjerknessenteret for klimaforskning',
+    value: 48,
+  },
+  {
+    id: 'Norsk Polarinstitutt',
+    value: 40,
+  },
+  {
+    id: 'Russian Academy of Sciences',
+    value: 37,
+  },
+  {
+    id: 'Universitetet I Oslo',
+    value: 36,
+  },
+  {
+    id: 'UNIS - The University Centre in Svalbard',
+    value: 26,
+  },
+  {
+    id: 'University of Alaska',
+    value: 26,
+  },
+  {
+    id: 'Woods Hole Oceanographic Institution',
+    value: 26,
+  },
+  {
+    id: 'Centre National de la Recherche Scientifique, CNRS',
+    value: 21,
+  },
+] */
+
+const defaultMargin = { top: 20, right: 20, bottom: 20, left: 20 }
+
+export type PieProps = {
+  width: number
+  height: number
+  margin?: typeof defaultMargin
+  animate?: boolean
+  data: Slice[]
+}
+
+export default function Donut({
+  width,
+  height,
+  margin = defaultMargin,
+  animate = true,
+  data,
+}: PieProps) {
+  const [selectedSlice, setSelectedSlice] = useState<string | null>(null)
+  const test: Slice[] = data
+  // accessor functions
+  const n = (d: Slice) => d.value
+
+  // color scales
+  const getSliceColor = scaleOrdinal({
+    domain: [...test.flatMap((s) => s.id)],
+    range: [
+      'rgba(255,255,255,0.7)',
+      'rgba(255,255,255,0.6)',
+      'rgba(255,250,255,0.5)',
+      'rgba(255,255,255,0.4)',
+      'rgba(255,255,255,0.3)',
+      'rgba(255,255,255,0.2)',
+      'rgba(255,255,255,0.1)',
+    ],
+  })
+
+  if (width < 10) return null
+
+  const innerWidth = width - margin.left - margin.right
+  const innerHeight = height - margin.top - margin.bottom
+  const radius = Math.min(innerWidth, innerHeight) / 2
+  const centerY = innerHeight / 2
+  const centerX = innerWidth / 2
+  const donutThickness = 200
+
+  /* console.log(JSON.stringify(test, null, 2), getSliceColor('Universitetet i Bergen')) */
+
+  return (
+    <svg width={width} height={height}>
+      <rect rx={14} width={width} height={height} />
+      <Group top={centerY + margin.top} left={centerX + margin.left}>
+        <Pie
+          data={selectedSlice ? test.filter(({ id }) => id === selectedSlice) : test}
+          pieValue={n}
+          outerRadius={radius}
+          innerRadius={radius - donutThickness}
+          cornerRadius={3}
+          padAngle={0.005}
+        >
+          {(pie) => (
+            <AnimatedPie<Slice>
+              {...pie}
+              animate={animate}
+              getKey={(arc) => arc.data.id.slice(0, 40) + '...'}
+              onClickDatum={({ data: { id } }) =>
+                animate && setSelectedSlice(selectedSlice && selectedSlice === id ? null : id)
+              }
+              getColor={(arc) => getSliceColor(arc.data.id)}
+            />
+          )}
+        </Pie>
+      </Group>
+      {animate && (
+        <text
+          textAnchor="end"
+          x={width - 16}
+          y={height - 16}
+          fill="white"
+          fontSize={11}
+          fontWeight={300}
+          pointerEvents="none"
+        >
+          Click segments to update
+        </text>
+      )}
+    </svg>
+  )
+}
+
+// react-spring transition definitions
+type AnimatedStyles = { startAngle: number; endAngle: number; opacity: number }
+
+const fromLeaveTransition = ({ endAngle }: PieArcDatum<any>) => ({
+  // enter from 360° if end angle is > 180°
+  startAngle: endAngle > Math.PI ? 2 * Math.PI : 0,
+  endAngle: endAngle > Math.PI ? 2 * Math.PI : 0,
+  opacity: 0,
+})
+const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
+  startAngle,
+  endAngle,
+  opacity: 1,
+})
+
+type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
+  animate?: boolean
+  getKey: (d: PieArcDatum<Datum>) => string
+  getColor: (d: PieArcDatum<Datum>) => string
+  onClickDatum: (d: PieArcDatum<Datum>) => void
+  delay?: number
+}
+
+function AnimatedPie<Datum>({
+  animate,
+  arcs,
+  path,
+  getKey,
+  getColor,
+  onClickDatum,
+}: AnimatedPieProps<Datum>) {
+  const transitions = useTransition<PieArcDatum<Datum>, AnimatedStyles>(arcs, {
+    from: animate ? fromLeaveTransition : enterUpdateTransition,
+    enter: enterUpdateTransition,
+    update: enterUpdateTransition,
+    leave: animate ? fromLeaveTransition : enterUpdateTransition,
+    keys: getKey,
+  })
+  return transitions((props, arc, { key }) => {
+    const [centroidX, centroidY] = path.centroid(arc)
+    const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
+
+    return (
+      <g key={key}>
+        <animated.path
+          // compute interpolated path d attribute from intermediate angle values
+          d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
+            path({
+              ...arc,
+              startAngle,
+              endAngle,
+            }),
+          )}
+          fill={getColor(arc)}
+          onClick={() => onClickDatum(arc)}
+          onTouchStart={() => onClickDatum(arc)}
+        />
+        {hasSpaceForLabel && (
+          <animated.g style={{ opacity: props.opacity }}>
+            <text
+              fill="white"
+              x={centroidX}
+              y={centroidY}
+              dy=".33em"
+              fontSize={9}
+              textAnchor="middle"
+              pointerEvents="none"
+            >
+              {getKey(arc)}
+            </text>
+          </animated.g>
+        )}
+      </g>
+    )
+  })
+}

web/components/Sections/dataVizualisation/Legend.tsx

+import React from 'react'
+import { scaleOrdinal } from '@visx/scale'
+import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
+
+const data = [
+  'Universitetet i Bergen',
+  'Havforskningsinstituttet',
+  'Alfred Wegner Institute - Helmholz Centre for Polar Marine Research / Helmholz Association',
+  'Norges Arktiske Universitet, UiT',
+  'Bjerknessenteret for klimaforskning',
+  'Norsk Polarinstitutt',
+  'Russian Academy of Sciences',
+  'Universitetet I Oslo',
+  'UNIS - The University Centre in Svalbard',
+  'University of Alaska',
+  'Woods Hole Oceanographic Institution',
+  'Centre National de la Recherche Scientifique, CNRS',
+]
+
+const ordinalColorScale = scaleOrdinal({
+  domain: data,
+  range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
+})
+
+const legendGlyphSize = 15
+
+export default function Example({ events = false }: { events?: boolean }) {
+  return (
+    <div className="legends">
+      <LegendDemo title="Ordinal">
+        <LegendOrdinal scale={ordinalColorScale} labelFormat={(label) => `${label.toUpperCase()}`}>
+          {(labels) => (
+            <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+              {labels.map((label, i) => (
+                <LegendItem
+                  key={`legend-quantile-${i}`}
+                  margin="0 5px"
+                  onClick={() => {
+                    if (events) alert(`clicked: ${JSON.stringify(label)}`)
+                  }}
+                >
+                  <svg width={legendGlyphSize} height={legendGlyphSize}>
+                    <rect fill={label.value} width={legendGlyphSize} height={legendGlyphSize} />
+                  </svg>
+                  <LegendLabel align="left" margin="0 0 0 4px">
+                    {label.text}
+                  </LegendLabel>
+                </LegendItem>
+              ))}
+            </div>
+          )}
+        </LegendOrdinal>
+      </LegendDemo>
+
+      <style jsx>{`
+        .legends {
+          font-family: arial;
+          font-weight: 900;
+          background-color: black;
+          border-radius: 14px;
+          padding: 24px 24px 24px 32px;
+          overflow-y: auto;
+          flex-grow: 1;
+        }
+        .chart h2 {
+          margin-left: 10px;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+function LegendDemo({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="legend">
+      <div className="title">{title}</div>
+      {children}
+      <style jsx>{`
+        .legend {
+          line-height: 0.9em;
+          color: #efefef;
+          font-size: 10px;
+          font-family: arial;
+          padding: 10px 10px;
+          float: left;
+          border: 1px solid rgba(255, 255, 255, 0.3);
+          border-radius: 8px;
+          margin: 5px 5px;
+        }
+        .title {
+          font-size: 12px;
+          margin-bottom: 10px;
+          font-weight: 100;
+        }
+      `}</style>
+    </div>
+  )
+}

web/package.json

@@ -24,6 +24,11 @@
     "@sanity/block-content-to-react": "^3.0.0",
     "@svgr/webpack": "^5.5.0",
     "@turf/bbox": "^6.5.0",
+    "@visx/group": "^2.1.0",
+    "@visx/legend": "^2.1.0",
+    "@visx/responsive": "^2.1.1",
+    "@visx/scale": "^2.1.0",
+    "@visx/shape": "^2.1.1",
     "classnames": "2.2.6",
     "date-fns": "2.10.0",
     "deep-rename-keys": "^0.2.1",
@@ -44,6 +49,7 @@
     "react-map-gl": "^5.2.9",
     "react-player": "^2.8.2",
     "react-roman": "^2.0.0",
+    "react-spring": "^9.2.4",
     "react-twitter-embed": "^3.0.3",
     "svg-inline-react": "^3.2.0",
     "svg-parser": "^2.0.4"

web/yarn.lock

@@ -2505,6 +2505,26 @@
     "@react-spring/shared" "~9.2.0"
     "@react-spring/types" "~9.2.0"
+"@react-spring/konva@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.4.tgz#e467b24b3b110ba496526c9001439ce561641e0d"
+  integrity sha512-19anDOIkfjcydDTfGgVIuZ3lruZxKubYGs9oHCswaP8SRLj7c1kkopJHUr/S4LXGxiIdqdF0XucWm0iTEPEq4w==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/native@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.4.tgz#0fd335a44c05023f5428df444d8f1aa3da7abfc9"
+  integrity sha512-xKJWKh5qOhSclpL3iuGwJRLoZzTNvlBEnIrMs8yh8xvX6z9Lmnu4uGu5DpfrnM1GzBvRoktoCoLEx/VcEYFSng==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
 "@react-spring/rafz@~9.2.0":
   version "9.2.4"
   resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.2.4.tgz#44793e9adc14dd0dcd1573d094368af11a89d73a"
@@ -2518,12 +2538,22 @@
     "@react-spring/rafz" "~9.2.0"
     "@react-spring/types" "~9.2.0"
+"@react-spring/three@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.4.tgz#849c97658a6e1410b6f823ad21e2ee33feada820"
+  integrity sha512-ljFig7XW099VWwRPKPUf+4yYLivp/sSWXN3oO5SJOF/9BSoV1quS/9chZ5Myl5J14od3CsHf89Tv4FdlX5kHlA==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
 "@react-spring/types@~9.2.0":
   version "9.2.4"
   resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.4.tgz#2365ce9d761f548a9adcb2cd68714bf26765a5de"
   integrity sha512-zHUXrWO8nweUN/ISjrjqU7GgXXvoEbFca1CgiE0TY0H/dqJb3l+Rhx8ecPVNYimzFg3ZZ1/T0egpLop8SOv4aA==
-"@react-spring/web@9.2.4":
+"@react-spring/web@9.2.4", "@react-spring/web@~9.2.0":
   version "9.2.4"
   resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.4.tgz#c6d5464a954bfd0d7bc90117050f796a95ebfa08"
   integrity sha512-vtPvOalLFvuju/MDBtoSnCyt0xXSL6Amyv82fljOuWPl1yGd4M1WteijnYL9Zlriljl0a3oXcPunAVYTD9dbDQ==
@@ -2533,6 +2563,16 @@
     "@react-spring/shared" "~9.2.0"
     "@react-spring/types" "~9.2.0"
+"@react-spring/zdog@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.4.tgz#db1d1924fe9920e917d889c4d3bb138bd0885cf1"
+  integrity sha512-rv7ptedS37SHr6yuCbRkUErAzAhebdgt8f4KUtZWzseC+7qLNkaZWf+uujgsb881qAuX9b9yz8rre9UKeYepgw==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
 "@redux-saga/core@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
@@ -3582,6 +3622,42 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+"@types/d3-color@^1":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-1.4.2.tgz#944f281d04a0f06e134ea96adbb68303515b2784"
+  integrity sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==
+
+"@types/d3-interpolate@^1.3.1":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz#88902a205f682773a517612299a44699285eed7b"
+  integrity sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==
+  dependencies:
+    "@types/d3-color" "^1"
+
+"@types/d3-path@^1", "@types/d3-path@^1.0.8":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.9.tgz#73526b150d14cd96e701597cbf346cfd1fd4a58c"
+  integrity sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==
+
+"@types/d3-scale@^3.3.0":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.3.2.tgz#18c94e90f4f1c6b1ee14a70f14bfca2bd1c61d06"
+  integrity sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==
+  dependencies:
+    "@types/d3-time" "^2"
+
+"@types/d3-shape@^1.3.1":
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.3.8.tgz#c3c15ec7436b4ce24e38de517586850f1fea8e89"
+  integrity sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==
+  dependencies:
+    "@types/d3-path" "^1"
+
+"@types/d3-time@^2", "@types/d3-time@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.1.tgz#743fdc821c81f86537cbfece07093ac39b4bc342"
+  integrity sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==
+
 "@types/dom4@^2.0.1":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.2.tgz#6495303f049689ce936ed328a3e5ede9c51408ee"
@@ -3678,6 +3754,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
   integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==
+"@types/lodash@^4.14.172":
+  version "4.14.175"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"
+  integrity sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==
+
 "@types/mapbox-gl@^2.0.3":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/mapbox-gl/-/mapbox-gl-2.4.1.tgz#1fce32c3462ec481a36990086affa5354df08509"
@@ -3958,6 +4039,75 @@
     "@typescript-eslint/types" "4.31.0"
     eslint-visitor-keys "^2.0.0"
+"@visx/curve@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@visx/curve/-/curve-2.1.0.tgz#f614bfe3db66df7db7382db7a75ced1506b94602"
+  integrity sha512-9b6JOnx91gmOQiSPhUOxdsvcnW88fgqfTPKoVgQxidMsD/I3wksixtwo8TR/vtEz2aHzzsEEhlv1qK7Y3yaSDw==
+  dependencies:
+    "@types/d3-shape" "^1.3.1"
+    d3-shape "^1.0.6"
+
+"@visx/group@2.1.0", "@visx/group@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@visx/group/-/group-2.1.0.tgz#65d4a72feb20dd09443f73cdc12ad5fb339792ef"
+  integrity sha512-bZKa54yVjGYPZZhzYHLz4AVlidSr4ET9B/xmSa7nnictMJWr7e/IuZThB/bMfDQlgdtvhcfTgs+ZluySc5SBUg==
+  dependencies:
+    "@types/react" "*"
+    classnames "^2.3.1"
+    prop-types "^15.6.2"
+
+"@visx/legend@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@visx/legend/-/legend-2.1.0.tgz#e2f0b66b669ff3bfe533a9055dc2a58ef64c37cc"
+  integrity sha512-Faqdv4JOdw6PmeAQMFd+Hzm5mqcVRJYQh2NBTA9Wama+2yfjVpBLm9tSgvBMxuXzoShjwIWt904bmd0xnuNL5Q==
+  dependencies:
+    "@types/react" "*"
+    "@visx/group" "2.1.0"
+    "@visx/scale" "2.1.0"
+    classnames "^2.3.1"
+    prop-types "^15.5.10"
+
+"@visx/responsive@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@visx/responsive/-/responsive-2.1.1.tgz#9f61eb422a5a95e94ba3e1730d2e3a00006d9ac3"
+  integrity sha512-jK2BNvXtKqenFvjKsAVZ3JGOgHw4Oh8IcxnLtE5uRR/01SRdUvFhsvnfYe6/Zft+UHvndwPw3V7cPrKxXzBgWg==
+  dependencies:
+    "@types/lodash" "^4.14.172"
+    "@types/react" "*"
+    lodash "^4.17.21"
+    prop-types "^15.6.1"
+    resize-observer-polyfill "1.5.1"
+
+"@visx/scale@2.1.0", "@visx/scale@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@visx/scale/-/scale-2.1.0.tgz#a5f1b9f1a6ac0580ade87852fd4022d51049261b"
+  integrity sha512-oXAOmAgVFOAYnReoywe1hIn30+iaqqczQXTlXeQbpPwc6C/CwW34Yc0D/WYpWUVMze02cYQ4AAT2feh4aUHucw==
+  dependencies:
+    "@types/d3-interpolate" "^1.3.1"
+    "@types/d3-scale" "^3.3.0"
+    "@types/d3-time" "^2.0.0"
+    d3-interpolate "^1.4.0"
+    d3-scale "^3.3.0"
+    d3-time "^2.1.1"
+
+"@visx/shape@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@visx/shape/-/shape-2.1.1.tgz#5dcde5208e639451f0ac61f8cc5d0c0aee3b55ad"
+  integrity sha512-5Y/siI38L294ELFwhwg7mvqMI4KQUDI1Jw+Oyj3OltOZ9HCnRtNgxBqgn6HNKDecb7OqD6vMF7hf12eNVfpHwg==
+  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.1.0"
+    "@visx/scale" "2.1.0"
+    classnames "^2.3.1"
+    d3-path "^1.0.5"
+    d3-shape "^1.2.0"
+    lodash "^4.17.21"
+    prop-types "^15.5.10"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -5305,7 +5455,7 @@ classnames@2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-classnames@^2.2, classnames@^2.2.5, classnames@^2.2.6:
+classnames@^2.2, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -5917,6 +6067,11 @@ d3-array@2, d3-array@^2.3.0:
   dependencies:
     internmap "^1.0.0"
+d3-color@1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
+  integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
+
 "d3-color@1 - 2", d3-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
@@ -5944,7 +6099,14 @@ d3-hierarchy@^1.1.8:
   dependencies:
     d3-color "1 - 2"
-d3-path@1:
+d3-interpolate@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
+  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
+  dependencies:
+    d3-color "1"
+
+d3-path@1, d3-path@^1.0.5:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
   integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
@@ -5957,7 +6119,7 @@ d3-scale-chromatic@^2.0.0:
     d3-color "1 - 2"
     d3-interpolate "1 - 2"
-d3-scale@^3.2.3:
+d3-scale@^3.2.3, d3-scale@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
   integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
@@ -5968,7 +6130,7 @@ d3-scale@^3.2.3:
     d3-time "^2.1.1"
     d3-time-format "2 - 3"
-d3-shape@^1.3.5:
+d3-shape@^1.0.6, d3-shape@^1.2.0, d3-shape@^1.3.5:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
   integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
@@ -11284,7 +11446,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
-prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11963,6 +12125,18 @@ react-sizeme@^3.0.1:
     shallowequal "^1.1.0"
     throttle-debounce "^3.0.1"
+react-spring@^9.2.4:
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.4.tgz#9d89b0321664d594f957dca9459b13d94b3dfa39"
+  integrity sha512-bMjbyTW0ZGd+/h9cjtohLqCwOGqX2OuaTvalOVfLCGmhzEg/u3GgopI3LAm4UD2Br3MNdVdGgNVoESg4MGqKFQ==
+  dependencies:
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/konva" "~9.2.0"
+    "@react-spring/native" "~9.2.0"
+    "@react-spring/three" "~9.2.0"
+    "@react-spring/web" "~9.2.0"
+    "@react-spring/zdog" "~9.2.0"
+
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -12406,7 +12580,7 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
   integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@1.5.1, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==