Skip to main content
SimilarExport ZIP
100%

Fork of Points on a Map

✓ Published0🌍 Public
YYanyu Long
Last edited Mar 6, 2022
Created on Mar 5, 2022
Forked from Points on a Map

This visualization shows a world map with cities whose populations exceed 50,000, plotted as semi-transparent teal dots. The map includes country boundaries, graticules, and a sphere outline, rendered using d3.geoPath with a geoNaturalEarth1 projection. City positions come from a CSV loaded via d3.csv, while country shapes are derived from World Atlas TopoJSON using topojson.feature and topojson.mesh. The React component structure uses hooks to fetch data asynchronously, and the SVG marks are drawn with React 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 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
96% match
Loading thumbnail…

Fork of Points on a Map

This example shows a world map of cities with populations above 50,000, plotted as small teal circles over light gray landmasses and graticules. The visualization uses React to render SVG elements, with D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map projections and boundary lines. City coordinates come from a Simplemaps CSV, while country outlines derive from TopoJSON world atlas data, with interiors drawn as mesh strokes.

Vvigneswaran009
95% match
Loading thumbnail…

Fork of Points on a Map

This D3.js visualization displays a world map with cities of population greater than 50,000, using city data from Simplemaps. The map is rendered as an SVG, employing the d3.geoNaturalEarth1 projection with geoPath to draw land, graticules, and country interiors. The React implementation uses useWorldAtlas and useCities hooks to load TopoJSON and CSV data, respectively. City points are plotted as semi-transparent teal circles, styled with CSS.

Ssultanmirzapydev
95% 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
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
95% 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
95% match
Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map with points marking cities that have populations exceeding 50,000, drawn from the Simplemaps World Cities Database. Using React and D3 v5, the example projects geographic coordinates onto an SVG canvas with the geoNaturalEarth1 projection and geoPath. The map includes land masses, country interiors, and graticules from World Atlas TopoJSON, while semi-transparent teal circles represent each city, revealing population clusters across continents.

AAntonis Prodromou
94% match