Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPrashish Paudel
Last edited Apr 2, 2021
Created on Apr 2, 2021

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.

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…

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
94% match
Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Ssophburke
91% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented as a circle whose area encodes population using a square-root scale. The visualization uses d3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render country boundaries and graticules, while React manages the SVG scene. City coordinates and populations come from a Simplemaps World Cities CSV, and country boundaries derive from the World Atlas TopoJSON, styled with subtle gray fills and strokes.

VVineel Gannu
91% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, with radius encoding population magnitude via a square-root scale. The visualization uses a Natural Earth projection and geo paths from d3.geoPath to render land, graticules, and country boundaries from World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with data sourced from the Simplemaps World Cities Database. The React-based SVG rendering leverages D3 v5 for geographic and scaling operations, presenting city population distributions across the globe.

Mmtabaka
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 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 visualization displays a world map with points sized proportionally to city populations, showing cities with over 50,000 residents. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for rendering country boundaries and graticules. City coordinates and populations come from a CSV loaded from Simplemaps, while country shapes use TopoJSON from World Atlas. The point radii are scaled with d3.scaleSqrt, and React manages component rendering.

KKhalid
91% match
Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with points sized by city population, using data from the Simplemaps World Cities Database for cities with over 50,000 residents. D3’s `geoNaturalEarth1` projection and `geoPath` render the sphere, graticules, and land boundaries from the World Atlas TopoJSON. A `scaleSqrt` maps population values to circle radii up to 15 pixels, while React composes the SVG elements. The semi-transparent teal circles overlay a light gray landmass, with country borders and graticules providing geographic context.

Aankita1mit
90% match