Mapping : Part 2 - Cities

Mapping Part 3: Cities and Pop.

This example visualizes the populations of cities on a world map, using circles sized proportionally to population data. It shows a geographic context with landmasses, graticules, and sphere outlines, layered with semi-transparent teal points. Built with React and d3.v5, the map uses `geoNaturalEarth1` for projection and `geoPath` for rendering. City data is loaded from a CSV, while geographic boundaries come from the world-atlas TopoJSON dataset. Circle radii are scaled using `scaleSqrt`.

Zzeeeeem

Mapping: Part 1

This example displays a world map using the Natural Earth projection, with landmasses shown in teal, country borders in a lighter teal, graticules in gray, and the globe’s sphere in a light background. It focuses on the fundamental process of converting geographic data into visual form. The code uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to generate SVG paths from TopoJSON data loaded via the `world-atlas` dataset. The project is built with React, rendering the map through reusable components, and applies styling through CSS classes.

Zzeeeeem

World Map v2

This example displays a world map with cities plotted as points, using a natural Earth projection to render country boundaries, graticules, and a sphere outline. The visualization loads geographic data from a TopoJSON world atlas and city coordinates from a CSV file, then projects them using d3.geoNaturalEarth1 and d3.geoPath. React manages the component state and rendering, while d3.csv and d3.json fetch the datasets. The map is drawn entirely in SVG, with each city represented as a small circle positioned by its longitude and latitude.

JJohn Lewis

Points on a Map

This example displays a natural Earth projection map with country boundaries, graticules, and city points overlaid as semi-transparent teal circles. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses and interior borders from World Atlas TopoJSON data, while a CSV of world cities is mapped through the projection to position each dot. The React component structure manages asynchronous data loading via useWorldAtlas and useCities hooks, with SVG rendering styled through CSS to create a clean, polished aesthetic.

Aaakarsh satyam

Points on a map

This example displays a natural Earth projection world map with city locations plotted as semi-transparent teal circles. It loads world geography from the World Atlas TopoJSON and city coordinates from a CSV file. Using React hooks, it fetches both datasets and renders them as SVG elements. The map includes graticules, country boundaries, and interior borders, with cities positioned via the `d3.geoNaturalEarth1` projection and `d3.geoPath`. The visualization is built with D3 v6, React, and uses `d3.geoGraticule` for the background grid.

Ssurikmeetr

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

Points on a Map

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.

MMichael Bergerson

Worldmap with cities

This example displays a world map using a Natural Earth projection, with the landmasses rendered as gray polygons and graticules overlaid. City locations are plotted as semi-transparent circles, with their radius scaled by the square root of each city's population. Built with React, the visualization uses D3.js modules `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the map projections and graticule, while `scaleSqrt` maps population values to circle sizes. City data is loaded from a CSV file, and world atlas geometries are fetched as TopoJSON, which is processed through `topojson` functions.

DDaniel Zsido