import React, { useCallback, useState, useMemo } from 'react'; import { scaleTime, extent, scaleLog, max, line, timeFormat, format } from 'd3'; import { XAxis } from './XAxis'; import { YAxis } from './YAxis'; import { VoronoiOverlay } from './VoronoiOverlay'; const xValue = d => d.date; const yValue = d => d.deathTotal; const margin = { top: 50, right: 40, bottom: 80, left: 100 }; const formatDate = timeFormat('%b %d, %Y'); const formatComma = format(','); const Tooltip = ({ activeRow, className }) => ( {activeRow.countryName}: {formatComma(activeRow.deathTotal)}{' '} {activeRow.deathTotal > 1 ? 'deaths' : 'death'} as of{' '} {formatDate(activeRow.date)} ); export const LineChart = ({ data, width, height }) => { const [activeRow, setActiveRow] = useState(); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const allData = useMemo( () => data.reduce( (accumulator, countryTimeseries) => accumulator.concat(countryTimeseries), [] ), [data] ); console.log(allData); const epsilon = 1; const xScale = useMemo( () => scaleTime() .domain(extent(allData, xValue)) .range([0, innerWidth]), [allData, xValue] ); const yScale = useMemo( () => scaleLog() .domain([epsilon, max(allData, yValue)]) .range([innerHeight, 0]), [epsilon, allData, yValue] ); const lineGenerator = useMemo( () => line() .x(d => xScale(xValue(d))) .y(d => yScale(epsilon + yValue(d))), [xScale, xValue, yScale, yValue, epsilon] ); const mostRecentDate = xScale.domain()[1]; const handleVoronoiHover = useCallback(setActiveRow, []); return ( ); };

Coronavirus Deaths by Country over Time (with Voronoi Hover)

akashnk