Skip to main content
SimilarExport ZIP
100%

Migrant Deaths Linked Views with Fast Brushing

✓ Published0🌍 Public
ZZhiheng Zhang
Last edited Nov 29, 2020
Created on Nov 29, 2020

This visualization combines a world map of migrant deaths with a brushed time-series histogram to explore the data through linked views. The map displays circles sized by the total dead and missing, while the histogram shows monthly totals; brushing a time range filters the map’s circles dynamically. The implementation uses React with `useMemo` for performance, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin` histogram, and renders to SVG. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

This iteration is optimized for performance using React's useMemo hook.

MIT Licensed

Similar vizzes

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world map with a time-series histogram to explore migrant deaths reported between 2014 and 2019. The map displays circles sized by the total dead and missing, while the histogram sums the same metric by month. Brushing on the histogram filters the map’s circles to show only data within the selected date range. The visualization uses React for state management and rendering, alongside D3 APIs such as `geoNaturalEarth1` for projection, `geoPath` for map geometry, `scaleSqrt` for circle sizing, `bin` for histogram creation, and `brushX` for the interactive linking between views. Data comes from the Missing Migrants Project.

AAbdul Salam Almadani
97% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world bubble map and a time-series histogram to explore migrant deaths, with linked views enabling fast brushing. The map plots circles scaled by death counts per location using a natural Earth projection via `d3.geoPath`, while the histogram aggregates monthly totals using `d3.histogram` and a brush from `d3.brushX` filters the map in real time. React’s `useMemo` optimizes rendering, and data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

MMatthew Brammall
97% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world map of migrant deaths with a linked brushable time-series histogram. The map uses a Natural Earth projection with circles sized by the total number of dead or missing migrants, while the histogram aggregates monthly totals. Brushing the histogram filters the map in real time via React state. The code employs d3.geoNaturalEarth1, d3.geoPath, d3.scaleSqrt, d3.brushX, and d3.bin, with data from the Missing Migrants Project and country boundaries from World Atlas TopoJSON, all rendered as SVG.

Nnadia-el
96% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This visualization presents migrant deaths across a world map, using a bubble map where circle size encodes the total dead and missing, and a linked time-series histogram of the same data. Users can brush the date histogram to filter the map to show only incidents within that time range. The implementation uses React with `useMemo` and `useEffect`, D3 v5 modules like `geoNaturalEarth1`, `geoPath`, `geoGraticule`, `scaleSqrt`, `scaleTime`, and `brushX`, rendering to SVG. Data comes from a CSV of Missing Migrants Global records.

AAbdul Salam Almadani
96% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

A world map displays migrant deaths by location, with circle size proportional to the total dead and missing. A linked time-series histogram below shows monthly death totals and supports brush selection, filtering the map to show only deaths within the selected date range. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map rendering, `brushX` for interactive filtering, and `scaleSqrt` for circle sizing. Data comes from a CSV of Missing Migrants records, with country boundaries from World Atlas TopoJSON.

Jjwlam83
96% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and missing persons. Brushing on the histogram filters the map’s circles in real time, showing incidents within the selected date range. The map uses a natural Earth projection via d3.geoNaturalEarth1, while the histogram bins monthly totals with d3.histogram and handles brushing through d3.brushX. React’s useMemo optimizes rendering, and data comes from the Missing Migrants Project CSV, loaded with d3.csv.

CCurran Kelleher
96% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization links a world map of migrant deaths with a time-series histogram, using brushing to filter data across both views. The map displays circles sized by the total dead and missing, while the histogram shows monthly totals, with brush selection updating the map's highlighted points. Built with React and D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleSqrt for circle sizing, and d3.brushX for interactive filtering. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

NNikhil
96% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization presents migrant deaths and missing persons with two linked views: a world map with scaled circles for total deaths and a brushing-enabled time histogram. Users brush over the monthly histogram to filter the map’s circles to show only incidents within that date range. The map uses `geoNaturalEarth1` projection with `geoPath` and `geoGraticule`, while the histogram aggregates data with `d3.histogram` and `brushX`. Circle radii are set with `scaleSqrt`, and React’s `useMemo` optimizes rendering. Data comes from a CSV of reported incidents.

SSarahKiyani
95% match