Points on a Map

100%

Points on a Map

✓ Published0🌍 Public

Last edited Oct 31, 2021

Created on Oct 31, 2021

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.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, sized proportionally to population using a square-root scale with a maximum radius of 15 pixels. The visualization combines a Natural Earth projection with graticules, land masses, and country borders, rendered via `d3.geoPath` and TopoJSON from the world-atlas dataset. Point positions are calculated using `d3.geoNaturalEarth1`, while city data comes from a CSV loaded with `d3.csv`. React manages the component state, and SVG circles represent each urban center.

KKevin McMorrow

97% match

Loading thumbnail…

Points on a Map

A world map rendered with a natural Earth projection displays cities as semi-transparent teal circles, with circle area scaled by population using a square-root scale. The visualization pairs D3’s geoNaturalEarth1 projection and geoPath with React components to draw landmasses, graticules, and country interiors. City coordinates and population data come from a CSV file, while geographic boundaries load via TopoJSON from the world-atlas package.

RRMartins11

96% match

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

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 (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 rendered with SVG marks shows the globe in muted grays with graticule lines and country borders, overlaid with translucent teal circles sized by city population. The visualization uses a React component with d3’s geoNaturalEarth1 projection and geoPath to draw land and interiors from a TopoJSON world atlas, while city coordinates from a CSV are projected and drawn as circles with a square-root scale mapped to population. The data comes from the Data Canvas Sense Your City Dataset.

AAndrea Picciau

95% match

Loading thumbnail…

Points on a Map

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.

Wwindwaver

95% match

Loading thumbnail…

Points on a Map

A world map rendered with a Natural Earth projection displays global cities as semi-transparent circles, sized by population. The visualization uses React and D3 v7, with `geoNaturalEarth1` and `geoPath` to draw landmasses, graticules, and country interiors from TopoJSON data. City coordinates are projected and plotted as SVG circles, with a sqrt scale mapping population to radius. Data comes from a CSV of world cities loaded via `d3.csv`.

BBen Seebeck

94% match