Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Oct 23, 2020

Created on Oct 22, 2020

A world map displays COVID-19 cumulative cases for cities with populations over 50,000, using sized circles where radius encodes case count via a square-root scale. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render country boundaries, graticules, and city points as SVG circles. Data comes from the World Health Organization via a CSV file, with country shapes from World Atlas TopoJSON.

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

This example displays a natural Earth projection world map with semi-transparent red circles sized by total COVID-19 cases for cities with populations above 50,000. The visualization uses React with D3 v5, leveraging `geoNaturalEarth1` and `geoPath` for map rendering, `scaleSqrt` for proportional circle sizing, and `topojson` for country boundaries. Country data is enriched with COVID statistics from a CSV file, while tooltips reveal exact case counts. The map includes graticules and country borders styled through CSS.

Aamanoakane

90% match

Loading thumbnail…

Fork of Fork of Sized Points on a Map

This visualization displays global cumulative COVID-19 cases as semi-transparent red circles sized by total cases on a natural Earth projection. Country boundaries, graticules, and land masses are rendered using d3.geoNaturalEarth1, d3.geoPath, and TopoJSON data from World Atlas. City-level COVID data is loaded from Our World in Data and merged with country properties. React manages component state while d3.scaleSqrt maps case counts to circle radii, with d3.csv fetching tabular data and d3.json retrieving the TopoJSON topology.

Aamanoakane

88% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, sized proportionally to their population using a square-root scale. The visualization uses React for the user interface and D3 v5’s `geoNaturalEarth1` projection with `geoPath` to render country boundaries, graticules, and a sphere backdrop. City data comes from Simplemaps, while country shapes come from World Atlas TopoJSON. Circles are positioned via the projection and sized using `scaleSqrt` from D3, with opacity set through CSS.

Ssarabaghery76

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

86% match

Loading thumbnail…

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

86% match

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

86% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented as a circle whose area encodes population using a square-root scale. The visualization uses d3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render country boundaries and graticules, while React manages the SVG scene. City coordinates and populations come from a Simplemaps World Cities CSV, and country boundaries derive from the World Atlas TopoJSON, styled with subtle gray fills and strokes.

VVineel Gannu

86% match

Loading thumbnail…

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

86% match