Fork of Sized Points on a Map

100%

Fork of Sized Points on a Map

✓ Published0🌍 Public

Last edited Aug 23, 2024

Created on Aug 23, 2024

This example visualizes cities worldwide with populations exceeding 50,000, using point size to represent population magnitude. A natural Earth projection displays country boundaries and graticules, while semi-transparent teal circles overlay city locations. The visualization uses React components with D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for map rendering, and `scaleSqrt` for mapping population values to circle radii. City data originates from Simplemaps, and country boundaries come from the World Atlas TopoJSON source, rendered as SVG paths within a React application using d3.v5.

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

DDonald Bagwell

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

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection map. Circle size encodes population using a square root scale, with the largest cities reaching 15 pixels in radius. The map renders country boundaries and graticules using d3.geoPath with TopoJSON data from the World Atlas, while city coordinates come from a Simplemaps CSV. Built with React and d3.v5, the SVG map overlays scaled circles onto the projected geographic features, filtered from the complete world cities dataset.

Bblueyjuice

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 example displays a world map with cities over 50,000 in population, represented by semi-transparent circles scaled by population using a sqrt scale. It uses React for component structure and d3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render land, country interiors, and graticule lines from World Atlas TopoJSON data. City coordinates and populations come from a CSV loaded via d3.csv, with circle radii capped at 15 pixels.

Hhenry c

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

94% match

Loading thumbnail…

Fork of Sized Points on a Map

This example displays a world map with circles sized by population for cities exceeding 50,000 residents. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and country interiors, while circles are positioned with the projection and scaled using d3.scaleSqrt. City data comes from a CSV loaded via d3.csv, and country boundaries derive from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. The React component structure manages state with hooks and renders SVG elements.

Wwaqcas

94% match