add line chart

viz/RadarDatasetAnimation/LineChart.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useRef } from 'react';
+import * as d3 from 'd3';
+import { useSpring, animated } from '@react-spring/web';
+
+const MARGIN = { top: 10, right: 10, bottom: 40, left: 10 };
+
+type Datapoint = { x: Date; value: number };
+
+type LineChartProps = {
+  width: number;
+  height: number;
+  data: Datapoint[];
+  color: string;
+};
+
+export const LineChart = ({ width, height, data, color }: LineChartProps) => {
+  const axesRef = useRef(null);
+  const boundsWidth = width - MARGIN.right - MARGIN.left;
+  const boundsHeight = height - MARGIN.top - MARGIN.bottom;
+
+  const yScale = d3.scaleLinear().domain([0, 100]).range([boundsHeight, 0]);
+
+  const xExtent = d3.extent(data, (d) => d.x);
+
+  const xScale = d3.scaleTime().domain(xExtent).range([0, boundsWidth]).nice();
+
+  // Render the X and Y axis using d3.js, not react
+  useEffect(() => {
+    const svgElement = d3.select(axesRef.current);
+    svgElement.selectAll('*').remove();
+
+    const xAxisGenerator = d3.axisBottom(xScale);
+    svgElement
+      .append('g')
+      .attr('transform', 'translate(0,' + boundsHeight + ')')
+      .call(xAxisGenerator.ticks(4));
+  }, [xScale, yScale, boundsHeight]);
+
+  const lineBuilder = d3
+    .line<Datapoint>()
+    .x((d) => xScale(d.x))
+    .y((d) => yScale(d.value));
+  const linePath = lineBuilder(data);
+
+  if (!linePath) {
+    return null;
+  }
+
+  return (
+    <div>
+      <svg width={width} height={height}>
+        {/* first group is lines */}
+        <g
+          width={boundsWidth}
+          height={boundsHeight}
+          transform={`translate(${[MARGIN.left, MARGIN.top].join(',')})`}
+        >
+          <LineItem path={linePath} color={color} />
+        </g>
+        {/* Second is for the axes */}
+        <g
+          width={boundsWidth}
+          height={boundsHeight}
+          ref={axesRef}
+          transform={`translate(${[MARGIN.left, MARGIN.top].join(',')})`}
+        />
+      </svg>
+    </div>
+  );
+};
+
+type LineItemProps = {
+  path: string;
+  color: string;
+};
+
+const LineItem = ({ path, color }: LineItemProps) => {
+  const springProps = useSpring({
+    to: {
+      path,
+      color,
+    },
+    config: {
+      friction: 100,
+    },
+  });
+
+  return (
+    <animated.path
+      d={springProps.path}
+      fill={'none'}
+      stroke={color}
+      strokeWidth={2}
+    />
+  );
+};

viz/RadarDatasetAnimation/RadarDatasetAnimation.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { data, dumbelData } from './data';
+import { data, dumbelData, timeseriesData } from './data';
 import { Radar } from './Radar';
 import { Dumbbell } from './Dumbbell';
+import { LineChart } from './LineChart';
 
 const BUTTONS_HEIGHT = 50;
 const COLORS = ['green', '#e0ac2b', '#6689c6', '#e85252', '#9a6fb0', '#a53253'];
@@ -29,11 +30,21 @@ export const RadarDatasetAnimation = ({
   const [selectedGroup, setSelectedGroup] = useState(allGroups[0]);
 
   const groupId = data.findIndex((d) => d.name === selectedGroup);
+  const groupName = allGroups[groupId];
   const groupData = data[groupId];
   const groupColor = COLORS[groupId];
 
   const groupDumbelData = dumbelData.find((d) => d.name === selectedGroup);
 
+  const groupLineData = timeseriesData.map((d) => {
+    const [year, month] = d.Month.split('-');
+    const date = new Date(Number(year), Number(month) - 1, 1);
+    return {
+      x: date,
+      value: d[groupName],
+    };
+  });
+
   if (!groupData || !groupDumbelData) {
     return null;
   }
@@ -83,12 +94,27 @@ export const RadarDatasetAnimation = ({
           ]}
           color={groupColor}
         />
-        <Dumbbell
-          width={width / 3}
-          height={150}
-          data={groupDumbelData}
-          color={groupColor}
-        />
+        <div
+          style={{
+            height,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+          }}
+        >
+          <Dumbbell
+            width={width / 3}
+            height={150}
+            data={groupDumbelData}
+            color={groupColor}
+          />
+          <LineChart
+            data={groupLineData}
+            width={width / 3}
+            height={150}
+            color={groupColor}
+          />
+        </div>
       </div>
     </div>
   );