Skip to main content
SimilarExport ZIP
100%

React world map + migrant death/missing points

✓ Published2🌍 Public
SSuperShreejit
Last edited May 16, 2022
Created on May 16, 2022

A React-based world map displays migrant deaths and missing persons as semi-transparent circles, sized using a square-root scale to encode the reported total per location. The natural Earth projection renders geographic landmasses and graticules via `d3.geoPath`, with topojson world-atlas data providing country boundaries. Circle positions derive from parsed CSV coordinates, while hover tooltips reveal the reported date and death count. The visualization uses `d3.scaleSqrt` for radius mapping and processes data through custom React hooks for asynchronous loading of both map and migrant datasets.

AI-generated description

A react World Map chart + cities of world map: topo-json data and City: data

MIT Licensed

Similar vizzes

Loading thumbnail…

React world map + migrant death/missing points + histogram

This visualization combines a world map with a histogram of migrant deaths and missing persons. The map uses a D3 natural Earth projection with SVG paths for land, borders, and graticules, overlaid with circles scaled by the square root of the reported deaths. Below, a time-based histogram bins monthly totals using d3.bin and displays them as rectangular bars. Data is loaded from CSV and TopoJSON sources, rendered with React, with tooltips showing counts and dates.

SSuperShreejit
93% match
Loading thumbnail…

React world map + migrant death/missing points + histogram with brush

This React visualization combines a natural Earth projection world map with migrant death and missing person data, plotted as scaled circles whose radius encodes the total count. A linked histogram below displays the monthly distribution of deaths, featuring a brush filter that dynamically updates the map’s displayed points based on the selected date range. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoGraticule, d3.scaleSqrt, d3.bin, d3.brushX, and d3.timeMonths, rendering SVG elements with topojson world atlas data and CSV migrant records.

SSuperShreejit
93% match
Loading thumbnail…

Migrant Map

A world map visualizes missing migrant incidents, with semi-transparent purple circles sized by the total number of dead and missing at each location. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, country interiors, and graticules from TopoJSON world atlas data. Circle radii are scaled with `d3.scaleSqrt` based on data from a CSV of missing migrants. The React-based implementation loads the data and map topology asynchronously using hooks before rendering SVG circles over the geographic base.

FFonda Irena Santoso
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…

Fork of World Map migrants

This visualization displays a world map with semi-transparent circles marking locations of missing migrants, sized proportionally to the total number of dead and missing individuals. Using React, d3.geoNaturalEarth1, and d3.geoPath, it renders land boundaries, interiors, graticules, and a sphere. Circle radii are scaled with d3.scaleSqrt based on data from a CSV dataset, which is loaded via d3.csv and combined with World Atlas TopoJSON for geographic features.

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

40) Missing Migrants on a Map

This example visualizes missing migrants worldwide, with proportional circles indicating the total dead and missing at each incident location. The map uses an equirectangular projection rendered with d3.geoNaturalEarth1 and d3.geoPath, layered with graticules, land masses, and country interiors. React manages the component lifecycle, while d3.scaleSqrt maps the migrant counts to circle radii. Data comes from a CSV of missing migrant incidents, and world geography is loaded from the world-atlas TopoJSON dataset.

Llefat92
88% match
Loading thumbnail…

Missing Migrants on a Map

This visualization displays a world map with circles representing missing migrants, where circle size corresponds to the total number of dead and missing individuals. Using React to render SVG marks, the code employs the D3 library's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw the sphere, graticules, landmasses, and interiors. Data is loaded from a CSV file containing migrant incident coordinates. Circle radii are determined via a square-root scale mapping the “Total Dead and Missing” values.

Nnpelliccia
87% match