Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sized Points on a Map

Public visualization

Viewing a saved revision (read-only)

bd05c6c4ced7499eb10c34584dcaccde

Sized Points on a Map

1 star1🌍 Public
LLaurentVuillon
Last edited Dec 24, 2019
Created on Dec 24, 2019

This example displays a world map with city points sized by population, using a square-root scale to encode population values as circle radii. The visualization combines geographic context from World Atlas TopoJSON data with city data from Simplemaps, rendering both through React and SVG. The code uses d3.geoNaturalEarth1 for projection, d3.geoPath for country boundaries and graticules, and d3.scaleSqrt for sizing, with translucent Cornsilk circles overlaid on dark landmasses and green borders.

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.