City sizes on a Map

100%

City sizes on a Map

✓ Published1🌍 Public

Last edited Jan 27, 2022

Created on Jan 26, 2022

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

AI-generated description

A world map showing country boundaries and city locations with populations of over 50 000

City data source: https://gist.github.com/curran/13d30e855d48cdd6f22acdf0afe27286

Spatial data source: https://unpkg.com/world-atlas@2.0.2/countries-50m.json

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. Circle radius encodes population magnitude using a square-root scale, making larger metropolitan areas visually prominent. The map renders country boundaries, graticules, and sphere outlines via d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while React manages the SVG markup. City data originates from Simplemaps, loaded through d3.csv, and geographical boundaries come from World Atlas TopoJSON, processed with topojson.feature and topojson.mesh.

MMari Roberts

93% match

Loading thumbnail…

Using Size

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude with area. The map renders landmasses, interiors, graticules, and the sphere via d3.geoNaturalEarth1 and d3.geoPath, while d3.scaleSqrt maps population values to circle radii up to 15 pixels. Data comes from a CSV of world cities loaded with d3.csv, and the map uses TopoJSON from world-atlas. React manages the SVG rendering, with circles styled semi-transparent teal.

NNikhil Reddy Manda

91% match

Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations exceeding 50,000 as semi-transparent circles sized proportionally to population using a square-root scale. The map uses a natural Earth projection, with country boundaries, interiors, and graticules rendered via d3.geoPath from TopoJSON world-atlas data. City coordinates are projected using d3.geoNaturalEarth1, with population data loaded from a Simplemaps CSV. The React component applies the size scale to each circle’s radius, creating an immediate visual comparison of urban population distribution across continents.

FFelipe Oyarzún Ramos

91% match

Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering sized circles for cities with populations exceeding 50,000. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw countries, graticules, and interiors from World Atlas TopoJSON data. City positions are projected from latitude and longitude coordinates, with circle radii scaled by population using `d3.scaleSqrt`. The React component fetches city data from a Simplemaps World Cities CSV.

CClement Yan

91% match

Loading thumbnail…

Sized Points on a map

This visualization displays global cities as sized points on a natural Earth projection map, with circle radii scaled proportionally to population using d3.scaleSqrt. The map renders landmasses, graticules, and country interiors as SVG paths generated via d3.geoPath, while city positions are projected from longitude and latitude coordinates. The React component loads world atlas TopoJSON and city CSV data asynchronously, then applies semi-transparent teal circles to highlight population distribution across continents.

SSong Tao Chen

90% match

Loading thumbnail…

Points on a Map (with Size)

This visualization shows world cities as semi-transparent circles on a natural Earth projection map, with circle size encoding each city's population using a square root scale. The map displays land masses, graticules, and country interiors rendered via `d3.geoPath`. City positions are projected from coordinates, while population data loads from a CSV using `d3.csv`. The React component structure uses hooks like `useState` and `useEffect` to fetch and manage both TopoJSON world atlas data and city data.

WWaseem Medhat

90% match

Loading thumbnail…

Cities of the World

Cities of the World uses a natural Earth projection to display global population data as proportional circles. D3’s geoNaturalEarth1 and geoPath render landmasses, graticules, and sphere outlines, while a sqrt scale maps city populations to circle radii. The visualization loads world atlas topology from world-atlas and city CSV data, overlaying semi-transparent dots atop a muted map. React manages the SVG rendering, with d3.v5 providing the underlying geospatial and scaling utilities.

Sstevensmithj

90% match

Loading thumbnail…

(Fork) Sized Points on a Map

This example displays a world map with circles sized according to city population, showing cities with over 50,000 residents. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features with `d3.geoPath`, including graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps’ World Cities Database, and circle radii are scaled using `d3.scaleSqrt`. The React component structure, SVG rendering, and D3 v5 APIs are used to create the map.

WWaseem Medhat

90% match