Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Nov 29, 2020

Created on Nov 29, 2020

This example visualizes global population distribution by rendering points for cities over 50,000 inhabitants on a Natural Earth projection, with point radius scaled using d3.scaleSqrt to reflect population. The map is drawn in SVG using d3.geoNaturalEarth1, d3.geoPath, and graticules generated by d3.geoGraticule, while country boundaries and interiors come from World Atlas TopoJSON. City data is sourced from Simplemaps’ World Cities Database, loaded via d3.csv. Semi-transparent teal circles emphasize densely populated regions, with styling handled through CSS.

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

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

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

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

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

93% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using sized points to encode population via a d3.scaleSqrt square-root scale. The visualization renders a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with graticules and country boundaries from World Atlas TopoJSON. City data from Simplemaps is plotted as semi-transparent circles. The React-based code loads TopoJSON and CSV data asynchronously, then applies d3.geoPath to project coordinates and d3.scaleSqrt to determine circle radii.

Aakp21

93% match

Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. Circle radius encodes population magnitude using a square-root scale, making larger metropolitan areas visually prominent. The map renders country boundaries, graticules, and sphere outlines via d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while React manages the SVG markup. City data originates from Simplemaps, loaded through d3.csv, and geographical boundaries come from World Atlas TopoJSON, processed with topojson.feature and topojson.mesh.

MMari Roberts

93% match

Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering cities with over 50,000 inhabitants as semi-transparent circles, sized with a square-root scale to reduce visual disparity. The map uses an equal-area natural Earth projection with graticules and political interiors drawn from the World Atlas TopoJSON. The React app uses `d3.geoPath` for geographic features and `d3.scaleSqrt` for proportional sizing, with city data sourced from the Simplemaps World Cities Database.

SSabin Bhandari

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

93% match