Fork of Sized Points on a Map

100%

Fork of Sized Points on a Map

✓ Published0🌍 Public

Last edited Feb 14, 2024

Created on Feb 14, 2024

A map visualization plots world cities with populations exceeding 50,000 as sized points, using a square-root scale to encode population via circle radius. The map uses `geoNaturalEarth1` projection with `geoPath` for land, graticules, and country interiors. City data comes from Simplemaps’ World Cities Database, rendered in React with SVG circles. The visualization is built with d3.v5, featuring a clean, light-styled map with semi-transparent teal circles showing population distribution globally.

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 teal circles, sized using a square-root scale that maps population to radius. The map includes natural Earth landmasses with graticules and country interiors, styled in muted grays. The visualization is built with React, using d3's `geoNaturalEarth1` projection and `geoPath` for rendering, while city data comes from Simplemaps and country boundaries from the World Atlas TopoJSON.

Ddr-rompecabezas

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

96% match

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000, sized proportionally to their population using a square root scale. The visualization renders a natural Earth projection with graticules, landmasses, and country borders in light gray tones. React manages the component structure while D3 v5 handles geographic projection via `geoNaturalEarth1`, path generation with `geoPath`, and CSV data loading from the Simplemaps World Cities Database. Semi-transparent teal circles overlay each city location, with their radii scaled to population values.

JJean David

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

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

Loading thumbnail…

Fork of Sized Points on a Map

This example visualizes a world map with circles sized by city population, focusing on cities with populations exceeding 50,000. The map uses a Natural Earth projection rendered with `geoNaturalEarth1` and `geoPath`, while city points are positioned via the projection and scaled using `scaleSqrt` for their radius. Data is sourced from Simplemaps and world-atlas TopoJSON, with graticules and polished land boundaries. The visualization is built with React, leveraging `d3.csv` for data loading and `topojson.mesh` for interior boundaries.

Eevers-codeshop-ai

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

95% match