Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Oct 9, 2020

Created on Oct 9, 2020

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.

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

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

95% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The visualization renders geographic landmasses, graticules, and interiors via D3’s `geoNaturalEarth1` projection and `geoPath`, while city points are positioned with the same projection. Data comes from a Simplemaps CSV of cities with populations over 50,000, and country boundaries from TopoJSON’s world-atlas. React manages the component state, and SVG circles use a max radius of 15 pixels with a teal fill.

RRochelle

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 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.

JJens Grochtdreis

95% match

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations over 50,000 as sized points on a world map, using a square-root scale to encode population by circle radius. The map renders with the `geoNaturalEarth1` projection and `geoPath` in React, showing graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps via CSV, loaded with `d3.csv`. Circles are drawn with SVG, styled with a teal fill and 0.3 opacity.

Eerahma

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