Fork of Points on a Map

100%

Fork of Points on a Map

✓ Published0🌍 Public

Last edited Jan 7, 2022

Created on Jan 7, 2022

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.

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 visualization shows a world map depicting cities with populations over 50,000, drawn as semi-transparent teal dots. The country boundaries and graticules are rendered using D3’s `geoNaturalEarth1` projection with `geoPath`, while the city positions are projected from latitude and longitude coordinates. The map uses a React front-end with `useWorldAtlas` and `useCities` hooks to load TopoJSON land data and CSV city data from Simplemaps, displaying everything as SVG elements.

YYedrup

96% match

Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map with cities having populations greater than 50,000, plotted as semi-transparent teal circles. The map uses geographic projections from `d3.geoNaturalEarth1` and renders country boundaries, graticules, and land masses using `d3.geoPath`. Built with React and D3 v5, the code loads TopoJSON world atlas data from `world-atlas@2.0.2` and city coordinates from Simplemaps, with topojson’s `feature` and `mesh` functions preparing geographic features for SVG display.

RRoberto

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

This interactive world map visualizes cities with populations exceeding 50,000, plotted as semi-transparent teal dots over a light gray landmass. The map employs the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, graticules, and interior borders using SVG paths. City coordinates are projected with the same projection and drawn as circles, with data sourced from the Simplemaps World Cities Database. The visualization is built with React and D3 v5, loading both GeoJSON topology and CSV data asynchronously before rendering.

Rramdev2021

95% match

Loading thumbnail…

Fork of Points on a Map

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.

Cchar0496

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 visualization shows a world map with cities rendered as semi-transparent teal circles, using data from the Simplemaps World Cities Database filtered to cities with populations exceeding 50,000. The map employs d3.geoNaturalEarth1 projection with d3.geoPath to draw land masses, country borders, graticules, and the sphere outline from TopoJSON world-atlas data. React components manage the SVG rendering, with d3.csv loading city coordinates and topojson.feature and topojson.mesh extracting geographic shapes for the base map.

LLam Tran

95% match

Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map with dots marking cities whose population exceeds 50,000, plotted using the Natural Earth projection. The map displays country boundaries and graticules for geographic context, with cities rendered as semi-transparent circles. Built with React and D3 v5, the example uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic features, while TopoJSON provides land and interior mesh data. City coordinates come from a CSV file sourced from the Simplemaps World Cities Database, and all marks are rendered as SVG elements.

AARAVIND MJ

94% match