React Histogram chart

100%

React Histogram chart

✓ Published0🌍 Public

Last edited May 16, 2022

Created on May 16, 2022

This interactive histogram visualizes monthly migrant deaths and missing persons from a 2019 global dataset. Built with React and rendered as SVG, the chart uses D3’s `scaleTime`, `scaleLinear`, `bin`, and `timeMonths` APIs to bin reported dates into monthly intervals and sum the corresponding death counts. Each bar’s height and position derive from the linear y-scale and time x-scale, with tooltips revealing exact values and dates. Data is loaded via D3’s `csv` from a GitHub gist.

AI-generated description

A Migrants death histogram-chart Migrants Death: data

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrant Histogram

This histogram visualizes the cumulative count of dead and missing migrants over time, derived from a global dataset sourced via a GitHub-hosted CSV. The D3.js v6 `bin` and `timeMonths` APIs aggregate the data into monthly bins, which are then rendered as SVG rectangles. React manages the interactive chart’s composition, while D3’s `scaleTime` and `scaleLinear` handle axes, along with custom axis components. The visualization highlights temporal trends in migrant fatalities, with a tooltip providing exact totals per bin.

CCodeDuckie99

90% match

Loading thumbnail…

React world map + migrant death/missing points + histogram

This visualization combines a world map with a histogram of migrant deaths and missing persons. The map uses a D3 natural Earth projection with SVG paths for land, borders, and graticules, overlaid with circles scaled by the square root of the reported deaths. Below, a time-based histogram bins monthly totals using d3.bin and displays them as rectangular bars. Data is loaded from CSV and TopoJSON sources, rendered with React, with tooltips showing counts and dates.

SSuperShreejit

89% match

Loading thumbnail…

missing migrants project

This histogram displays the total number of dead and missing migrants over time, aggregated by month. Built with React and SVG, it uses d3’s scaleTime, scaleLinear, and histogram functions to bin incident counts by reported date. Each bar’s height corresponds to the monthly sum of deaths, with axis ticks styled via CSS. The data comes from the Missing Migrants Global 2019 subset CSV, loaded asynchronously.

Sseanowh

88% match

Loading thumbnail…

Migrant death

This visualization displays the monthly count of migrant deaths using a histogram. The bar chart uses React to render SVG rectangles, with D3 scales for time and linear axes. Data comes from the Missing Migrants Global dataset, processed with `d3.csv` and binned by month using `d3.histogram`. The code uses `scaleTime`, `scaleLinear`, and `timeMonths` to define the bins, with tooltips showing exact death totals via SVG `<title>` elements.

TTakuya Kitazawa

88% match

Loading thumbnail…

Histogram

This histogram displays the total number of dead and missing migrants per month, with time on the x-axis and the monthly death count on the y-axis. The visualization uses React with D3 v5, leveraging `d3.bin` to group data into monthly bins and `d3.sum` to aggregate the death counts within each bin. The data comes from the Missing Migrants Dataset, loaded via `d3.csv`, and is rendered as SVG rectangles with tooltips showing exact values. Axes are constructed with `scaleTime` and `scaleLinear`.

ZZiting Li

87% match

Loading thumbnail…

Missing migrant

A histogram displays the monthly count of dead and missing migrants from the Missing Migrants Project dataset. React renders an SVG chart using D3 scales and axes, with `d3.bin` and `timeMonths` aggregating reported dates, and `d3.sum` totaling fatalities per bin. Color-coded bars show the distribution over time, with axis labels and tooltips providing precise values.

SShuyu Zheng

87% match

Loading thumbnail…

Migrant Deaths II

A histogram displays monthly totals of migrant deaths and missing persons over time, with the x-axis showing reported dates and the y-axis showing aggregated counts. Built with React and D3 v5, the visualization uses d3.csv for data loading, d3.bin with d3.timeMonths thresholds for temporal binning, and d3.sum to aggregate values per bin. SVG rectangles render the bars, with axes generated by custom React components using d3.scaleTime, d3.scaleLinear, and d3.timeFormat for tick labels.

Ffjvoris

87% match

Loading thumbnail…

Tracking Migrant Deaths

This visualization tracks migrant deaths and disappearances over time using a histogram of monthly totals. The bar chart displays the aggregate number of dead and missing individuals per month, with a native tooltip on each bar showing the exact date range and total. The code uses React and d3.v5, leveraging `d3.bin` with `d3.timeMonths` thresholds to bin the data by month, `d3.scaleTime` for the x-axis, and `d3.scaleLinear` for the y-axis. Data comes from a CSV of the Missing Migrants Global dataset, rendered as SVG rectangles with axes built from custom React components.

PPhronesis

87% match