import React, { useState, useCallback, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { csv, scaleLinear, scaleTime, max, timeFormat, extent, histogram as bin, timeMonths, sum } from 'd3'; import { useData } from './useData'; import { AxisBottom } from './AxisBottom'; import { AxisLeft } from './AxisLeft'; import { Marks } from './Marks'; const width = 960; const height = 500; const margin = { top: 20, right: 50, bottom: 65, left: 90 }; const xAxisLabelOffset = 54; const yAxisLabelOffset = 50; const App = () => { const data = useData(); if (!data) { return

Loading...

; } const xValue = d => d['Reported Date']; const xAxisLabel = 'Time'; const yValue = d => d['Total Dead and Missing']; const yAxisLabel = 'Total Dead and Missing'; const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const xAxisTickFormat = timeFormat('%m/%d/%Y'); const xScale = scaleTime() .domain(extent(data, xValue)) .range([0, innerWidth]) .nice(); const [start, stop] = xScale.domain(); const binnedData = bin() .value(xValue) .domain(xScale.domain()) .thresholds(timeMonths(start, stop))(data) .map(array => ({ y: sum(array, yValue), x0: array.x0, x1: array.x1 })); const yScale = scaleLinear() .domain([0, max(binnedData, d => d.y)]) .range([innerHeight, 0]); return ( ); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

working with time

MATTE-blz