Points on a Map

100%

Points on a Map

✓ Published0🌍 Public

Last edited Feb 9, 2021

Created on Feb 9, 2021

This example displays global city locations as semi-transparent circles on a natural Earth map projection. It renders the world using `geoPath` and `geoNaturalEarth1` from d3-geo, with graticules and country interiors overlaid via TopoJSON world atlas data. City coordinates are projected from latitude/longitude pairs using the same projection, drawing each point as an SVG circle. The data comes from the Data Canvas Sense Your City Dataset, loaded through d3.csv, with React managing the component state and SVG rendering.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example displays world cities as semi-transparent circles on a natural Earth projection, with circle size encoding each city's population. The map renders landmasses and country borders from the world-atlas TopoJSON dataset, with graticules and a sphere outline providing geographic context. Using React hooks to load data asynchronously, the visualization applies d3.geoNaturalEarth1 and d3.geoPath for projection, d3.scaleSqrt for radius scaling, and maps city coordinates through the projection to position SVG circles.

Jjbruzzo

94% match

Loading thumbnail…

Points on a Map

This example displays a world map with city points overlaid, using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The map includes land boundaries, graticules, and interiors rendered as SVG paths from World Atlas TopoJSON data. City locations, loaded from a CSV with d3.csv, are plotted as semi-transparent circles. The visualization is built with React and D3 v5, demonstrating a clean, styled cartographic composition with an equirectangular-like aesthetic.

Ppnlinyz

93% match

Loading thumbnail…

Points on a Map

A world map rendered with a Natural Earth projection displays global cities as semi-transparent circles, sized by population. The visualization uses React and D3 v7, with `geoNaturalEarth1` and `geoPath` to draw landmasses, graticules, and country interiors from TopoJSON data. City coordinates are projected and plotted as SVG circles, with a sqrt scale mapping population to radius. Data comes from a CSV of world cities loaded via `d3.csv`.

BBen Seebeck

93% match

Loading thumbnail…

Points on a Map

This visualization displays global city locations as small, semi-transparent points on a natural Earth projection. The map itself is rendered using SVG paths for landmasses, graticules, and interiors, computed via `d3.geoPath` and `d3.geoGraticule`. City coordinates from a CSV file are projected using `d3.geoNaturalEarth1` and plotted as circles. The React application loads world atlas TopoJSON and city data through custom `useWorldAtlas` and `useCities` hooks, illustrating a straightforward layered approach to geographic point mapping.

MMichael Bruno

93% match

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent circles overlaid on a natural Earth projection map, with circle size encoding population via a square root scale. The map includes land masses, country borders, graticules, and a sphere outline. React manages the component structure, while D3 v7 handles geo projection and path generation through `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded with `d3.csv`, and world geography uses TopoJSON from the world-atlas package, rendered as SVG.

KK3zter

93% match

Loading thumbnail…

points on a map

This map visualization displays global city locations as semi-transparent dots overlaid on a natural Earth projection of the world. The geographic context is rendered using d3.geoNaturalEarth1 with d3.geoPath for land masses, graticules, and sphere outlines. City coordinates from a world cities CSV dataset are projected onto the SVG using the same projection function, with each point drawn as a small circle. The React component structure manages asynchronous data loading for both world atlas TopoJSON data and city coordinates.

BBlake McCarty

93% match

Loading thumbnail…

Points on a Map

A world map rendered with a Natural Earth projection displays city locations as semi-transparent green circles. The visualization layers geographic context using D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to draw the sphere, graticules, landmasses, and country borders from TopoJSON data. City coordinates from a CSV dataset are projected onto the map and plotted as SVG circles, processed through React hooks that load the world atlas and city data asynchronously.

HHollyClarke19

93% match

Loading thumbnail…

Points on Map

This example displays a world map with city points overlaid, using a Natural Earth projection. The map shows country boundaries, graticules, and a sphere outline, with city locations plotted as circles. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the geographic features, while city data is loaded from a CSV via d3.csv. The visualization is built with React, rendering SVG elements, and uses TopoJSON from the World Atlas for country polygons and interior borders.

MMark Lam

93% match