Cities on World Map

100%

Cities on World Map

✓ Published2🌍 Public

Last edited Mar 3, 2022

Created on Mar 3, 2022

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.

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…

Cities on the World Map

This visualization displays cities as semi-transparent circles on a natural Earth projection, with circle size encoding population using a square-root scale. It renders world land masses, graticules, and country interiors via `geoPath` and `geoNaturalEarth1`, while city positions are projected from latitude and longitude coordinates. Data comes from a CSV of world cities loaded with `d3.csv`, and the world atlas TopoJSON is parsed using `feature` and `mesh` from topojson. React manages the component state, with D3 version 7 providing all geographic and scaling utilities.

KKolezhannochka

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

93% match

Loading thumbnail…

World Map

This visualization displays a natural Earth projection world map with cities represented as semi-transparent circles sized by population. The map renders land masses in light gray with graticules and country borders overlaid. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for geographic projections, while `scaleSqrt` maps population data to circle radii. City coordinates and populations come from a CSV of world cities, and country boundaries derive from TopoJSON world-atlas data.

Ssophievanderhorst

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

91% match

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

91% match

Loading thumbnail…

Points on World Map

This example displays global city populations as semi-transparent circles overlaid on a world map. The map uses a natural Earth projection rendered with D3’s `geoNaturalEarth1` and `geoPath`, with graticule and land/interior outlines. The `topojson` library processes world-atlas boundaries. City coordinates and populations come from a CSV, scaled by a square-root scale to a maximum radius of 10 pixels. The visualization is built in React, using hooks to asynchronously fetch data and render the SVG scene.

SSamuel Oseh

91% match

Loading thumbnail…

World map

This world map visualizes global city populations, with semi-transparent circles sized by population using a square-root scale. A Natural Earth projection draws the landmasses, graticule, and country borders via D3's `geoNaturalEarth1` and `geoPath`, while city coordinates are projected and rendered as SVG circles. The map loads geographic data from World Atlas TopoJSON and population data from a CSV, using `topojson.feature` and `topojson.mesh` to construct the land and interior boundaries.

TTakuya Kitazawa

91% match

Loading thumbnail…

world map w/ cities

This visualization displays a world map with cities whose populations exceed 50,000, using a natural Earth projection that spins to reveal different hemispheres. The map incorporates country boundaries, interior borders, graticules, and geographic lines, with land areas filled by an animated pattern. City markers are sized by population using a square-root scale, while country boundaries include tooltips on hover. The project uses React with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, sourcing city data from Simplemaps and country shapes from World Atlas TopoJSON, all rendered as SVG elements.

Zzach b.

90% match