Missing Migrants on a Map

100%

Missing Migrants on a Map

✓ Published0🌍 Public

Last edited Nov 28, 2024

Created on Nov 20, 2024

This example uses D3’s `geoPath` and `geoNaturalEarth1` projection to render a world map from World Atlas TopoJSON data, with graticules and land interiors styled in gray. Overlaid on this are circles whose radii are scaled by the square root of “Total Dead and Missing” figures from a CSV of migrant deaths, plotted at their recorded coordinates. The visualization is built with React, using D3’s `csv` loader and `scaleSqrt` to encode magnitude, while each incident is a semi-transparent teal circle, revealing clusters of casualties.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants on a map

This map uses a natural Earth projection to display global incidents of missing migrants as semi-transparent circles sized by the total dead and missing count. The visualization layers country boundaries, graticules, and a sphere outline using `d3.geoPath` and `geoNaturalEarth1`. Circle radii are scaled with `d3.scaleSqrt` based on the CSV’s “Total Dead and Missing” column. The React app loads world atlas TopoJSON via topojson’s `feature` and `mesh`, then renders all elements as SVG. The minimalist, muted color palette (blue-gray ocean, gray land, teal markers) prioritizes the spatial distribution of incidents.

JJohn Lewis

94% match

Loading thumbnail…

Missing Migrants on a Map

This map visualizes the global distribution of missing migrants, with circle size proportional to the total number of dead and missing per location. Using D3’s `geoNaturalEarth1` projection with `geoPath`, the visualization renders landmasses and graticules, while `scaleSqrt` encodes data values into circle radii. Data comes from a CSV of Missing Migrants incidents, loaded via `d3.csv`, and the world atlas is fetched as TopoJSON and converted to GeoJSON using `topojson.feature`.

Jjbruzzo

94% match

Loading thumbnail…

Missing Migrants on a Map

This visualization displays a world map of missing migrant incidents, with circle markers sized according to the total number of dead and missing individuals at each location. The map uses a natural Earth projection with graticules and country borders rendered as SVG paths, while circles are overlaid with square-root scaling for radius. Built with React and D3 v5, the example loads world atlas topology via the `topojson` library and pulls data from a CSV file. The `geoNaturalEarth1` projection and `geoPath` handle geographic mapping, while circles are positioned using the projection coordinates.

LLaura Johnson

94% match

Loading thumbnail…

Missing Migrants on a Map

A world map visualizes the locations and magnitudes of missing migrant incidents, with semi-transparent circles sized by the total number of dead and missing per coordinate. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for land and graticule rendering, while a square-root scale maps incident counts to circle radii. React manages the component state, loading CSV data and world-atlas TopoJSON via hooks. The SVG rendering provides a clean overview of global migration-related fatalities.

Vvmonney

94% match

Loading thumbnail…

Missing Migrants on a Map

This visualization displays global locations of missing migrants, with circle size encoding the number of dead or missing based on a square-root scale. A world map rendered with `d3.geoNaturalEarth1` and `d3.geoPath` shows country landmasses and graticules from World Atlas TopoJSON, while white semi-transparent circles mark each incident’s coordinates. The data comes from a CSV of migrant incidents, processed in React with D3’s `csv` and `scaleSqrt` functions.

PPhronesis

94% match

Loading thumbnail…

Missing Migrants on a Map

This example visualizes the locations and magnitudes of missing migrant incidents on a world map, with circle size encoding the total number of dead and missing individuals. Using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, it renders landmasses, country borders, and graticules in SVG. Circles are positioned by projecting coordinate pairs and scaled with `d3.scaleSqrt`. The data is loaded from a CSV via `d3.csv`, while the world atlas comes from a TopoJSON file parsed with `topojson.feature` and `topojson.mesh`.

Aazharahmad0

94% match

Loading thumbnail…

Missing migrants on a map

This example visualizes the locations of missing migrants on a world map, with circle size encoding the total number of dead and missing per incident. Built with React and D3.v5, it renders a natural Earth projection using `geoNaturalEarth1` and `geoPath`, while `geoGraticule` draws graticule lines. Migration data is loaded from a CSV using `d3.csv` and the world atlas topology from `world-atlas` via `d3.json`, with `topojson` features generating land and interior boundaries. Circle radii are scaled using `d3.scaleSqrt` based on the maximum casualty count.

Rrajamrit-singh

94% match

Loading thumbnail…

Missing Migrants on a Map

A world map displays the locations of missing migrant incidents, with semi-transparent circles sized by the total number of dead and missing per event. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders landmasses, graticules, and country borders using `d3.geoPath`. Circle radii are scaled with a square-root scale `d3.scaleSqrt` based on the dataset from the Missing Migrants Project, loaded as CSV. The React app fetches world atlas TopoJSON and the CSV data through custom hooks.

KKevin McMorrow

94% match