Fork of Sized Points on a Map

100%

Fork of Sized Points on a Map

✓ Published0🌍 Public

Last edited Aug 6, 2023

Created on Aug 6, 2023

This example shows a world map of migration incidents, with semi-transparent circles sized by the total number of dead and missing people at each location. The map uses a natural Earth projection with graticules and country boundaries drawn via `geoPath` and `geoGraticule` from D3 v5. Point sizes are scaled by a square-root scale (`scaleSqrt`) mapping the data attribute to a maximum radius of 15 pixels. The visualization loads data from a CSV of Missing Migrants Global data and renders all marks as SVG circles over the projected coordinates in a React component.

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…

Fork of Sized Points on a Map

This visualization combines a world map with a time-series histogram to show the geographic distribution and monthly totals of missing migrants. The map uses a natural Earth projection with `d3.geoPath` to render country boundaries and graticules, while circles sized with `d3.scaleSqrt` represent the number of dead and missing per location. The accompanying histogram, built with `d3.histogram` and `scaleTime`, aggregates counts by month and includes a brushable timeline that filters the map's points. Data comes from the Missing Migrants Project dataset, with geography from the World Atlas TopoJSON.

Jjchen6912

89% match

Loading thumbnail…

Fork of Sized Points on a Map

This example displays a world map with circles sized by population for cities exceeding 50,000 residents. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and country interiors, while circles are positioned with the projection and scaled using d3.scaleSqrt. City data comes from a CSV loaded via d3.csv, and country boundaries derive from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. The React component structure manages state with hooks and renders SVG elements.

Wwaqcas

87% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized using a square-root scale that maps population to radius. The map includes natural Earth landmasses with graticules and country interiors, styled in muted grays. The visualization is built with React, using d3's `geoNaturalEarth1` projection and `geoPath` for rendering, while city data comes from Simplemaps and country boundaries from the World Atlas TopoJSON.

Ddr-rompecabezas

87% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized by population using a square-root scale. The visualization uses React to render SVG marks, with d3.geoNaturalEarth1 and d3.geoPath for the map projection and country boundaries. City data comes from the Simplemaps World Cities Database, and the map includes graticules and interior borders from World Atlas TopoJSON, styled with light gray fills and strokes.

Bbigstonecompany

86% match

Loading thumbnail…

Fork of Missing Migrants on a Map

A world map displays individual migration events from the Missing Migrants Dataset, with each circle sized by the square-root-scaled count of dead and missing people at that location. D3’s `geoNaturalEarth1` projection and `geoPath` render the sphere, graticules, land, and country interiors from World Atlas TopoJSON, while React components manage the SVG marks. Data loads via D3’s `csv` and `json`, and circle radii use `scaleSqrt` with a maximum radius of 15 pixels.

MMilena Belianovich Holtman

86% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles sized proportionally to population using a square-root scale. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath, graticules, and country boundaries from World Atlas TopoJSON, with city data from a Simplemaps CSV. React manages state and rendering, while d3.scaleSqrt maps population values to circle radii. The SVG output includes styled landmasses, sphere background, and interior borders.

VVishwanath Hegde

86% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000, sized proportionally to their population using a square root scale. The visualization renders a natural Earth projection with graticules, landmasses, and country borders in light gray tones. React manages the component structure while D3 v5 handles geographic projection via `geoNaturalEarth1`, path generation with `geoPath`, and CSV data loading from the Simplemaps World Cities Database. Semi-transparent teal circles overlay each city location, with their radii scaled to population values.

JJean David

86% match

Loading thumbnail…

Fork of Points on a Map

This interactive visualization plots missing migrant incidents from a 2019 global dataset on an SVG world map. The map uses d3.geoNaturalEarth1, d3.geoPath, and topojson to render landmasses, graticules, and interiors, while scaled circles (d3.scaleSqrt) encode total deaths and missing persons per location. The React-based bubble map displays the raw geographic distribution, with a temporal histogram component available for analyzing casualty counts by reported date. The visualization is built with d3.v5 and React, loading data via d3.csv and world atlas GeoJSON.

AAnthony Zornig

86% match