React Bar Chart : Missing Migrants

100%

React Bar Chart : Missing Migrants

✓ Published1🌍 Public

Last edited Oct 24, 2023

Created on Oct 19, 2023

This bar chart displays the monthly total of dead and missing migrants worldwide, using data from the Missing Migrants Project. Each bar aggregates the monthly sum of fatalities, with time on the x-axis and the count on the y-axis. Built with React and d3.v7, it uses `d3.bin` and `d3.timeMonths` to bin events, `d3.scaleTime` and `d3.scaleLinear` for scales, and renders SVG bars via the `Marks` component. Axis labels and ticks come from reusable `AxisBottom` and `AxisLeft` components.

AI-generated description

A program that shows missing migrant data in a scatter plot.

Data: Missing Migrants Dataset.

Each point in the plot represents a single event.

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants

This interactive bar chart visualizes the cumulative monthly count of dead and missing migrants from the Missing Migrants Global dataset. The chart displays time on the x-axis and the total number of dead and missing individuals on the y-axis, with each bar representing a monthly total. Built with React and D3 v5, the visualization uses d3’s `scaleTime`, `scaleLinear`, and `histogram` functions to bin data into monthly intervals. It renders as an SVG and includes axes generated by custom `AxisBottom` and `AxisLeft` components, along with tooltips showing exact counts.

Wwindwaver

92% match

Loading thumbnail…

Missing Migrants Bar Chart

This bar chart visualizes the numbers of dead and missing migrants over time, with each bar representing a reported date and its height corresponding to the total casualties. The chart uses a time-based x-axis and a linear y-axis to display the raw data from a Missing Migrants Global dataset subset. Built with React, it leverages d3.scaleTime, d3.scaleLinear, and d3.extent to map data to SVG rectangles, while custom axis components render ticks and labels using d3’s timeFormat.

RRichardPearce60

91% match

Loading thumbnail…

Missing Migrants Bar Chart (binned)

This bar chart visualizes the monthly counts of dead and missing migrants, using binned time-series data from a CSV of global migrant incidents. The visualization aggregates reported dates into monthly bins via d3.bin and timeMonths, summing the "Total Dead and Missing" values per bin with d3.sum. A time scale maps dates to the x-axis, while a linear scale handles the y-axis counts. The React-based component renders SVG rectangles for each bin, with axes generated through custom components and D3's scaleTime, scaleLinear, and timeFormat utilities.

RRichardPearce60

91% 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…

Missing Migrants Line Chart

This example visualizes monthly totals of dead and missing migrants using a bar chart built with React and D3 v5, drawing from the Missing Migrants dataset. The x-axis maps reported dates using `scaleTime`, while the y-axis uses `scaleLinear` to show aggregated counts computed with `d3.bin` and `sum`. SVG rendering displays orange bars with axis labels, and native `<title>` tooltips provide values on hover. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file.

AAndre J Denais

90% match

Loading thumbnail…

39) Missing Migrants II

This interactive bar chart visualizes the total number of dead and missing migrants over time, aggregated by month using d3.bin and d3.timeMonths. The x-axis displays dates with d3.scaleTime while the y-axis shows cumulative counts via d3.scaleLinear. Built with React and d3.v5, the SVG renders axis components and marks from separate modules, pulling data from a CSV of global migration incidents. Hovering over each rectangular bar reveals a tooltip with the exact date range.

Llefat92

90% match

Loading thumbnail…

Missing Migrants

An interactive bar chart visualizes the number of dead and missing migrants over time, with monthly bins along the x-axis and the total count on the y-axis. The visualization uses React to render SVG elements, with D3 v5 functions like `scaleTime`, `scaleLinear`, `histogram`, and `sum` to process and aggregate the data. Data is loaded from a CSV via `d3.csv`, and the chart includes axis components and tooltips showing the exact count per bin.

Ppnlinyz

90% match

Loading thumbnail…

Missing Migrants

This visualization displays monthly totals of dead and missing migrants from the Missing Migrants Dataset using a bar chart of aggregated counts over time. The React app loads CSV data via the `useData` hook, then uses `d3.histogram` with `timeMonths` thresholds to bin records by reported date. Axes are rendered as SVG components using `scaleTime` and `scaleLinear`, with bars drawn as SVG rectangles. The y-axis sums deaths per bin via `d3.sum`, while tooltips reveal precise totals on hover.

NNelson Kalgushkin

90% match