Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Apr 2, 2021

Created on Apr 2, 2021

A world map populated with semi-transparent circles representing the populations of cities from a cleaned World Cities dataset. The visualization uses a Natural Earth projection rendered with `d3.geoPath`, layering graticules, land masses, and country borders beneath the points. Circle radii are scaled with `d3.scaleSqrt` based on population, capped at a maximum radius of 15 pixels. The React component fetches TopoJSON world atlas data and CSV city data, then renders the SVG marks with D3 v5.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent, radius-scaled circles proportional to population, using a Natural Earth projection. The visualization, built with React and D3 (v5), renders SVG paths for land, graticules, and sphere outlines via `geoPath`, while circles are projected using `geoNaturalEarth1`. City data comes from a CSV of world cities, and the map’s geographic basemap is provided by the `world-atlas` TopoJSON, processed through `topojson.feature` and `topojson.mesh`.

RRajat Dangat

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

95% match

Loading thumbnail…

Points on a Map (cities)

A world map displays cities as semi-transparent circles sized by population, with landmasses, graticules, and interior borders rendered via d3.geoPath and geoNaturalEarth1. The projection maps latitude and longitude to SVG coordinates, while a d3.scaleSqrt converts population values to circle radii. Data comes from a CSV of world cities, and the map uses React hooks to load TopoJSON world-atlas geometry.

AAnthony Ynami

95% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, with circle size encoding population via a square-root scale. The map uses a Natural Earth projection with land masses, graticules, and country interiors rendered via `geoPath` and `geoGraticule` from D3. The React app loads TopoJSON from World Atlas and CSV city data, then projects coordinates through `geoNaturalEarth1` to position the SVG circles.

AAnkit-Ian-53787

95% match

Loading thumbnail…

Points on a Map

A world map displays country boundaries and graticules over a light gray sphere, with semi-transparent teal circles sized by city population. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render land, interiors, and sphere outlines from TopoJSON data. City coordinates are projected and drawn as SVG circles, with radii scaled using d3.scaleSqrt applied to population values from a CSV dataset. The React component structure manages state for both world atlas and city data.

Jj-PGi

95% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles representing the populations of cities, scaled using a square root scale from D3. The map, rendered as SVG in a React app, uses the D3 `geoNaturalEarth1` projection to place points. Geographic data comes from the world-atlas TopoJSON via `topojson.feature` and `topojson.mesh`, while city data loads from a CSV. The graticule, sphere, and land outlines are styled via CSS, and the semi-transparent teal circles have opacity set to 0.3.

Vvmonney

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

94% match

Loading thumbnail…

Points on a Map

This example displays world cities as semi-transparent circles on a natural Earth projection, with circle size encoding each city's population. The map renders landmasses and country borders from the world-atlas TopoJSON dataset, with graticules and a sphere outline providing geographic context. Using React hooks to load data asynchronously, the visualization applies d3.geoNaturalEarth1 and d3.geoPath for projection, d3.scaleSqrt for radius scaling, and maps city coordinates through the projection to position SVG circles.

Jjbruzzo

94% match