Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Oct 9, 2023

Created on Oct 9, 2023

A world map displays cities with populations over 50,000, with each city shown as a semi-transparent circle whose radius is proportional to population via a square-root scale. The map uses a natural Earth projection and includes graticules, country land masses, and interior boundaries. The visualization is built with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` for rendering the map, `d3.scaleSqrt` for the circle sizes, and data loaded from a Simplemaps world cities CSV.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, sized proportionally to their population using a square-root scale. The visualization uses React for the user interface and D3 v5’s `geoNaturalEarth1` projection with `geoPath` to render country boundaries, graticules, and a sphere backdrop. City data comes from Simplemaps, while country shapes come from World Atlas TopoJSON. Circles are positioned via the projection and sized using `scaleSqrt` from D3, with opacity set through CSS.

Ssarabaghery76

97% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, using circles sized by a square-root scale to represent population magnitude. The visualization employs a Natural Earth projection with graticules and country boundaries, rendered as SVG paths. City data comes from the Simplemaps World Cities Database, loaded via `d3.csv`, while country boundaries use TopoJSON from the World Atlas. The React app uses `d3.geoPath` for map geometry and `scaleSqrt` for circle radii, with semi-transparent teal circles overlaid on a light gray landmass.

EEric Ho

97% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, with circle size scaled proportionally to population using a square-root scale. The visualization renders geographic boundaries, graticules, and a sphere outline via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` within a React component using SVG. City population data comes from the Simplemaps World Cities Database, while country shapes derive from TopoJSON world-atlas data, processed with topojson’s `feature` and `mesh` functions.

Mmoinamazon123

96% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using circle size to encode population magnitude. The visualization renders geographic context via d3.geoNaturalEarth1 projection and d3.geoPath for landmasses, graticules, and country boundaries. City positions are projected from latitude and longitude coordinates, with circle radii scaled by a d3.scaleSqrt function representing population values. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON, while React components manage the SVG rendering.

Nnkohdatavis

96% match

Loading thumbnail…

Sized Points on a Map

Nnkohdatavis

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

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

96% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, where the area of each teal point is proportional to city population via a square-root scale. The map includes landmasses, country boundaries, and graticules, all rendered as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from the Simplemaps World Cities Database, loaded with `d3.csv` in React. Point sizes are computed with `d3.scaleSqrt`, with circles rendered at projected coordinates from `d3.geoPath`.

Llukastieber

96% match