Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
Mmahmud-tantoush
Last edited Feb 27, 2020
Created on Feb 27, 2020

A natural Earth projection displays world cities with populations over 50,000 as semi-transparent teal circles, sized by population using a square root scale that caps the radius at 15 pixels. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land masses, country borders, and graticules, while React components load city data from a Simplemaps CSV and world topology from World Atlas Topojson. Circle positions are computed by projecting each city’s longitude and latitude, with SVG used for all rendering.

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 exceeding 50,000 as semi-transparent teal circles, sized proportionally to population using a square root scale. The visualization renders geographic context—landmasses, country interiors, graticules, and a sphere—using d3.geoNaturalEarth1 and d3.geoPath, with city data loaded via d3.csv from the Simplemaps World Cities Database and country boundaries from TopoJSON. React manages the component state, while d3-scale and d3-geo handle projection and sizing.

WWhitney Hung
96% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal points, sized proportionally to population using a square-root scale. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and sphere geometry from World Atlas TopoJSON, while city coordinates are projected from a Simplemaps CSV. React components manage the asynchronous data loading via d3.csv and d3.json, with SVG circles positioned by the projection and radii mapped from the scale.

支支良
95% 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
95% 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
95% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles sized by population using a square-root scale. The map renders via SVG with a natural Earth projection from d3.geoNaturalEarth1, with country boundaries, land masses, and graticules drawn using d3.geoPath. React manages the component state, fetching city data from a CSV via d3.csv and world topology from TopoJSON using d3.json, with the feature and mesh APIs extracting land and interior boundaries.

Mmoinamazon123
95% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities as semi-transparent teal circles sized by population using a square-root scale. The map includes land areas, country borders, graticules, and a natural Earth projection. Built with React and D3 v5, it projects geographic coordinates using `geoNaturalEarth1` and `geoPath`, draws features from World Atlas TopoJSON, and loads city data from a CSV file. Circle radii are mapped from population values via `scaleSqrt`.

Aaakarsh satyam
95% 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
95% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized proportionally using a square-root scale. The visualization layers Natural Earth landmasses, graticules, and a sphere outline, rendered via `d3.geoPath` with a `geoNaturalEarth1` projection. City coordinates and population data come from a CSV fetched using `d3.csv`, while country boundaries use TopoJSON converted with the `feature` API. React manages component state, with the SVG marks generated through the `Marks` component, combining `d3.scaleSqrt` for radius scaling and `d3.max` for domain calculation.

BBizmundo
95% match