Skip to main content
SimilarExport ZIP
100%

Working with time

✓ Published0🌍 Public
JJosh Zalcman
Last edited Mar 17, 2022
Created on Mar 16, 2022

This visualization displays monthly totals of dead and missing migrants along global routes, drawing on a 2019 Missing Migrants dataset. It aggregates reported incident dates into monthly bins using d3.bin and d3.timeMonths, then renders the aggregated sums as bars. The React application uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with custom SVG axis components and marks. A tooltip on each bar reveals the precise monthly count via a d3 title element.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

This example visualizes the monthly totals of dead and missing migrants from a global dataset, using a bar chart where time is mapped to the x-axis and cumulative counts to the y-axis. The React app loads CSV data via d3.csv, parses dates and numbers, and computes bins with d3.bin and timeMonths. SVG marks are rendered through React components, with scales from d3.scaleTime and d3.scaleLinear, and axes built using custom React components that leverage d3’s tick generation.

KKai Stewart
93% match
Loading thumbnail…

working with time

This visualization displays the total number of dead and missing migrants over time, using a histogram with monthly bins. The data comes from a CSV file of missing migrants incidents and is processed with `d3.csv` and `d3.histogram`. React renders SVG elements, with axes drawn from custom components using `d3.scaleTime` and `d3.scaleLinear`. Circles mark each bin’s total, colored blue with opacity, and the time axis formats dates using `d3.timeFormat`.

MMATTE-blz
92% match
Loading thumbnail…

Missing migrants

This visualization shows the total number of dead and missing migrants reported per month, using a bar chart where each bar aggregates monthly totals. The code loads a CSV dataset of migrant incidents, bins the reported dates into monthly intervals using `d3.bin` with `timeMonths` thresholds, and sums the "Total Dead and Missing" values per bin. React manages the component state while D3 scales (`scaleTime`, `scaleLinear`) and axes render the SVG output. Axes are formatted with `timeFormat`, and tooltips display raw values via SVG `<title>` elements.

MmohitPassan
91% match
Loading thumbnail…

Fork of Working with Time

This interactive bar chart visualizes the monthly cumulative total of dead and missing migrants from the Missing Migrants Global 2019 dataset, sourced via CSV from GitHub. The visualization aggregates daily records into monthly bins using D3’s `scaleTime`, `timeMonths`, and `histogram` functions, then renders the result as SVG rectangles within a React component. The chart includes labeled axes, styled tick marks, and hover tooltips showing the exact monthly count, all built with D3 v5 and rendered through React’s declarative SVG output.

Ttrissentety
91% match
Loading thumbnail…

Working With Time with Migrants

This histogram visualizes the monthly totals of dead and missing migrants from a CSV dataset, plotting time on the x-axis and aggregated counts on the y-axis. Using React with D3 v5, the code employs `scaleTime` and `scaleLinear` for axes, `timeMonths` to define bin thresholds, and `sum` to aggregate values per bin. Bars are rendered as SVG rectangles, with axis ticks and labels generated by custom components.

KKtuzinowski
91% match
Loading thumbnail…

missing migrant

This visualization displays the total number of dead and missing migrants over time, aggregated into monthly bins as a histogram. The code uses d3.csv to load data from the Missing Migrants Global 2019 dataset, d3.bin and d3.timeMonths to create temporal bins, and d3.scaleTime and d3.scaleLinear for the axes. React renders the SVG graphic, with d3’s timeFormat used for tick labels and native SVG `<title>` elements providing tooltips. The chart is built using d3 v5 within a React 16 application.

TTsaiJie
90% match
Loading thumbnail…

Missing Migrants

This visualization shows the total number of dead and missing migrants over time, aggregated into monthly bins from a subset of the Missing Migrants Global dataset. The data is loaded via `d3.csv` and binned using `d3.histogram` with `timeMonths` thresholds, summing the 'Total Dead and Missing' values per bin. A time scale (`d3.scaleTime`) and linear scale (`d3.scaleLinear`) map the data to an SVG rendered with React components for axes and rectangle marks. Hovering over each bar reveals its exact total via a native `<title>` tooltip.

CCatalina Vajiac
90% match
Loading thumbnail…

Missing Migrant of Working with Time

This histogram shows the monthly total of dead and missing migrants over time, based on data from the Missing Migrants Project subset. The visualization uses a bar chart with time on the x-axis and the aggregated death count on the y-axis, with hover tooltips displaying exact values. Built with React and D3 v5, it leverages `d3.scaleTime`, `d3.bin` with `timeMonths` thresholds, and `d3.sum` to aggregate the data, while custom SVG components like AxisBottom, AxisLeft, and Marks render the chart. The code loads CSV data via `d3.csv` and renders as SVG.

SSong Tao Chen
90% match