Mapping Part 3: Cities and Pop.

100%

Mapping Part 3: Cities and Pop.

✓ Published1🌍 Public

Last edited Oct 27, 2022

Created on Oct 27, 2022

This example visualizes the populations of cities on a world map, using circles sized proportionally to population data. It shows a geographic context with landmasses, graticules, and sphere outlines, layered with semi-transparent teal points. Built with React and d3.v5, the map uses `geoNaturalEarth1` for projection and `geoPath` for rendering. City data is loaded from a CSV, while geographic boundaries come from the world-atlas TopoJSON dataset. Circle radii are scaled using `scaleSqrt`.

AI-generated description

A world Map using the World Map Topojson Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

3. Sized Points of Populated Cities on a Map

This example displays cities with populations over 50,000 as sized points on a world map, using circle radius to encode population magnitude. The visualization uses `geoNaturalEarth1` and `geoPath` from D3 v5 to project geographic coordinates, while `scaleSqrt` maps population values to radii. City data comes from Simplemaps’ World Cities Database, and country boundaries from World Atlas TopoJSON, rendered via React with SVG. Graticules and land interiors provide spatial context, with semi-transparent teal circles overlapping to reveal density patterns.

PPrashish Paudel

88% match

Loading thumbnail…

Mapping : Part 2 - Cities

This example visualizes worldwide cities as semi-transparent teal dots layered over a natural Earth projection map. It uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and interior boundaries from the world-atlas TopoJSON dataset, while city coordinates are plotted via d3.csv from a cleaned world cities dataset. The React component fetches both data sources asynchronously using useEffect, then projects each city’s longitude and latitude into SVG circles with fixed pixel radii.

Zzeeeeem

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

87% match

Loading thumbnail…

Untitled

This example shows a world map with cities whose populations exceed 50,000, rendered as semi-transparent circles sized by the square root of their population. The map includes landmasses, country interiors, graticules, and a background sphere, all drawn using `d3.geoPath` with the Natural Earth projection (`geoNaturalEarth1`). City data comes from a Simplemaps CSV loaded via `d3.csv`, while country boundaries are derived from World Atlas TopoJSON processed with `topojson.feature` and `mesh`. The visualization is built with React and D3 v4, using `scaleSqrt` to map population values to circle radii.

Ssdilbaz

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

86% match

Loading thumbnail…

World Map

This example visualizes global population distribution by rendering a world map with cities represented as scaled circles. The map displays land masses, graticules, and country borders, while city markers use a square-root scale to encode population size. The visualization is built with React and D3 v5, using `geoNaturalEarth1` projection via `d3.geoPath` and topojson data from the world-atlas package. Population data comes from a CSV of world cities, with React hooks managing asynchronous data loading.

MMatias Conde

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

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

86% match