Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Dec 17, 2020

Created on Dec 17, 2020

This visualization displays a world map with cities whose population exceeds 50,000, using sized circles to represent population magnitude. The map includes country borders and graticules, styled with a clean, minimal aesthetic. Built with React and D3 v6, it uses `d3.geoPath` for map rendering, `d3.scaleSqrt` to size circles by population, and loads geographic data from World Atlas TopoJSON and city data from Simplemaps via `d3.csv` and `d3.json`.

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

94% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, showing all cities with populations greater than 50,000. The visualization uses React for rendering, combined with d3.v5 for geographic projections and data handling, including d3.geoPath to draw country boundaries and graticules from World Atlas TopoJSON. City coordinates and population data come from Simplemaps, with circle size encoded through a d3.scaleLinear function. The map uses a light, polished color scheme with semi-transparent teal circles over gray landmasses.

SSalmanHamdouchi

94% match

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

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

93% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented by a semi-transparent circle whose radius encodes population size via a square-root scale. The visualization uses React for rendering SVG elements, with d3’s geoNaturalEarth1 projection and geoPath to draw land boundaries, country interiors, graticules, and the sphere. City coordinates are projected from latitude and longitude, while data comes from a CSV sourced from Simplemaps’ World Cities Database, processed through d3.csv. Topology for country boundaries is loaded via d3.json from World Atlas TopoJSON.

JJunyanL

93% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, using scaled circle radius to encode population size. The visualization combines a Natural Earth projection rendered through d3.geoPath with graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps’ World Cities Database, loaded via d3.csv and projected onto the map. Circle sizes use d3.scaleSqrt for area encoding, with React managing the SVG rendering and d3.v5 providing the geographic and data utilities.

Nnnminh199914

93% match

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations exceeding 50,000 as sized points on a world map, using the natural Earth projection. Country boundaries and graticules appear beneath the points. The visualization uses React with D3 v5, including `geoNaturalEarth1`, `geoPath`, and `geoGraticule`. City population data is loaded from a CSV via `d3.csv`, while land and interior boundaries come from World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`. Circle radii are scaled by population values.

Fftjyangf

93% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with cities of populations exceeding 50,000, using sized points to represent population magnitude. Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` render landmasses, graticules, and country interiors from TopoJSON data. Circles are positioned through projection of latitude and longitude coordinates, with radius determined by a square-root scale (`d3.scaleSqrt`) mapping population values to a maximum radius of 15 pixels. The React-based implementation loads city data from a CSV using `d3.csv` and renders all elements as SVG marks.

JJCarpenter-WPI

93% match