Fork of Sized Points on a Map

100%

Fork of Sized Points on a Map

✓ Published0🌍 Public

Last edited Nov 1, 2021

Created on Nov 1, 2021

This visualization presents a world map where each circle represents a city with a population exceeding 50,000, sourced from the Simplemaps World Cities Database. The circles’ radii are scaled using a square-root scale (`scaleSqrt`) based on population, with a maximum radius of 15 pixels. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country landmasses and interiors from World Atlas TopoJSON, plus graticules for a polished look. The visualization is built with React and SVG, loading data via custom `useWorldAtlas` and `useCities` hooks that fetch JSON and CSV respectively.

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…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized proportionally to population using a square-root scale. The visualization uses React for component structure, with d3-geo’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country boundaries from World Atlas TopoJSON. City coordinates and populations come from Simplemaps’ World Cities Database, loaded via d3.csv. The SVG rendering iterates over city data, projecting longitude and latitude to screen positions and setting circle radii through the `scaleSqrt` domain and range.

YYedrup

96% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000, with circle size scaled by population using a square-root scale from d3-scale. The visualization renders geographic features—landmasses, country interiors, the sphere, and graticules—via d3.geoNaturalEarth1 and d3.geoPath in an SVG. City coordinates are projected from latitude and longitude, while data comes from a CSV of world cities and the World Atlas TopoJSON, all styled with translucent teal circles.

Ddrc6587

96% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles sized proportionally to population using a square-root scale. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath, graticules, and country boundaries from World Atlas TopoJSON, with city data from a Simplemaps CSV. React manages state and rendering, while d3.scaleSqrt maps population values to circle radii. The SVG output includes styled landmasses, sphere background, and interior borders.

VVishwanath Hegde

96% match

Loading thumbnail…

Fork of Sized Points on a Map

This example displays a world map with cities exceeding 50,000 in population, using circles sized and colored by population via a square-root scale. The map uses a natural Earth projection with graticules and land boundaries from the World Atlas TopoJSON, styled with CSS. Data is loaded from Simplemaps' World Cities Database using d3.csv. The visualization is built with React, rendering SVG paths for geography and circles for cities, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for the map projection and graticule lines.

AAiden Kwong

95% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized by population using a square-root scale. The visualization uses React to render SVG marks, with d3.geoNaturalEarth1 and d3.geoPath for the map projection and country boundaries. City data comes from the Simplemaps World Cities Database, and the map includes graticules and interior borders from World Atlas TopoJSON, styled with light gray fills and strokes.

Bbigstonecompany

95% match

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays a world map with cities over 50,000 population represented by semi-transparent circles, whose radii encode population via a square-root scale. Country boundaries, graticules, and the sphere outline are drawn using `d3.geoNaturalEarth1` and `d3.geoPath` in SVG. React manages the component state, fetching city data from a CSV via `d3.csv` and country topology from the World Atlas TopoJSON using `d3.json` and `topojson.feature`. The squared-sized points highlight population distribution across the globe.

PPiotr Paszek

95% match

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The map includes land masses, country borders, graticules, and a sphere outline, rendered with `geoNaturalEarth1` projection and `geoPath` from d3. City data comes from the Simplemaps World Cities Database, filtered to populations above 50,000. The React app loads TopoJSON world atlas data and CSV city data, then renders SVG circles with transparency over the geographic features.

KKunkgg

95% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent, scaled circles, using a square-root size scale to encode population values. The visualization layers a Natural Earth projection with graticules and country boundaries from the World Atlas TopoJSON, while city data comes from the Simplemaps World Cities Database. Built with React and D3 v5, the code uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map geometry, and `scaleSqrt` to map population to circle radii, rendering all marks as SVG elements.

CCesar Varela

95% match