World Map with Cities Size

100%

World Map with Cities Size

✓ Published1🌍 Public

Last edited Jun 6, 2021

Created on Jun 6, 2021

This example presents a world map with circles sized proportionally to city populations, using an equirectangular projection. The visualization layers country landmasses, interior boundaries, and graticules from World Atlas TopoJSON data, with city positions plotted from latitude and longitude coordinates. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and React hooks to load CSV city data and TopoJSON topology. All marks render as SVG elements within a React component structure, with styling applied through CSS classes.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with Cities

This visualization displays a world map with cities, where each city is represented by a circle scaled proportionally to its population. Using D3’s geoNaturalEarth1 projection and geoPath, the map renders landmasses, graticules, and country interiors from TopoJSON data, while city locations are projected from latitude and longitude coordinates. The React component employs the useWorldAtlas and useCities custom hooks to load data via d3.json and d3.csv, with d3.scaleSqrt mapping population to circle radius sizes.

JJohn Huang

92% match

Loading thumbnail…

World Map

This visualization displays a world map with the population of major cities represented by proportional circles. Circles are sized using a square root scale based on each city’s population, overlaid on a gray landmass with graticules and interior borders. Built with React and D3 v5, it uses `geoEqualEarth`, `geoPath`, and `geoGraticule` for the map projection, while city data comes from a CSV file and world geography from TopoJSON.

33ssalunke

90% match

Loading thumbnail…

World Map with cities

A world map visualization displays cities as semi-transparent circles, with circle area proportional to each city’s population. The map uses the Natural Earth projection via D3’s `geoNaturalEarth1` and `geoPath`, rendering graticules, land masses, and interiors from TopoJSON data. City coordinates and populations come from a CSV file, and the D3 `scaleSqrt` function maps population values to a maximum radius of 20 pixels.

CCarlos Caballero

90% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using data from the Simplemaps World Cities Database. The map renders geographic features with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while country boundaries load from World Atlas TopoJSON. City points are placed via projection coordinates and scaled with d3.scaleSqrt, all built within a React component using SVG. The visualization includes graticules and styled land, sphere, and interior paths for a polished cartographic look.

GGustavoRiveraM

90% match

Loading thumbnail…

World Map

A world map visualization displays global cities as semi-transparent circles sized by population, overlaid on a natural Earth projection. The map renders landmasses, country interiors, and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`. City coordinates and population data load via `d3.csv` from a world cities dataset, while geographic boundaries come from TopoJSON world-atlas data. React manages the asynchronous data loading and SVG rendering, with a square-root scale mapping population values to circle radii.

Uuplusv

89% match

Loading thumbnail…

City sizes on a Map

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.

LLove Wessman

89% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented by a semi-transparent circle whose radius encodes population size via a square-root scale. The visualization uses React for rendering SVG elements, with d3’s geoNaturalEarth1 projection and geoPath to draw land boundaries, country interiors, graticules, and the sphere. City coordinates are projected from latitude and longitude, while data comes from a CSV sourced from Simplemaps’ World Cities Database, processed through d3.csv. Topology for country boundaries is loaded via d3.json from World Atlas TopoJSON.

JJunyanL

89% match

Loading thumbnail…

Cities on World Map

This example displays a world map with city populations overlaid as semi-transparent circles. Country boundaries appear as gray landmasses with interior borders, alongside graticules and a sphere outline. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to render the map, with a sqrt scale mapping city population to circle radius. Data comes from a CSV of world cities and TopoJSON land geometry, rendered as SVG within a React framework.

CCatalina Vajiac

89% match