Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited Feb 13, 2023

Created on Feb 11, 2023

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.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This interactive bar chart visualizes the total number of dead and missing migrants over time, aggregated by month from the Missing Migrants Global 2019 subset of the Data Canvas Sense Your City dataset. Built with React and rendered as SVG, the visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `histogram` (binning), and `timeMonths` APIs to bin reported dates into monthly intervals and sum corresponding death counts. Hovering over a bar reveals the exact value through an SVG `<title>` tooltip.

DDeborah Ong

95% match

Loading thumbnail…

Fork of Working with Time

This visualization shows the total number of dead and missing migrants over time, using a bar chart where each bar aggregates the data by month. The chart displays the counts on the y-axis and dates on the x-axis, with a tooltip revealing the exact value for each bar. The code builds the visualization using React, the d3.scaleTime and d3.scaleLinear functions for axes, and the d3.histogram `bin` function to group data by months. The data is loaded from a CSV file of the Data Canvas Sense Your City dataset.

AAmnaRizvi-S

92% match

Loading thumbnail…

Fork of Working with Time

This visualization displays the total number of dead and missing migrants over time, binned by month to reveal temporal trends. The React-based code uses d3.csv to load the Data Canvas Sense Your City dataset, then applies d3.scaleTime, d3.scaleLinear, and d3.bin with d3.timeMonths thresholds to aggregate and render the histogram. Custom SVG axes are drawn with d3.ticks and timeFormat labels, while a native SVG `<title>` element provides hover tooltips. The interactive chart appears static but relies on React’s useEffect hook for asynchronous data loading and conditional rendering.

Qqtrfx

92% match

Loading thumbnail…

Fork of Working with Time

This visualization displays the monthly number of dead and missing migrants from the Data Canvas Sense Your City Dataset, aggregated as a bar chart. The code uses React with D3 v5, leveraging `scaleTime`, `histogram`, `timeMonths`, and `scaleLinear` to bin and scale the temporal data. SVG rectangles render each bar, with tooltips for exact values. Axis components are custom-built using React, and data loading relies on D3’s `csv` and React’s `useEffect`.

Jjchen6912

92% match

Loading thumbnail…

Fork of Fork of Working with Time

This histogram visualizes the total number of dead and missing migrants over time, with monthly bins along the x-axis and aggregated death counts on the y-axis. It uses d3.csv to load the Missing Migrants dataset, d3.bin with timeMonths thresholds to group reported dates, and d3.scaleTime and d3.scaleLinear to map the data. React components render the SVG axes and rectangular marks, with CSS styling for ticks and bars.

Mmikekslv

91% match

Loading thumbnail…

Fork of Working with Time

This visualization displays monthly totals of dead and missing migrants over time, binned from daily records in the Data Canvas Sense Your City Dataset. Bars show aggregate counts per month, with tooltips revealing exact values. Built with React and D3 v5, it uses `d3.bin` and `timeMonths` to group data, `scaleTime` and `scaleLinear` for axes, and SVG rectangles for rendering.

Zzyniax

91% match

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows monthly totals of dead and missing migrants from the Missing Migrants Dataset. It renders a bar chart as SVG, with time on the x-axis and cumulative deaths per month on the y-axis. Built with React and D3 v5, the code uses `d3.bin` with `timeMonths` thresholds to aggregate data, `d3.sum` to calculate monthly totals, and `scaleTime` and `scaleLinear` for axes. Hovering over a bar reveals its exact total via a native SVG `<title>` tooltip.

MMATTE-blz

91% match

Loading thumbnail…

Working with time

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.

JJosh Zalcman

91% match