Fork of Points on a Map

100%

Fork of Points on a Map

✓ Published0🌍 Public

Last edited Jul 30, 2021

Created on Jul 30, 2021

This interactive world map visualizes the locations of cities and missing migrant incidents using a Natural Earth projection. The view combines graticules, land masses, and country boundaries rendered as SVG paths via d3.geoPath. Circular marks are positioned by projecting longitude/latitude coordinates with d3.geoNaturalEarth1, with city data sourced from Simplemaps and incident data from a CSV file. The visualization is built with React and d3.v5, using topojson for world atlas data processing.

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 migrants

This example displays a world map using the Natural Earth projection, with points plotted to represent migrant locations from the Missing Migrants Global 2019 subset dataset. The map renders landmasses, graticules, and interior boundaries via `d3.geoPath` and `d3.geoGraticule`, while circles are positioned with the `geoNaturalEarth1` projection. The visualization is built using React, D3 v5, and TopoJSON, pulling geographic data from the World Atlas TopoJSON and city coordinates from a CSV source.

NNart Williamson

92% match

Loading thumbnail…

Fork of Points on a Map

This interactive visualization plots missing migrant incidents from a 2019 global dataset on an SVG world map. The map uses d3.geoNaturalEarth1, d3.geoPath, and topojson to render landmasses, graticules, and interiors, while scaled circles (d3.scaleSqrt) encode total deaths and missing persons per location. The React-based bubble map displays the raw geographic distribution, with a temporal histogram component available for analyzing casualty counts by reported date. The visualization is built with d3.v5 and React, loading data via d3.csv and world atlas GeoJSON.

AAnthony Zornig

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

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

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

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

88% match

Loading thumbnail…

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

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

88% match