Fork of Points on a Map

100%

Fork of Points on a Map

✓ Published0🌍 Public

Last edited Apr 17, 2022

Created on Apr 17, 2022

This example renders a world map using a Natural Earth projection, showing cities with populations over 50,000 as semi-transparent points. The visualization loads geographic boundaries from World Atlas TopoJSON and city data from Simplemaps, then draws them with SVG paths and circles via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The React components manage data fetching through custom hooks, while D3’s `csv` and `json` methods load the datasets.

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 Points on a Map

This example shows a world map with over 50,000 cities plotted as semi-transparent points, using a Natural Earth projection. The visualization layers graticules, land masses, and country borders beneath the city data, with each city positioned via the `geoNaturalEarth1` projection and `geoPath`. Built with React and D3 v5, the code loads TopoJSON world atlas data and a CSV of city coordinates, rendering the map as SVG. City data comes from Simplemaps’ World Cities Database.

Wwhiteswallow87

95% match

Loading thumbnail…

Fork of Points on a Map

This example shows a world map with points for cities, using a natural Earth projection and graticules for geographic context. The visualization layers country land masses and interiors from World Atlas TopoJSON, with semi-transparent circles positioned via `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded through `d3.csv`, and the React-based component structure uses hooks like `useWorldAtlas` and `useCities` to manage asynchronous data fetching.

Kklumng

95% match

Loading thumbnail…

Fork of Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal dots, using the Natural Earth projection from `d3.geoNaturalEarth1`. The visualization renders landmasses, graticules, and interiors via `geoPath` and `geoGraticule`, with country boundaries from the World Atlas TopoJSON dataset and city coordinates from Simplemaps. Built with React, the code uses `d3.csv` for data loading and `topojson.feature` and `topojson.mesh` to process geographic topology, all rendered as SVG elements.

HHowardHan99

95% match

Loading thumbnail…

Fork of Points on a Map

This example displays a world map with cities having populations over 50,000, plotted as semi-transparent teal circles. It uses a natural Earth projection via `geoNaturalEarth1` and renders both graticules and country interiors with `geoPath`. The map is built with React, loading geographic data from World Atlas TopoJSON and city coordinates from a Simplemaps CSV. City positions are projected using `[d.lng, d.lat]` to determine circle placement within an SVG.

Ddas888530

95% match

Loading thumbnail…

Fork of Points on a Map

This example displays a natural Earth projection world map with cities over 50,000 people plotted as small circles. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` for map geometry, with graticules and country borders styled via CSS. City coordinates are projected from latitude and longitude, and React manages the SVG rendering. Mouse hover changes a city’s fill color. Data comes from a Simplemaps world cities CSV, while country boundaries use the World Atlas TopoJSON.

DDan Peerapatanapokin

95% match

Loading thumbnail…

Fork of Points on a Map

A world map displays cities with populations exceeding 50,000 as small teal circles, projected using the Natural Earth projection via `d3.geoNaturalEarth1` and rendered as SVG paths with `d3.geoPath`. Country boundaries and graticules come from World Atlas TopoJSON data, styled with muted gray fills and strokes. React fetches city coordinates from a CSV using `d3.csv` and renders them as `circle` elements, while `topojson`’s `feature` and `mesh` functions process the atlas topology for landmasses and interior borders.

JJoachim Klug

95% match

Loading thumbnail…

Fork of Fork of Points on a Map

This example displays a world map with cities having populations over 50,000, sourced from the Simplemaps World Cities Database, overlaid on country boundaries from the World Atlas TopoJSON. The visualization uses React for component management and d3.geoNaturalEarth1 projection with d3.geoPath to render the sphere, graticules, land, and interiors. City points are projected and drawn as semi-transparent circles, using d3.csv for data loading and topojson’s feature and mesh functions to prepare the geographic data.

Mmmei-d

94% match

Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map with cities of population greater than 50,000 plotted as semitransparent points. The map displays landmasses, graticules, and country interior boundaries. Using React for component structure, the code employs d3’s `geoNaturalEarth1` projection and `geoPath` to render geographic features, while city coordinates are projected and drawn as SVG circles. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON.

SSteven Pearce

94% match