import { useRef, useMemo, useEffect, } from 'react'; import { AxisBottom } from './AxisBottom'; import { AxisLeft } from './AxisLeft'; import { Marks } from './Marks'; import { scaleTime, scaleLinear, sum, max, extent, timeMonths, timeFormat, bin, brushX, select, event, } from 'd3'; const margin = { top: 0, right: 30, bottom: 20, left: 45, }; const xAxisLabelOffset = 50; const yAxisLabelOffset = 30; const xAxisTickFormat = timeFormat('%m/%d/%y'); const xAxisLabel = 'Time'; const yValue = (d) => d['Total Dead and Missing']; const yAxisLabel = 'Total dead and missing'; export const DateHistogram = ({ data, height, width, setBrushExtent, xValue, }) => { const brushRef = useRef(); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const xScale = useMemo(() => { return scaleTime() .domain(extent(data, xValue)) .range([0, innerWidth]) .nice(); }, [data, xValue, innerWidth]); const binnedData = useMemo(() => { const [start, stop] = xScale.domain(); return bin() .value(xValue) .domain(xScale.domain()) .thresholds(timeMonths(start, stop))(data) .map((array) => ({ y: sum(array, yValue), x0: array.x0, x1: array.x1, })); }, [xValue, yValue, xScale, data]); const yScale = useMemo( () => scaleLinear() .domain([0, max(binnedData, (d) => d.y)]) .range([innerHeight, 0]) .nice(), [binnedData, innerHeight] ); useEffect(() => { const brush = brushX().extent([ [0, 0], [innerWidth, innerHeight], ]); brush(select(brushRef.current)); brush.on('brush end', (event) => { setBrushExtent( event.selection && event.selection.map(xScale.invert) ); }); }, [innerWidth, innerHeight]); return ( <> {yAxisLabel} {xAxisLabel} d} binnedData={binnedData} xScale={xScale} yScale={yScale} innerHeight={innerHeight} /> ); };

Multiple Views

Josh Zalcman