D3 Course - Missing Migrants Date Histogram

100%

D3 Course - Missing Migrants Date Histogram

✓ Published0🌍 Public

Last edited Apr 12, 2022

Created on Apr 12, 2022

Forked from Missing Migrants Date Histogram

This interactive visualization displays a date histogram of the monthly total dead and missing migrants, using data from the Missing Migrants Dataset. The chart employs React with D3 v5 to build an SVG visualization, using `d3.bin` to group records into monthly bins and `d3.sum` to aggregate the death counts. Axes and rectangular marks are generated through custom React components, with tooltips exposing precise values via SVG `<title>` elements. The time scale is formatted with `d3.timeFormat` and the visualization leverages `d3.scaleTime` and `d3.scaleLinear` for proportional mapping.

AI-generated description

A date histogram showing the sum total dead and missing migrants for each month.

Data from the Missing Migrants Dataset.

Demonstrates use of d3.bin and d3.sum.

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants Date Histogram

This visualization is a date histogram that displays the total number of dead and missing migrants per month, based on data from the Missing Migrants Dataset. It uses React and D3 v5, specifically `d3.bin` to group the data into monthly bins and `d3.sum` to aggregate the casualty counts within each bin. The chart is rendered as an SVG with separate components for axes and rectangular marks, and it includes a tooltip that shows the exact count when hovering over a bar.

Kkth2242

94% match

Loading thumbnail…

Missing Migrants Date Histogram

This visualization displays the monthly total of dead and missing migrants as a date histogram, using data from the Missing Migrants Dataset. It shows a bar chart where each bar represents the sum of casualties for a given month, with the x-axis mapping time and the y-axis representing the count. The implementation uses React with D3 v5, leveraging `d3.bin` to group data into monthly buckets, `d3.sum` to aggregate counts, and `d3.scaleTime` and `d3.scaleLinear` for axis scaling. The chart is rendered as an SVG, with axes generated via custom `AxisBottom` and `AxisLeft` components and data bars drawn as rectangles.

Ssophburke

93% match

Loading thumbnail…

Missing Migrants Date Histogram

This visualization displays the monthly total of dead and missing migrants using a date histogram, with time on the x-axis and the count on the y-axis. The bars represent the sum of reported deaths and missing persons for each month, as recorded in the Missing Migrants Dataset. The code leverages React with D3 v5, specifically using `scaleTime` and `scaleLinear` for axes, `histogram` with `timeMonths` thresholds to bin the data, and `sum` to aggregate the totals per bin. The SVG rendering is generated via React components, with tooltips provided through SVG `title` elements.

Yyyaaa1

93% match

Loading thumbnail…

Missing Migrants Date Histogram

This interactive visualization displays a date histogram of monthly totals for dead and missing migrants, using data from the Missing Migrants Dataset. The bar chart aggregates individual incident records by month, summing the reported deaths and disappearances for each time bin. Built with React and D3 v5, it renders SVG bars using `d3.bin` to group data into monthly thresholds and `d3.sum` to calculate totals. The visualization demonstrates reusable axis components and tooltips through SVG `<title>` elements.

Qqhfzwyx

93% match

Loading thumbnail…

Missing Migrants Date Histogram

This visualization shows the monthly total of dead and missing migrants as a date histogram, with each bar representing one month’s aggregated count. Built with React and SVG, it processes the Missing Migrants Dataset using d3.csv, d3.bin for time-based binning, and d3.sum to aggregate values per bin. Scales from d3.scaleTime and d3.scaleLinear map the data, while custom React components render the axes and rectangle marks, which include a native SVG `<title>` tooltip.

Aavnig

93% match

Loading thumbnail…

Missing Migrants Date Histogram

This visualization displays a date histogram of the total dead and missing migrants per month, sourced from the Missing Migrants Dataset. The code uses D3.js v5’s `scaleTime`, `scaleLinear`, `histogram` (via `d3.bin`), and `sum` to bin the data by month and aggregate the counts. Rendered as an SVG with React, the chart includes custom axes and tooltips via SVG `<title>` elements.

SSam

93% match

Loading thumbnail…

D3 course - Missing Migrants

This scatter plot visualizes the Missing Migrants dataset, showing each event as a point with its reported date on the x-axis and total dead and missing on the y-axis. Users can toggle between raw data, monthly bins, and annual bins via radio buttons, which aggregate events using d3.bin with time thresholds. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleSqrt for scaling, with circles colored by a linear color scale from orange to dark red based on severity. Data is loaded from a CSV file and rendered using React with SVG elements, incorporating tooltips that display event details on hover.

JJames Rhodes

93% match

Loading thumbnail…

Missing Migrants Date Histogram

This visualization presents a date histogram of the monthly sum of dead and missing migrants, using data from the Missing Migrants Dataset. It displays the total count per month on the y-axis against time on the x-axis. The implementation uses React with D3 v5, employing `d3.bin` to bin the data by month and `d3.sum` to aggregate the totals. The SVG rendering includes axes and rectangular marks with tooltips, all styled with the Poppins font.

MMithun Ghosh

93% match