diff --git a/apps/web/index.html b/apps/web/index.html
index 0eedab33e..cdbddc4cf 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -16,8 +16,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Casimir</title>
   </head>
-  <body>
-    <div style="background: #d9d9d9; min-width: 360px; overflow: auto;">
+  <body style="overflow: hidden;">
+    <div>
       <div id="app"></div>
     </div>
     <script type="module" src="/src/main.ts"></script>
diff --git a/apps/web/src/components/charts/LineChart.vue b/apps/web/src/components/charts/LineChart.vue
new file mode 100644
index 000000000..5bbfe1a13
--- /dev/null
+++ b/apps/web/src/components/charts/LineChart.vue
@@ -0,0 +1,309 @@
+<script setup>
+import { onMounted, watch } from 'vue'
+import * as d3 from 'd3'
+
+// eslint-disable-next-line no-undef, @typescript-eslint/no-unused-vars
+const props = defineProps({
+    data: {
+        type: Array,
+        required: true
+    },
+    updateTooltipInfo: {
+        type: Function,
+        default: (e) => {
+            // console.log('hovering over: ', e)
+        }
+    },
+    yAxisValue: {
+        type: String, 
+        required: true
+    },
+    xAxisValue: {
+        type: String, 
+        required: true
+    },
+    xAxisFormat: {
+        type: Function,
+        required: true
+    },
+    yAxisFormat: {
+        type: Function,
+        required: true
+    },
+    // TD: for later versions create chart brushes and different tooltip styles
+})
+
+onMounted(() => {
+    let WIDTH = 0
+    let HEIGHT =  0
+    const svg_line_chart_container_el = document.getElementById('line_chart_container')
+
+    let line_chart_svg
+    let g
+    let x 
+    let y
+
+    // Break points to show-hide axies
+    const width_breaking_point_small = 300
+    const height_breaking_point_small = 200
+
+    const width_breaking_point_medium = 500
+    const height_breaking_point_medium = 200
+
+    // for line tooltip
+    const bisectDate = d3.bisector(d => d[props.xAxisValue]).left
+
+
+    let xAxisCall
+    let xAxis
+
+    
+    let yAxisCall
+    let yAxis
+
+    
+
+    const updateChart = () => {
+        // Makes sure the axis are correct based on breakpoints
+        let xAxisRange = [0,(WIDTH - 30)]
+        let yAxisRange = [HEIGHT, 20]
+        if(WIDTH <= 150 ){
+            xAxisRange = [0, WIDTH]
+        } else if (HEIGHT <= height_breaking_point_small) {
+            xAxisRange = [0, WIDTH]
+        }
+
+        if(HEIGHT <= 150 ){
+            yAxisRange = [HEIGHT, 0]
+        } else if (WIDTH <= width_breaking_point_small) {
+            yAxisRange = [HEIGHT, 0]
+        }
+
+        x = d3.scaleTime().range(xAxisRange)
+        y = d3.scaleLinear().range(yAxisRange)
+
+
+        // dynamic x axis labeling based on width
+        if(WIDTH <= width_breaking_point_medium){
+            xAxisCall = d3.axisBottom()
+                .tickFormat((d, i) => {
+                    if(i %2 === 0){
+                    return props.xAxisFormat(d)
+                    } else {
+                        return ''
+                    }
+                })
+        }else {
+            xAxisCall = d3.axisBottom()
+                .tickFormat(d => {
+                    return props.xAxisFormat(d)
+                })
+        }
+        
+        yAxisCall = d3.axisLeft()
+        if(!xAxis){
+            xAxis = g.append('g')
+                .attr('class', 'x axis')
+                .attr('transform', `translate(0, ${HEIGHT})`)
+        } else {
+            d3.select('#line_chart').select('svg').select('g').select('g')
+                .attr('class', 'x axis')
+                .attr('transform', `translate(0, ${HEIGHT})`)
+        }
+        if(!yAxis){
+            yAxis = g.append('g')
+                .attr('class', 'y axis')
+        } else {
+            d3.select('#line_chart').select('svg').select('g').select('g')
+                .attr('class', 'y axis')
+        }
+        
+        
+        
+        const update = (data) => {
+            // Updates tooltip based on data on start
+            const lastDValue = d3.max(data, d => {
+                return d[props.yAxisValue]
+            })
+            props.updateTooltipInfo(lastDValue)
+            // 
+
+            const yValue = props.yAxisValue
+
+            // 1.015 is just for adding a little bit of spacing for the y domain 
+            x.domain(d3.extent(data, d => d[props.xAxisValue]))
+            y.domain([
+                d3.min(data, d => d[yValue]) / 1.015, 
+                d3.max(data, d => d[yValue]) * 1.015
+            ])
+
+            xAxisCall.scale(x)
+            xAxis.call(xAxisCall)
+
+            yAxisCall.scale(y)
+            yAxis.call(yAxisCall.tickFormat(d => props.yAxisFormat(d)))
+
+            // Tooltip
+
+            d3.select('.focus').remove()
+            d3.select('.overlay').remove()
+
+            const focus = g.append('g')
+                .attr('class', 'focus')
+                .style('display', 'none')
+
+            focus.append('line')
+                .attr('class', 'x-hover-line hover-line')
+                .attr('y1', 0)
+                .attr('y2', HEIGHT)
+
+            // focus.append('line')
+            //     .attr('class', 'y-hover-line hover-line')
+            //     .attr('x1', 0)
+            //     .attr('x2', WIDTH)
+
+            focus.append('circle')
+                .attr('r', 2.5)
+                .attr('fill', '#0D5FFF')
+
+            focus.append('text')
+                .attr('x', 15)
+                .attr('dy', '.31em')
+                .attr('fill', '#0D5FFF')
+
+            g.append('rect')
+                .attr('class', 'overlay')
+                .attr('width', WIDTH)
+                .attr('height', HEIGHT)
+                .attr('fill', '#0D5FFF')
+                .on('mouseover', () => focus.style('display', null))
+                .on('mouseout', () => {
+                    focus.style('display', 'none')
+                    const lastDValue = d3.max(data, d => {
+                        return d[props.yAxisValue]
+                    })
+                    props.updateTooltipInfo(lastDValue)
+                })
+                .on('mousemove', mousemove)
+
+            function mousemove(e) {
+                const x0 = x.invert(d3.pointer(e)[0])
+                const i = bisectDate(data, x0, 1)
+                const d0 = data[i - 1]
+                const d1 = data[i]
+                const d = x0 - d0[props.xAxisValue] > d1[props.xAxisValue] - x0 ? d1 : d0
+                focus.attr('transform', `translate(${x(d[props.xAxisValue])}, ${y(d[yValue])})`)
+                props.updateTooltipInfo(d[yValue])
+                focus.select('.x-hover-line').attr('y2', HEIGHT - y(d[yValue]))
+                focus.select('.y-hover-line').attr('x2', -x(d[props.xAxisValue]))
+            }
+
+            let line = d3.line()
+                .x(d => x(d[props.xAxisValue]))
+                .y(d => y(d[yValue]))
+
+            g.select('.line')
+            .transition(d3.transition().duration(500))
+            .attr('d', line(data))
+        }
+
+        
+        watch(props, () => {
+            update(props.data)
+        })
+        if(props.data){
+            update(props.data)
+        }
+        
+    }
+
+    const createViz = () => {
+
+        if(!line_chart_svg){
+            line_chart_svg = d3.select('#line_chart').append('svg')
+                .attr('viewBox', `0 0 ${WIDTH + 10} ${HEIGHT}`)
+        }else {
+            d3.select('#line_chart').select('svg')
+                .attr('viewBox', `0 0 ${WIDTH + 10} ${HEIGHT}`)
+        }
+        
+
+        // shows axis labels if chart not <= small breaking point
+        // 150 being too small to show any labels
+        let xTransition = 30
+        let yTransition = -20
+        if(WIDTH <= 150 ){
+            xTransition = 0
+        } else if (HEIGHT <= height_breaking_point_small) {
+            xTransition = 0
+        }
+
+        if(HEIGHT <= 150 ){
+            yTransition = 0
+        } else if (WIDTH <= width_breaking_point_small) {
+            yTransition = 0
+        }
+
+
+        if(!g){
+            g = line_chart_svg.append('g')
+                .attr('transform', `translate(${
+                            xTransition // hotizontal 
+                        }, ${
+                            yTransition // vertical
+                        })`)
+            g.append('path')
+                .attr('class', 'line')
+                .attr('width', WIDTH )
+                .attr('height', HEIGHT )
+        } else {
+            d3.select('#line_chart').select('svg').select('g')
+                .attr('transform', `translate(${
+                        xTransition // hotizontal 
+                    }, ${
+                        yTransition // vertical
+                    })`)
+            d3.select('#line_chart').select('svg').select('g').select('path')
+                .attr('class', 'line')
+                    .attr('width', WIDTH )
+                    .attr('height', HEIGHT )
+        }
+
+        updateChart()
+    }
+
+
+    WIDTH = svg_line_chart_container_el.offsetWidth
+    HEIGHT = svg_line_chart_container_el.offsetHeight
+
+    
+    // watches for size changes... 
+    const outputsize = () => {
+        WIDTH = svg_line_chart_container_el.offsetWidth
+        HEIGHT = svg_line_chart_container_el.offsetHeight
+        createViz()
+    }
+    outputsize()
+    new ResizeObserver(outputsize).observe(svg_line_chart_container_el)   
+
+    // Calls it on mounted without listening first
+    createViz()
+})
+
+</script>
+
+<template>
+  <div
+    id="line_chart_container"
+    class="w-full h-full text-center align-middle"
+  >
+    <div
+      id="line_chart"
+      class="block m-auto h-full w-full"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/web/src/components/charts/PieChart.vue b/apps/web/src/components/charts/PieChart.vue
new file mode 100644
index 000000000..33629e922
--- /dev/null
+++ b/apps/web/src/components/charts/PieChart.vue
@@ -0,0 +1,169 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import * as d3 from 'd3'
+
+
+// eslint-disable-next-line no-undef, @typescript-eslint/no-unused-vars
+const props = defineProps({
+    data: {
+      type: Array,
+      required: true
+    },
+    legend: {
+      type: Boolean,
+      required: true
+    },
+    colors: {
+      type: Object, 
+      required: true
+    }
+    // TD: for future versions add tooltip cards / ticks
+})
+
+const showLegend = ref(props.legend)
+
+onMounted(() => {
+  // d3.selectAll('#pie_chart').select('svg').remove()
+  console.log(d3.selectAll('#pie_chart').selectAll('svg').remove())
+
+  const svg_pie_chart_container_el = document.getElementById('pie_chart_conatiner')
+
+  let width = 0
+  let height = 0
+  let radius = Math.min(width, height) / 2
+
+  let pie_chart_svg
+
+  const createViz = () => {
+
+    var arc = d3.arc()
+      .outerRadius(radius - 20)
+      .innerRadius(radius - 80)
+
+    var pie = d3.pie()
+      .sort(null)
+      .value(function(d) { return d.value })
+
+    if(!pie_chart_svg){
+      pie_chart_svg = d3.select('#pie_chart').append('svg')
+        .attr('transform', 'translate(0,0)')
+        .attr('width', width)
+        .attr('height', height)
+        .append('g')
+        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
+    }else {
+      d3.select('#pie_chart').select('svg')
+        .attr('transform', 'translate(0,0)')
+        .attr('width', width)
+        .attr('height', height)
+      d3.select('#pie_chart').select('svg').select('g')
+        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') 
+    }
+    
+
+    pie_chart_svg.selectAll('.arc')
+      .data(pie(props.data))
+      .enter().append('g')
+      .attr('class', 'arc')
+
+    function arcTween(d) {
+      var i = d3.interpolate(this._current, d)
+      this._current = i(1)
+      return function(t) { return arc(i(t)) }
+    }
+
+    const updateChart = () => {
+      var path = pie_chart_svg.selectAll('path')
+
+      path = path.data(pie(props.data))
+
+      // EXIT old elements from the screen.
+      path.exit()
+        .transition()
+        .duration(100)
+        .attrTween('d', arcTween)
+        .remove()
+      
+        // UPDATE elements still on the screen.
+      path.transition()
+        .duration(500)
+        .attrTween('d', arcTween)
+      
+        // ENTER new elements in the array.
+      path.enter()
+        .append('path')
+        .attr('fill', function(d) {  return props.colors[d.data.asset] })
+        .transition()
+        .duration(1000)
+            .attrTween('d', arcTween)
+    }
+
+    updateChart()
+
+    watch([props], ()=> {
+      updateChart()
+    })
+
+    watch(props, ()=> {
+      if(width <= 300 || height <= 300) {
+        showLegend.value = false
+      } else if(props.legend){
+        showLegend.value = true
+      }
+    })
+  }
+
+  // watches for size changes... 
+  function outputsize() {
+    width = svg_pie_chart_container_el.offsetWidth
+    height = svg_pie_chart_container_el.offsetHeight
+    radius = Math.min(width, height) / 2
+    if(width <= 300 || height <= 300) {
+      showLegend.value = false
+    } else if(props.legend){
+      showLegend.value = true
+    }
+    createViz()
+  }
+  outputsize()
+  new ResizeObserver(outputsize).observe(svg_pie_chart_container_el)
+
+  // Calls it on mounted without listening first
+  createViz()
+})
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <div
+      v-if="showLegend"
+      class="w-full flex items-center justify-center flex-wrap gap-20 h-40"
+    >
+      <div
+        v-for="item in data"
+        :key="item.asset"
+        class="text-body font-bold flex items-center gap-5"
+      >
+        <div
+          class="h-16 w-16"
+          :style="`background-color: ${props.colors[item.asset]}`"
+        />
+        {{ item.asset }}
+      </div>
+    </div>
+    <div
+      id="pie_chart_conatiner"
+      class="w-full text-center align-middle"
+      :style="showLegend? 'height: calc(100% - 40px)' : 'height:100%'"
+    >
+      <div
+        id="pie_chart"
+        class="block m-auto h-full w-full"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/web/src/composables/router.ts b/apps/web/src/composables/router.ts
index cbdf92afd..e1866f59b 100644
--- a/apps/web/src/composables/router.ts
+++ b/apps/web/src/composables/router.ts
@@ -15,6 +15,8 @@ import ETHConfirmStake from '@/pages/staking/components/ETHConfirmStake.vue'
 import Assets from '@/pages/assets/Assets.vue'
 // @ts-ignore
 import Test from '@/pages/test/Test.vue'
+// @ts-ignore
+import ChartTest from '@/pages/chart-test/ChartTest.vue'
 
 // import NotFound from '@/pages/not-found/NotFound.vue'
 
@@ -57,6 +59,12 @@ const routes = [
     component: Test,
     meta: { authorize: [] }
 },
+{ 
+    path: '/chart', 
+    name: ChartTest, 
+    component: ChartTest,
+    meta: { authorize: [] }
+},
 // { 
 //     path: '/:catchAll(.*)', 
 //     name: NotFound, 
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 60ef83dd6..84470459d 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -8,7 +8,7 @@ font-synthesis: none;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
--webkit-text-size-adjust: 100%;
+/* -webkit-text-size-adjust: 100%; */
 }
 
 /* scrollbar stuff works for all browsers except firefox... */
@@ -37,10 +37,11 @@ background: #555;
 #app {
 /* max-width: 1280px;
 min-width: 360px;
-overflow: auto;
-margin: 0 auto; */
-height: 100vh;
+
+margin: 0 auto;
+/* height: 100vh; */
 background: #fff;
+overflow: auto;
 }
 
 
@@ -153,12 +154,12 @@ background: #fff;
         @apply inline-block ;
     }
     .nav_modal_container .nav_modal {
-        @apply invisible absolute
-        top-70 border-b-2 border-b-grey_2
-        left-[0px] w-[100vw] pt-20 bg-white z-[100];
+        @apply invisible absolute w-0 h-0;
     }
     .nav_modal_container:hover .nav_modal{
-        @apply visible;
+        @apply visible absolute
+        top-70 border-b-2 border-b-grey_2
+        left-[0px] w-[100%] pt-20 bg-white z-[100] h-min;
     }
     /* TD: Fix tooltip locations... for some reason not working... */
     .tooltip{
@@ -413,4 +414,77 @@ background: #fff;
           max-width: 300px;
         }
     }
+}
+
+
+/* Charts */
+
+
+#line_chart svg {
+    /* display: block;
+    margin-top: auto;
+    margin-bottom: auto; */
+    width: 100%;
+    height: 100%;
+}
+  .axis {
+    font-family: 'OpenSauceOneRegular';
+    font-weight: 100;
+    font-size: 8px;
+    line-height: 12.5px;
+    letter-spacing: -0.02em;
+    stroke: #8C8C8C;
+  }
+  
+  .axis path, .axis line {
+    fill: none;
+    stroke: #D9D9D9;
+    stroke-width: 2px;
+    shape-rendering: crispEdges;
+
+  }
+  
+  .overlay {
+    fill: none;
+    pointer-events: all;
+  }
+  
+  .focus circle {
+    fill: #80ABFF;
+    stroke: #D9D9D9;
+    stroke-width: 1px;
+  }
+    
+  .hover-line {
+    stroke: #D9D9D9;
+    stroke-width: 2px;
+    stroke-dasharray: 3,3;
+  }
+  
+  #selections .col-md-4 {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .line {
+    fill: none;
+    stroke-width: 1px;
+    stroke: #80ABFF;
+  }
+
+  /*  */
+
+  svg {
+	margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+.arc text {
+  font: 10px sans-serif;
+  text-anchor: middle;
+}
+
+.arc path {
+  stroke: #fff;
 }
\ No newline at end of file
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index 22ad3eee2..21053c55b 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -15,7 +15,7 @@ import TopNav from '@/components/navigation/TopNav.vue'
         >
           <div
             class="max-w-[1280px] min-w-[360px] h-full 
-          w-full overflow-auto px-25 py-margins"
+          w-full overflow-auto px-25 py-margins "
           >
             <slot />
           </div>
diff --git a/apps/web/src/pages/chart-test/ChartTest.vue b/apps/web/src/pages/chart-test/ChartTest.vue
new file mode 100644
index 000000000..dbf8d362f
--- /dev/null
+++ b/apps/web/src/pages/chart-test/ChartTest.vue
@@ -0,0 +1,116 @@
+<script setup>
+import LineChart from '@/components/charts/LineChart.vue'
+import PieChart from '@/components/charts/PieChart.vue'
+import * as d3 from 'd3'
+
+import { ref } from 'vue'
+const parseTime = d3.timeParse('%d/%m/%Y')
+const lineChartData = 
+  [
+    {
+      date: parseTime('01/01/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/02/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/03/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/04/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/05/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/06/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/07/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/08/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/09/22'),
+      price: '01.25'
+    },
+    {
+      date: parseTime('01/10/22'),
+      price: '01.25'
+    }
+  ]
+
+const xAxisFormat = (d) => {
+  const label = new Date(d).toDateString().split(' ')
+  if(label[1] === 'Jan'){
+      return label[3]
+  } else {
+      return label[1]
+  }
+}
+const formatSi = d3.format('.2s')
+const yAxisFormat = (x) => {
+    const s = formatSi(x)
+    switch (s[s.length - 1]) {
+        case ' G ': return s.slice(0, -1) + ' B ' // billions
+        case ' k ': return s.slice(0, -1) + ' K ' // thousands
+    }
+    return s
+}
+
+const pieChartData = [
+  {
+    asset: 'Metamask',
+    value: 123456.45
+  },
+  {
+    asset: 'Ledger',
+    value: 123456.45
+  },
+  {
+    asset: 'Coinbase',
+    value: 123456.45
+  },
+]
+
+const pieChartDataColors = {
+  'Metamask': '#FBBD84',
+  'Ledger': '#8c8c8c',
+  'Coinbase': '#0D5FFF'
+}
+
+</script>
+
+<template>
+  <div class="flex items-center justify-between w-full h-full border p-20">
+    <div class="w-[45%] h-[100%]">
+      <LineChart 
+        :data="lineChartData"
+        :y-axis-value="'price'"
+        :x-axis-value="'date'"
+        :x-axis-format="xAxisFormat"
+        :y-axis-format="yAxisFormat"
+      />
+    </div>
+    <div class="w-[45%] h-[100%]">
+      <PieChart 
+        :data="pieChartData"
+        :legend="true"
+        :colors="pieChartDataColors"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1bc0ca631..b959b588e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,9 @@
         "infrastructure/*",
         "services/*"
       ],
+      "dependencies": {
+        "d3": "^7.8.1"
+      },
       "devDependencies": {
         "@aws-sdk/client-secrets-manager": "^3.204.0",
         "@aws-sdk/credential-providers": "^3.204.0",
@@ -11320,6 +11323,395 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "node_modules/d3": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.1.tgz",
+      "integrity": "sha512-fdipulGWUYTZTxxU9gDJ2P4mpZL2u7Oqe6n2FI95Q8UY0AjbKNYjPHvhLOsvR+HcSao4vo3YYy4Bk9CWOrt1Vw==",
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -11646,6 +12038,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "node_modules/delay": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/delay/-/delay-5.0.0.tgz",
@@ -27504,6 +27904,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -35084,6 +35492,11 @@
         "rlp": "bin/rlp"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
+      "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g=="
+    },
     "node_modules/rollup": {
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
@@ -35250,6 +35663,11 @@
       "resolved": "https://registry.npmjs.org/rustbn.js/-/rustbn.js-0.2.0.tgz",
       "integrity": "sha512-4VlvkRUuCJvr2J6Y0ImW7NvTCriMi7ErOAqWk1y69vAdoNIzCF3yPmgeNzx+RQTLEDFq5sHfscn1MwHxP9hNfA=="
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/rxjs": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
@@ -52757,6 +53175,284 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "d3": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.1.tgz",
+      "integrity": "sha512-fdipulGWUYTZTxxU9gDJ2P4mpZL2u7Oqe6n2FI95Q8UY0AjbKNYjPHvhLOsvR+HcSao4vo3YYy4Bk9CWOrt1Vw==",
+      "requires": {
+        "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"
+      }
+    },
+    "d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "requires": {
+        "d3-array": "^3.2.0"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "requires": {
+        "delaunator": "5"
+      }
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
+    "d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "requires": {
+        "d3-array": "2.5.0 - 3"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
+    "d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
+    },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "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"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
+    "d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -53001,6 +53697,14 @@
         }
       }
     },
+    "delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "requires": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "delay": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/delay/-/delay-5.0.0.tgz",
@@ -65447,6 +66151,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "interpret": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -71184,6 +71893,11 @@
         "bn.js": "^5.2.0"
       }
     },
+    "robust-predicates": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
+      "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g=="
+    },
     "rollup": {
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
@@ -71295,6 +72009,11 @@
       "resolved": "https://registry.npmjs.org/rustbn.js/-/rustbn.js-0.2.0.tgz",
       "integrity": "sha512-4VlvkRUuCJvr2J6Y0ImW7NvTCriMi7ErOAqWk1y69vAdoNIzCF3yPmgeNzx+RQTLEDFq5sHfscn1MwHxP9hNfA=="
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "rxjs": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
diff --git a/package.json b/package.json
index 681868a35..3ee82992d 100644
--- a/package.json
+++ b/package.json
@@ -78,5 +78,8 @@
     "hooks": {
       "after:bump": "npx auto-changelog -p"
     }
+  },
+  "dependencies": {
+    "d3": "^7.8.1"
   }
 }
