Points on a map

100%

Points on a map

✓ Published1🌍 Public

Last edited Mar 24, 2023

Created on Mar 23, 2023

This example visualizes global population distribution by plotting circles for cities on a natural Earth projection map. Circle radius encodes population using a square-root scale, with semi-transparent styling to show overlapping urban areas. The visualization uses React for component rendering, D3 v5 for geographic projections (`geoNaturalEarth1`), path generation (`geoPath`), and graticule creation, alongside TopoJSON to process world-atlas land and interior boundary data. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` utility.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example visualizes global population data by plotting cities as semi-transparent circles on a Natural Earth projected world map. A square-root scale maps each city’s population to circle radius, with the largest cities appearing most prominent. The visualization uses React for component structure and D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations are loaded from a clean CSV dataset.

Qqtrfx

94% match

Loading thumbnail…

Points on a Map

This example visualizes global population distribution by plotting cities as semi-transparent points on a natural Earth projection map. The map includes graticules, landmasses, and country borders, with each circle’s radius scaled proportionally to its city’s population using `d3.scaleSqrt`. The visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic rendering, with React managing state and SVG elements for drawing. The underlying city data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`, while world topology is fetched from the World Atlas TopoJSON file and processed with `topojson.feature` and `topojson.mesh`.

AAudrey

93% match

Loading thumbnail…

Points on a World Map

This example displays global population distribution by plotting cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The visualization uses React for component structure, D3 v7’s `geoNaturalEarth1` and `geoPath` for map rendering, and TopoJSON to load world country boundaries. City coordinates and populations come from a CSV dataset, projected onto the map with `projection([lng, lat])`.

Ppranav-vis

93% match

Loading thumbnail…

Points on a Map

This example visualizes the global distribution of cities, with circle size encoding each city’s population using a square-root scale. A Natural Earth projection renders landmasses, graticules, and country borders via `d3.geoPath` and `geoNaturalEarth1`, while city points are positioned using the same projection. Data comes from a CSV of world cities and TopoJSON world-atlas geometry, all drawn as SVG within a React component.

KKtuzinowski

93% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with cities plotted as scaled circles representing population. The map uses the Natural Earth projection with graticules, country boundaries, and interiors rendered via D3's `geoPath` and `geoNaturalEarth1` projection. City positions come from a CSV file, and circle radii are scaled using D3's square-root scale (`scaleSqrt`) based on population data. The visualization is built with React and renders SVG marks, including land masses, a sphere outline, and graticule lines, all styled with a clean grayscale aesthetic.

Ccshm407

93% match

Loading thumbnail…

Points on a Map

This map visualization plots world city populations using circles projected onto a Natural Earth base. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors, while a sqrt scale maps population values to circle radii. The React-based component loads city data from a CSV and renders SVG marks, using a world atlas TopoJSON for geographic context.

Ttrissentety

93% match

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent circles overlaid on a natural Earth projection map, with circle size encoding population via a square root scale. The map includes land masses, country borders, graticules, and a sphere outline. React manages the component structure, while D3 v7 handles geo projection and path generation through `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded with `d3.csv`, and world geography uses TopoJSON from the world-atlas package, rendered as SVG.

KK3zter

93% match

Loading thumbnail…

Points on a Map

This example visualizes cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. The map displays country boundaries, interiors, graticules, and a sphere outline, with circle size scaled by population using `d3.scaleSqrt`. The React-based visualization uses `d3.geoPath` for geographic rendering and `d3.geoNaturalEarth1` for projection, with city data loaded from Simplemaps via CSV and country shapes from World Atlas TopoJSON.

TToonysg

92% match