Skip to main content
SimilarExport ZIP
100%

Missing Migrants Map with React & D3

✓ Published1🌍 Public
MManon ROMAIN
Last edited Oct 23, 2021
Created on Oct 20, 2021

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.

AI-generated description

Loading Data with React & D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants Map & Hist with React & D3

This visualization combines a proportional-symbol world map with a time-series histogram to show the global distribution and monthly totals of dead and missing migrants. The map uses an Equal Earth projection with `d3.geoPath` and `topojson` world atlas data, sizing circles by the square-root scale of incident counts. The histogram bins incident dates into months using `d3.bin` and `d3.timeMonths`, summing deaths per bin via `d3.sum`. Both views render as SVG, built with React components and D3 v7, drawing from the Missing Migrants Project dataset.

MManon ROMAIN
93% match
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
92% match
Loading thumbnail…

Missing Migrants on a Map

This map visualizes missing migrant incidents worldwide, with each circle positioned at the incident’s coordinates and sized by the total number of dead and missing. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering landmasses, graticules, and interiors from the World Atlas TopoJSON. Circles scale with `scaleSqrt` based on the CSV data, while React manages state and rendering.

CCodeDuckie99
92% match
Loading thumbnail…

Missing Migrants map

This map visualizes missing migrant incidents worldwide, with circles sized proportionally to the total number of dead and missing individuals using a d3.scaleSqrt scale. Each circle is positioned at its recorded coordinates via a geoNaturalEarth1 projection and drawn with geoPath for landmasses, graticules, and country interiors from the world-atlas TopoJSON dataset. The React-based visualization uses D3 v7 to load CSV data containing location coordinates and casualty counts, rendering semi-transparent teal circles over a muted geographic backdrop.

Ddaneslutzky
92% match
Loading thumbnail…

Missing Migrants on a Map

This visualization maps the global distribution of missing migrants from 2014 to 2021, using a natural Earth projection rendered with `d3.geoNaturalEarth1` and `d3.geoPath`. Each circle represents a recorded incident, with its radius scaled proportionally to the total number of dead or missing via a square-root scale. The map overlays land polygons and country borders from the world-atlas TopoJSON dataset onto graticule lines. React manages the component hierarchy, while D3 loads the CSV data and handles geographic projections, all rendered as SVG elements with semi-transparent teal circles.

JJun Suzuki
92% match
Loading thumbnail…

Missing Migrants on a Map

A world map with semi-transparent blue circles marks the total dead and missing migrants at their recorded coordinates. The visualization uses a natural Earth projection via `d3.geoPath` to render landmasses and graticules, with each circle’s radius scaled by `d3.scaleSqrt` based on the data values. Data comes from the Missing Migrants Project CSV, loaded with `d3.csv`, while the map uses TopoJSON from world-atlas. React manages the component state, and SVG renders the final output.

Wwindwaver
92% match
Loading thumbnail…

Missing Migrants on a map

This map visualizes the global locations of missing migrants, with circles sized proportionally to the total number of dead and missing individuals at each coordinate. Built with React and D3 v5, it uses a geographic natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and interiors from TopoJSON world-atlas data. Circle radii are scaled using `scaleSqrt` based on the dataset’s values, with data loaded from a CSV via `csv`. The SVG output is styled with custom CSS for land, sphere, and city elements.

Ccynichole
92% 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
92% match