Sized Points on a Map

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx

Sized Points on a Map

Qqhfzwyx

Sized Points on a Map

Qqhfzwyx

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

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

Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using data from Simplemaps and country boundaries from World Atlas TopoJSON. The map is rendered with SVG and React, employing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while a d3.scaleSqrt maps population values to circle radii. The visualization includes graticules and land/interior boundaries, with semi-transparent teal circles marking cities with populations over 50,000.

Ggilbertlmw

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

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