Points on a Map

100%

Points on a Map

✓ Published0🌍 Public

Last edited Oct 15, 2019

Created on Oct 10, 2019

A world map displays over 50,000 cities as translucent teal dots, with country boundaries and graticules rendered in soft gray. The visualization uses React to manage component state and D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic coordinates into SVG paths. City locations are projected from latitude and longitude into screen positions, while the world atlas TopoJSON is processed with `feature` and `mesh` for land and interior borders. Data comes from a Simplemaps CSV containing city populations.

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…

Points on a Map

A map of the world displays cities with populations over 50,000 as small translucent dots. The visualization uses a React component with D3’s `geoNaturalEarth1` projection and `geoPath` to render country boundaries, graticules, and the sphere outline. City coordinates are projected from latitude and longitude, with data loaded via `d3.csv` from the Simplemaps World Cities Database, while land and interior borders come from TopoJSON in the World Atlas TopoJSON dataset.

MMarco Malvicini

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

A world map displays cities with population over 50,000 as semi-transparent teal dots, projected using the Natural Earth projection. The visualization layers graticules, land masses, and country borders from World Atlas TopoJSON, with city coordinates from a Simplemaps CSV. React manages the component state while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the geographic rendering, and `csv` and `json` load the external datasets.

Yyyaaa1

94% match

Loading thumbnail…

Points on a Map

Yyyaaa1

94% match

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

94% match

Loading thumbnail…

Points on a Map

A natural Earth projection world map displays cities with populations over 50,000 as semi-transparent teal dots, layered over light gray landmasses and graticules. The visualization uses React with D3 v5, employing `geoNaturalEarth1` and `geoPath` for the projection, while city coordinates are converted through the projection function to position SVG circles. City data originates from Simplemaps' World Cities Database, with country boundaries from the World Atlas TopoJSON, and the map includes subtle interior country borders for geographic context.

Ddanrhymes

94% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

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

94% match