Fork of Points

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

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

Fork of Points on a Map

This visualization displays a world map with cities whose populations exceed 50,000, sourced from the Simplemaps World Cities Database. The map uses a natural Earth projection, rendered as SVG through React, with country boundaries from the World Atlas TopoJSON. D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` functions draw the sphere, graticules, and landmasses, while city coordinates are projected and plotted as semi-transparent teal circles. The styling employs muted grays for geographic features, creating a clean backdrop for the city data points.

RRupendra Pamisetty

Bbillmccabeusa@hotmail.com

Fork of Points on a Map

This visualization displays a world map plotting cities with populations over 50,000 as semi-transparent teal dots, sourced from the Simplemaps World Cities Database. Country boundaries and graticules are rendered using D3’s geoNaturalEarth1 projection and geoPath, with data loaded via useWorldAtlas and useCities hooks that fetch TopoJSON and CSV files. React manages the component structure, while SVG circles mark each city’s projected coordinates.

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

Fork of 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.

YYanyu Long

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

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