Skip to main content
SimilarExport ZIP
100%

Points on a Map

✓ Published0🌍 Public
Ddanrhymes
Last edited Dec 18, 2020
Created on Dec 17, 2020
Forked from Points on a Map

A natural Earth projection world map displays cities with populations over 50,000 as semi-transparent teal dots, layered over light gray landmasses and graticules. The visualization uses React with D3 v5, employing `geoNaturalEarth1` and `geoPath` for the projection, while city coordinates are converted through the projection function to position SVG circles. City data originates from Simplemaps' World Cities Database, with country boundaries from the World Atlas TopoJSON, and the map includes subtle interior country borders for geographic context.

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…

Points on a Map

This example displays city locations as semi-transparent teal dots on a natural Earth projection world map, highlighting urban centers with populations exceeding 50,000. The visualization uses React for component structure and D3 v5’s `geoNaturalEarth1` projection with `geoPath` to render land masses, country boundaries, graticules, and a sphere outline. City coordinates from the Simplemaps World Cities Database are projected using `projection([d.lng, d.lat])` into SVG circles. The map background and land fill are styled via CSS, with graticules providing geographic reference lines.

MMaxene Graze
96% match
Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso
95% match
Loading thumbnail…

Points on a Map

A world map displays cities with population over 50,000 as semi-transparent teal dots, projected using the Natural Earth projection. The visualization layers graticules, land masses, and country borders from World Atlas TopoJSON, with city coordinates from a Simplemaps CSV. React manages the component state while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the geographic rendering, and `csv` and `json` load the external datasets.

Yyyaaa1
95% match
Loading thumbnail…

Points on a Map

A world map displays cities with population over 50,000 as semi-transparent teal dots, projected using the Natural Earth projection. The visualization layers graticules, land masses, and country borders from World Atlas TopoJSON, with city coordinates from a Simplemaps CSV. React manages the component state while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the geographic rendering, and `csv` and `json` load the external datasets.

Yyyaaa1
95% match
Loading thumbnail…

Points on a Map

A world map rendered with a natural Earth projection displays cities as semi-transparent teal circles, with circle area scaled by population using a square-root scale. The visualization pairs D3’s geoNaturalEarth1 projection and geoPath with React components to draw landmasses, graticules, and country interiors. City coordinates and population data come from a CSV file, while geographic boundaries load via TopoJSON from the world-atlas package.

RRMartins11
95% match
Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent dots. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and renders geographic features with d3.geoPath, including land masses and graticules. City coordinates are projected from latitude and longitude into SVG circle positions. The map loads country boundaries from World Atlas TopoJSON and city data from a Simplemaps CSV, with React managing the data-fetching hooks and rendering the SVG marks.

GGeniXiong
95% match
Loading thumbnail…

Points on a Map

This example visualizes a world map with dots marking cities whose population exceeds 50,000. The city locations are plotted as semi-transparent teal circles over a natural Earth projection, with landmasses, graticules, and country interiors rendered in gray tones. The visualization is built with React and uses D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions to project geographic data from the World Atlas TopoJSON. City coordinates come from the Simplemaps World Cities Database, accessed via a CSV file, and are projected onto the map using D3's projection method.

NNita
95% match
Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent, radius-scaled circles proportional to population, using a Natural Earth projection. The visualization, built with React and D3 (v5), renders SVG paths for land, graticules, and sphere outlines via `geoPath`, while circles are projected using `geoNaturalEarth1`. City data comes from a CSV of world cities, and the map’s geographic basemap is provided by the `world-atlas` TopoJSON, processed through `topojson.feature` and `topojson.mesh`.

RRajat Dangat
95% match