Skip to main content
SimilarExport ZIP
100%

Missing Migrants Bubble Map, React & D3 (codeAlong)

✓ Published2🌍 Public
Ttomahawk-jupiter
Last edited Jun 11, 2021
Created on Jun 11, 2021

This world map visualizes missing migrant incidents from a 2019 subset dataset, with bubble size scaled by the total number of dead and missing per location. Using React and D3 v6, the example loads world-atlas TopoJSON, converts it to GeoJSON with topojson, and renders land, graticules, and country borders via d3.geoPath and geoNaturalEarth1 projection. Migrant data from CSV is positioned by reversing coordinates, with bubble radii set by a d3.scaleSqrt.

AI-generated description

Loading topojson and convert in memory to geojson, then render to make a map.

Add points to the map.

tutorial Vid 8:47

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants on a Map

A world map uses semicircular bubbles to show the total number of dead and missing migrants by location, based on a subset of the Missing Migrants Global dataset. The visualization renders land, interiors, graticules, and a sphere using `d3.geoNaturalEarth1` and `d3.geoPath`, while bubble sizes are scaled with `d3.scaleSqrt`. React components manage the map and data loading, with CSV parsing via `d3.csv` and TopoJSON world atlas features via `topojson.feature`.

RRMartins11
90% match
Loading thumbnail…

Missing Migrants on a Map

This visualization maps missing migrant incidents worldwide, with circles sized by the total number of dead and missing individuals at each location. The map uses a natural Earth projection with graticules, country boundaries, and a light color scheme. The React app loads CSV data and world-atlas TopoJSON, then renders SVG marks via `d3.geoPath` and a square-root scale for circle radii. The underlying data is drawn from the Missing Migrant Project dataset.

Tthomasjungcoe
89% match
Loading thumbnail…

Missing Migrants Map with React & D3

This interactive map visualizes reported incidents of missing migrants worldwide. Blue circles, sized by the total number of dead and missing using a square-root scale, are projected onto an Equal Earth projection using `d3.geoEqualEarth` and `d3.geoPath`. The React-based application loads data from a CSV and world atlas TopoJSON, rendering the map as SVG. It currently includes a placeholder date histogram, while the map marks are generated by a component that draws graticules, land masses, and the proportional circles.

MManon ROMAIN
89% match
Loading thumbnail…

Missing Migrants Map

This interactive visualization displays missing migrant incidents worldwide as a choropleth bubble map, with circle size representing total dead and missing individuals. Users can select from six map projections via a dropdown menu, including Aitoff, August, and Orthographic. A linked time-series histogram below enables date range brushing, filtering the map’s displayed bubbles. Built with React and D3 v6, it uses d3.geoPath for geographic rendering, d3.bin for temporal aggregation, and d3.brushX for interactive filtering, sourcing data from the Missing Migrants Dataset and world boundaries from World Atlas TopoJSON.

Llaurajchang
88% 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
88% match
Loading thumbnail…

Missing Migrants Dataset - Map

A world map uses semi-transparent circles to show the geographic distribution of missing migrant incidents, with circle size scaled by the total dead and missing count via a square-root scale. The visualization is rendered in React with SVG, using d3.geoNaturalEarth1 for projection, d3.geoPath for map features, and d3.geoGraticule for grid lines. Data comes from a CSV of missing migrant records, while country boundaries come from the world-atlas TopoJSON dataset.

KK3zter
88% match
Loading thumbnail…

Missing Migrants a Map

This visualization combines a bubble map and a date histogram to show the locations and timing of missing migrant incidents. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render world landmasses, graticules, and country borders, with circles scaled by the square root of the total dead and missing per location. The histogram bins the data by month using `d3.bin` and `d3.timeMonths`. Both views use React components and D3 scales, with data from the Missing Migrants Project and country boundaries from World Atlas TopoJSON.

Ttharuta
88% match
Loading thumbnail…

dv2020-ep40-viz42 - missing migrants bubble map

A bubble map visualizes global migration incidents from the Missing Migrants Dataset, with circle size encoding the total dead and missing per location. The visualization uses a React component structure with D3’s `geoNaturalEarth1` projection and `geoPath` to render country boundaries, graticules, and shorelines from TopoJSON world-atlas data. A `scaleSqrt` maps data values to circle radii, while SVG circles are positioned via the projection coordinates. Interactive updates are handled through React state and hooks, with data loaded asynchronously via D3’s `csv` and `json` functions.

Zzach b.
88% match