logo migrant data

100%

logo migrant data

✓ Published0🌍 Public

Last edited May 16, 2022

Created on May 16, 2022

This interactive visualization displays monthly totals of dead and missing migrants along global routes, using a bar chart with a logarithmic y-axis to accommodate wide value ranges. The React application fetches CSV data from a gist and uses d3.bin with timeMonths thresholds to aggregate the raw date values, while scaleTime and scaleLog handle the axes. The visualization renders as SVG with labeled axes, teal bars that reveal exact values via native tooltips, and a custom Prompt font from Google Fonts.

AI-generated description

Half of the smiley HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

migrant data part 1

This visualization displays the total number of dead and missing migrants over time, aggregated into monthly bins. The chart uses a bar chart rendered with SVG, with time on the x-axis and cumulative death counts on the y-axis. It is built with React and D3 v7, using `d3.bin` for binning, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.timeMonths` to set bin thresholds. Data comes from a CSV file of Missing Migrants Global records, loaded via `d3.csv`.

BBlake McCarty

89% 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

88% match

Loading thumbnail…

Migrant Data

This visualization displays the total number of dead and missing migrants over time, using a bar chart where each bar aggregates monthly data. Built with React and D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, and D3's `histogram` to bin the data by month. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with each bar showing a tooltip via a `<title>` element. Data comes from the Data Canvas Sense Your City Dataset.

Ddumbdataguy@gmail.com

88% 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

87% match

Loading thumbnail…

Migrant Chart Log Scale

This visualization plots the total number of dead and missing migrants over time, using a logarithmic y-axis to accommodate the wide range of values in the dataset. The chart displays individual data points as circles, with tooltips showing the exact reported date for each point. Built with React and D3 v7, the code uses scaleTime and scaleLog for the axes, while the data is loaded asynchronously via d3.csv from a Missing Migrants subset. The SVG rendering includes custom axis components and styled tick marks.

Jjbruzzo

87% match

Loading thumbnail…

Total Miss & Death Migration

This visualization shows the monthly total of dead and missing migrants, displayed as a bar chart over time. The bars are rendered as SVG rectangles using React components, with axes generated by custom `AxisBottom` and `AxisLeft` components. It uses `d3.bin`, `d3.timeMonths`, and `d3.sum` to aggregate the data from a CSV file, while `d3.scaleTime` and `d3.scaleLinear` handle the scales. The chart includes hover tooltips showing the exact date and person count.

AAmir

87% match

Loading thumbnail…

Missing Migrants

This chart displays the number of dead and missing migrants over time, aggregated into monthly bins. The visualization uses a bar chart where the height of each bar corresponds to the total count for that month. The code leverages React for the UI, D3’s `scaleTime`, `scaleLinear`, `histogram`, and `csv` modules for data fetching and processing, and renders SVG rectangles. The data comes from a CSV file of global migration incidents, with bars colored teal against a light gray grid.

Iiblub

87% match

Loading thumbnail…

migrants dead and missing React and D3

This visualization displays monthly totals of dead and missing migrants from a global 2019 subset dataset. The React app loads CSV data with `useData` and `d3.csv`, then uses `d3.bin()` with `timeMonths` thresholds to aggregate daily records into monthly intervals, which are rendered as pink SVG rectangles. Axes are generated using `d3.scaleTime` with a `%d/%m/%y` time format for the bottom axis and `d3.scaleLinear` for the left axis. All marks and axes are implemented as reusable React components, rendered through ReactDOM into an SVG container.

Bblackbottt

87% match