3. Sized Points of Populated Cities on a Map

100%

3. Sized Points of Populated Cities on a Map

✓ Published1🌍 Public

Last edited Apr 2, 2021

Created on Apr 2, 2021

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.

AI-generated description

A display of cities having Population larger than 50k in world map according to size. City data from Simplemaps: World Cities Database. Country boundaries from World Atlas TopoJSON

MIT Licensed

Similar vizzes

Loading thumbnail…

Rough of 3. Sized Points of Populated Cities on a Map

This visualization shows populated cities (population over 50,000) as sized points on a world map, using the natural Earth projection. City positions are projected from latitude and longitude, with circle radius scaled by the square root of population. The map displays graticules, landmasses, and country interior boundaries. It uses D3 v5's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map rendering, React for the component structure, and SVG for drawing. City data comes from the Simplemaps World Cities Database, while country boundaries use the World Atlas TopoJSON.

PPrashish Paudel

94% match

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations exceeding 50,000 as sized points on a world map, using the natural Earth projection. Country boundaries and graticules appear beneath the points. The visualization uses React with D3 v5, including `geoNaturalEarth1`, `geoPath`, and `geoGraticule`. City population data is loaded from a CSV via `d3.csv`, while land and interior boundaries come from World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`. Circle radii are scaled by population values.

Fftjyangf

91% match

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations over 50,000 as sized points on a world map, using a square-root scale to encode population by circle radius. The map renders with the `geoNaturalEarth1` projection and `geoPath` in React, showing graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps via CSV, loaded with `d3.csv`. Circles are drawn with SVG, styled with a teal fill and 0.3 opacity.

Eerahma

91% match

Loading thumbnail…

30. Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points sized by population using a square-root scale. The rendering combines country landmasses, interiors, and graticules from the World Atlas TopoJSON data, projected via `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. City coordinates are projected and plotted as SVG circles whose radii derive from the population values loaded from a Simplemaps CSV.

PPrashish Paudel

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 a world map with cities of populations exceeding 50,000, using sized points to represent population magnitude. Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` render landmasses, graticules, and country interiors from TopoJSON data. Circles are positioned through projection of latitude and longitude coordinates, with radius determined by a square-root scale (`d3.scaleSqrt`) mapping population values to a maximum radius of 15 pixels. The React-based implementation loads city data from a CSV using `d3.csv` and renders all elements as SVG marks.

JJCarpenter-WPI

91% match

Loading thumbnail…

Sized Points on a Map

This visualization displays world cities with populations exceeding 50,000 as sized points on a natural Earth projection. Circle radii encode population using a square root scale, with data sourced from the Simplemaps World Cities Database. The map renders via React and SVG, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw country boundaries and graticules, while TopoJSON provides land and interior mesh geometry.

Kknut_ivar_osvoll@hotmail.com

91% match

Loading thumbnail…

Sized Points on a Map

This example visualizes global cities with populations over 50,000 using sized points on a natural Earth projection. City locations and population data come from a Simplemaps world cities CSV, while country boundaries are rendered from World Atlas TopoJSON. The React app uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw graticules, landmasses, and interiors as SVG paths, then scales circle radii with `d3.scaleSqrt` based on population. Semi-transparent circles encode population density, creating a clear global distribution pattern.

TTexGal

91% match