Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Nov 24, 2021

Created on Nov 24, 2021

This visualization displays a world map with a scatter plot overlay of city locations, using data from the Data Canvas Sense Your City dataset. The map renders geographic features with d3.geoPath and geoNaturalEarth1 projections, including graticules, landmasses, and country interiors. City points appear as semi-transparent teal circles projected onto the map using their latitude and longitude coordinates. The React-based application loads world atlas topology from unpkg and city CSV data, then renders everything as SVG elements through D3 v7's geo and projection utilities.

AI-generated description

A scatter plot of Data Canvas Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example visualizes the geographical distribution of cities from the Data Canvas Sense Your City Dataset, plotting each city as a point on a natural Earth projection of the world. The map is rendered in SVG using React, with d3.geoNaturalEarth1 and d3.geoPath drawing the sphere, graticules, landmasses, and country interiors from TopoJSON data. A supplementary scatter plot layer would likely show quantitative city attributes, though the current code only displays the spatial positions. The styling uses custom CSS classes for land, sphere, and graticule fills.

CCodeDuckie99

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

91% match

Loading thumbnail…

Points on a Map

A world map rendered with SVG marks shows the globe in muted grays with graticule lines and country borders, overlaid with translucent teal circles sized by city population. The visualization uses a React component with d3’s geoNaturalEarth1 projection and geoPath to draw land and interiors from a TopoJSON world atlas, while city coordinates from a CSV are projected and drawn as circles with a square-root scale mapped to population. The data comes from the Data Canvas Sense Your City Dataset.

AAndrea Picciau

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

91% match

Loading thumbnail…

Points on a Map

This example displays a world map with points marking cities. The visualization uses a Natural Earth projection, rendered as a sphere with graticules and landmasses, overlaid with semi-transparent teal circles representing city locations from a CSV dataset. The map is drawn using SVG paths generated by `d3.geoPath` and the `geoNaturalEarth1` projection, while city coordinates are projected and placed as circles. The React application loads the world atlas and city data via `d3.json` and `d3.csv` helpers, with the map and points updated upon data arrival.

PPeter Krevenets

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

91% match

Loading thumbnail…

Points on a Map

This example visualizes the geographic distribution of cities as small, semi-transparent points overlaid on a world map. The map is rendered using React and D3, with landmasses and graticules drawn via `d3.geoPath` and `d3.geoGraticule` from a Natural Earth TopoJSON source. City coordinates are loaded from a CSV file and projected using `d3.geoNaturalEarth1`, with each point plotted as an SVG circle. The styling uses a light gray for land and graticules, contrasting with the teal city points.

CChris Briggs

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

91% match