Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
JJens Grochtdreis
Last edited May 6, 2020
Created on May 6, 2020

This example displays a world map with cities sized by population, using a sqrt scale to encode values up to 15 pixels in radius. The map is rendered in SVG with d3.geoPath, d3.geoNaturalEarth1 for projection, and graticules for reference. City data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON. React manages the component state and lifecycle, fetching both datasets via d3.csv and d3.json before 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

This example shows a world map with cities represented as sized points, where circle radius encodes each city’s population using a square-root scale. It uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and interiors from World Atlas TopoJSON, while city data comes from a Simplemaps CSV loaded via d3.csv. The React component passes a d3.scaleSqrt to SVG circles, with rendering handled in React and styling via CSS.

Bbootshine2
95% match
Loading thumbnail…

Sized Points on a Map

This example shows a world map with cities represented as sized points, where circle radius encodes each city’s population using a square-root scale. It uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and interiors from World Atlas TopoJSON, while city data comes from a Simplemaps CSV loaded via d3.csv. The React component passes a d3.scaleSqrt to SVG circles, with rendering handled in React and styling via CSS.

Bbootshine2
95% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with sized points representing cities, where the circle radius encodes each city's population using a square root scale with a maximum radius of 15 pixels. It renders the Natural Earth projection via d3.geoPath, including graticules and land boundaries from Topojson World Atlas data. City coordinates and population values come from a CSV dataset, and the visualization uses React for component structure alongside D3 v6 for geographic projections and scales, with all marks drawn as SVG elements.

WWolfgang
95% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations greater than 50,000 as sized circles, using a square-root scale to map population values to circle radii up to 15 pixels. The map is rendered in SVG with React, using D3’s geoNaturalEarth1 projection and geoPath to draw landmasses, country boundaries, and graticules. City coordinates and populations come from a Simplemaps dataset, loaded via d3.csv, while country geometries derive from World Atlas TopoJSON.

Aachintyatripathi
95% match
Loading thumbnail…

Sized Points on a Map

This example renders a world map with circles sized by population for cities over 50,000 inhabitants, using a square-root scale to encode the data. The map is drawn with React and SVG, projecting geographic coordinates through D3’s `geoNaturalEarth1` and `geoPath`, with graticules and country boundaries from the World Atlas TopoJSON. City data comes from Simplemaps, and each point’s radius is determined by `scaleSqrt` mapping maximum population to a 15-pixel radius.

IIbrahim Hussain
95% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as sized points, using a square-root scale to map population to circle radius up to 15 pixels. The visualization is rendered as SVG via React, with geographic features drawn using `d3.geoPath` and a Natural Earth projection from `d3.geoNaturalEarth1`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations load from a Simplemaps CSV. The map uses `d3.scaleSqrt` for point sizing and an opacity of 0.3 for the city circles.

Mmkt-ds
95% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with city points sized by population, using a square-root scale to encode population values as circle radii. The visualization combines geographic context from World Atlas TopoJSON data with city data from Simplemaps, rendering both through React and SVG. The code uses d3.geoNaturalEarth1 for projection, d3.geoPath for country boundaries and graticules, and d3.scaleSqrt for sizing, with translucent Cornsilk circles overlaid on dark landmasses and green borders.

LLaurentVuillon
95% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using data from the Simplemaps World Cities Database. The map renders geographic features with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while country boundaries load from World Atlas TopoJSON. City points are placed via projection coordinates and scaled with d3.scaleSqrt, all built within a React component using SVG. The visualization includes graticules and styled land, sphere, and interior paths for a polished cartographic look.

GGustavoRiveraM
95% match