import { scaleLinear, scaleTime, max, extent, bin, timeMonths, sum, timeFormat } from 'd3'; import { AxisBottom } from './AxisBottom'; import { AxisLeft } from './AxisLeft'; import { Marks } from './Marks'; const margin = { top: 0, right: 30, bottom: 20, left: 45, }; const xAxisLabelOffset = 50; const yAxisLabelOffset = 30; const xValue = (d) => d['Reported Date']; const xAxisLabel = 'Time'; const yValue = (d) => d['Total Dead and Missing']; const yAxisLabel = 'Total Dead and Missing'; const xAxisTickFormat = timeFormat('%d/%m/%Y'); export const DateHistogram = ({ data, width, height }) => { const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const xScale = scaleTime() .domain(extent(data, xValue)) .range([0, innerWidth]); const [start, stop] = xScale.domain(); const binnedData = bin() .value(xValue) .domain(xScale.domain()) .thresholds(timeMonths(start, stop))(data) .map((array) => ({ totalDeadAndMissing: sum(array, yValue), x0: array.x0, x1: array.x1, })); const yScale = scaleLinear() .domain([ 0, max(binnedData, (d) => d.totalDeadAndMissing), ]) .range([innerHeight, 0]); return <> {xAxisLabel} {yAxisLabel} };

Missing migrants multiple view

surikmeetr