Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Apr 4, 2021

Created on Apr 4, 2021

This interactive map displays over 7,000 cities as semi-transparent teal points, overlaid on a neutral world map with graticules and landmasses drawn using D3’s `geoNaturalEarth1` projection and `geoPath`. City locations come from the simplemaps World Cities Database, filtered to populations above 50,000, and are projected using `d3.geoPath` from a TopoJSON world atlas. The React app loads data asynchronously via custom hooks, rendering the SVG scene with D3’s `geoGraticule` for the coordinate grid and a sphere outline for context.

AI-generated description

A world map using the Topojson World Atlas and the simplemaps World Cities Database.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

A world map displays over 50,000 cities as translucent teal dots, with country boundaries and graticules rendered in soft gray. The visualization uses React to manage component state and D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic coordinates into SVG paths. City locations are projected from latitude and longitude into screen positions, while the world atlas TopoJSON is processed with `feature` and `mesh` for land and interior borders. Data comes from a Simplemaps CSV containing city populations.

Ssophburke

93% match

Loading thumbnail…

Points on a Map

This map visualizes the locations of cities as semi-transparent teal points overlaid on a world map rendered with a Natural Earth projection. The landmasses are filled with a light gray, while graticules and country interiors are drawn with subtle strokes. Built with React and D3, the example uses `geoNaturalEarth1` for projection, `geoPath` for geographic shapes, and `geoGraticule` for the grid. City data is loaded from a CSV, and world geography comes from a TopoJSON source, with points positioned using the projection function.

CChris Knight

93% match

Loading thumbnail…

Points on a Map

This visualization displays world cities with populations exceeding 50,000 as semi-transparent teal points on an SVG map. The map uses a Natural Earth projection via d3.geoNaturalEarth1, with landmasses, graticules, and interiors rendered using d3.geoPath. City locations are projected from latitude and longitude coordinates, then drawn as small circles. The underlying city data comes from Simplemaps, while country boundaries come from the World Atlas TopoJSON, both loaded asynchronously with d3.csv and d3.json. The React component structure uses custom hooks for data fetching.

SSabin Bhandari

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

92% match

Loading thumbnail…

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.

Ddanrhymes

92% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, sized proportionally to population using a square-root scale with a maximum radius of 15 pixels. The visualization combines a Natural Earth projection with graticules, land masses, and country borders, rendered via `d3.geoPath` and TopoJSON from the world-atlas dataset. Point positions are calculated using `d3.geoNaturalEarth1`, while city data comes from a CSV loaded with `d3.csv`. React manages the component state, and SVG circles represent each urban center.

KKevin McMorrow

92% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, with circle size encoding population via a square-root scale. The map uses a Natural Earth projection with land masses, graticules, and country interiors rendered via `geoPath` and `geoGraticule` from D3. The React app loads TopoJSON from World Atlas and CSV city data, then projects coordinates through `geoNaturalEarth1` to position the SVG circles.

AAnkit-Ian-53787

91% match

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

91% match