sized points on a map

100%

sized points on a map

✓ Published1🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

This example visualizes the world’s most populous cities as circles sized by population, overlaid on a map of country borders and graticule lines. The cities’ circle radii are scaled with a square root scale from D3, mapping population values to a maximum radius of 18 pixels. The map uses the `geoEqualEarth` projection, `geoPath`, and `geoGraticule` from D3, with country and interior boundaries processed via TopoJSON’s `feature` and `mesh`. Geographic data comes from a World Atlas JSON file and city data from a CSV file, rendered as SVG with React.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Ssophburke

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

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

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

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

91% match

Loading thumbnail…

using size with points on a map

This example visualizes the world's most populous cities as circles overlaid on a natural Earth projection map, using square-root-scaled radii to encode population size. The map includes land masses, graticule lines, and country interiors. The visualization is built with React, uses d3.geoNaturalEarth1 and d3.geoPath for geographic projections, d3.scaleSqrt for sizing, and fetches city data from a CSV via d3.csv.

BBlake McCarty

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

91% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude. The map includes landmasses, graticules, and country interiors rendered via d3.geoPath and a geoNaturalEarth1 projection. City coordinates and population data come from a CSV dataset, with React managing the component lifecycle and d3.v5 handling data loading and scaling. Semi-transparent teal circles are positioned using the projection and scaled up to a maximum radius of 15 pixels.

KKhalid

91% match