Combined Migrants on a Map

100%

Combined Migrants on a Map

✓ Published0🌍 Public

Last edited Jan 13, 2023

Created on Jan 13, 2023

This example visualizes global migrant deaths by plotting circles on a natural Earth projection map. Each circle’s radius is scaled to the reported number of fatalities, using a square-root scale for proportional sizing. The map displays landmasses, graticules, and country interiors via `d3.geoPath` and `d3.geoNaturalEarth1`, while React components render SVG circles and axes. Data is loaded from a CSV file, and the world atlas comes from TopoJSON, with styling controlled by CSS classes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter. css named colors

scatter plot test

MIT Licensed

Similar vizzes

Loading thumbnail…

Migrants on a Map

This visualization displays migrant deaths as proportional circles on a natural Earth projection map. The data, sourced from a CSV file containing coordinates and death counts, is plotted using d3.scaleSqrt to size each circle according to the number of fatalities. The map is rendered with React and SVG elements, utilizing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, with d3.geoGraticule adding grid lines. The world atlas features come from TopoJSON, and the circles are semi-transparent green to show overlapping incidents.

Ww.fukuyama@gmail.com

94% match

Loading thumbnail…

Combined Migrants on a Map

A world map displays the locations of migrant deaths, with green circles scaled by the number of deceased through d3.scaleSqrt. A date histogram below aggregates monthly death totals using d3.bin and d3.timeMonths, with bars drawn via d3.scaleLinear and d3.scaleTime. The visualization renders with React and SVG, using d3.geoNaturalEarth1 and d3.geoPath for the map, and loads data from a CSV file containing coordinates and reported dates.

Ww.fukuyama@gmail.com

90% match

Loading thumbnail…

migrant data on a map

This visualization displays global migrant fatalities using a world map. Each circle represents a data point, with its radius scaled to the "Total Dead and Missing" count via a square-root scale. The map includes landmasses, graticules, and country boundaries. The code uses d3.geoPath and d3.geoNaturalEarth1 for the projection, React for the interface, and imports CSV data through the d3.csv function. SVG circles are rendered with adjustable opacity, and the overall design uses a clean, light aesthetic.

BBlake McCarty

90% match

Loading thumbnail…

Migrant Dataset with Multiple Views

This visualization displays global migrant deaths and disappearances using a natural Earth projection. Circles, sized with a square-root scale according to the "Total Dead and Missing" value, are projected onto the map via `d3.geoNaturalEarth1` and `d3.geoPath`. The world atlas, including landmasses and graticules, is rendered from TopoJSON using the `topojson` library, with data loaded from a CSV file. React manages the SVG output, combining geospatial context with proportional point symbols to reveal the geographic distribution of migrant fatalities.

SSam Hege

90% match

Loading thumbnail…

Missing Migrants On A Map

This example visualizes the global scale of migrant deaths and disappearances using a natural Earth projection. Sized circles, colored in a translucent blue, are positioned at the recorded coordinates of each incident, with the circle’s area encoding the total number of dead and missing individuals. The map is rendered as an SVG using `d3.geoPath` for landmasses and graticules, which are displayed atop a light gray sphere. Data is loaded from a CSV file containing global figures, and the circle sizes are scaled using `d3.scaleSqrt`, all within a React application that fetches the world atlas topology via `topojson`.

JJoe Hutchins

89% match

Loading thumbnail…

Missing Migrants on a Map

This visualization displays global migrant deaths and disappearances as circles on a natural Earth projection map. Dot size encodes the total dead and missing per incident location, overlaid on graticules and landmasses from a TopoJSON world atlas. React manages the component tree, while D3’s `geoPath`, `geoNaturalEarth1`, and `geoGraticule` handle projection and rendering. A CSV dataset supplies coordinates and casualty figures, with mark radius scaled by `d3.scaleSqrt` for proportional visual encoding.

PPeter Krevenets

88% match

Loading thumbnail…

Migrant Deaths

This interactive visualization maps global migrant deaths and missing persons over time. It combines a natural Earth projection world map with proportional circles, sized by the total dead and missing, and a linked time-series histogram that filters the map via a brush. The D3 libraries `geoNaturalEarth1`, `geoPath`, and `geoGraticule` render the map, while `scaleSqrt` and `scaleTime` manage the encodings. Built with React, it uses `useMemo` for performance and loads data from a CSV of migration incidents and a World Atlas TopoJSON.

RRitik Raj

88% 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

87% match