World Map with Cities with React & D3

100%

World Map with Cities with React & D3

✓ Published1🌍 Public

Last edited Oct 20, 2021

Created on Oct 20, 2021

This map visualization displays major world cities as circles sized by population on an equal-Earth projection of the globe. Using React hooks, it loads geographic data via `useWorldAtlas` (from TopoJSON) and city data via `useCities` (from a CSV). The `Marks` component renders the sphere, graticules, land outlines, and interiors using `d3.geoPath` and `d3.geoGraticule`, while city circles are positioned by projecting coordinates and scaled with `d3.scaleSqrt`.

AI-generated description

Loading Data with React & D3

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with Cities

This visualization displays a world map with cities, where each city is represented by a circle scaled proportionally to its population. Using D3’s geoNaturalEarth1 projection and geoPath, the map renders landmasses, graticules, and country interiors from TopoJSON data, while city locations are projected from latitude and longitude coordinates. The React component employs the useWorldAtlas and useCities custom hooks to load data via d3.json and d3.csv, with d3.scaleSqrt mapping population to circle radius sizes.

JJohn Huang

92% match

Loading thumbnail…

World Map

A world map visualization displays global cities as semi-transparent circles sized by population, overlaid on a natural Earth projection. The map renders landmasses, country interiors, and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`. City coordinates and population data load via `d3.csv` from a world cities dataset, while geographic boundaries come from TopoJSON world-atlas data. React manages the asynchronous data loading and SVG rendering, with a square-root scale mapping population values to circle radii.

Uuplusv

90% match

Loading thumbnail…

World Map - React & D3

This map visualization displays global cities with scaled square-root population marks overlaid on a land-based world map. Built with React and D3 v5, it renders an SVG projection using `d3.geoMercator()` and `d3.geoPath` with graticules, land features, and interior boundaries. City data comes from a CSV file, and population values drive symbol sizing via `d3.scaleSqrt`.

Ddvinubius

90% match

Loading thumbnail…

World Map

This visualization displays a world map with the population of major cities represented by proportional circles. Circles are sized using a square root scale based on each city’s population, overlaid on a gray landmass with graticules and interior borders. Built with React and D3 v5, it uses `geoEqualEarth`, `geoPath`, and `geoGraticule` for the map projection, while city data comes from a CSV file and world geography from TopoJSON.

33ssalunke

89% match

Loading thumbnail…

World Map with cities

A world map visualization displays cities as semi-transparent circles, with circle area proportional to each city’s population. The map uses the Natural Earth projection via D3’s `geoNaturalEarth1` and `geoPath`, rendering graticules, land masses, and interiors from TopoJSON data. City coordinates and populations come from a CSV file, and the D3 `scaleSqrt` function maps population values to a maximum radius of 20 pixels.

CCarlos Caballero

89% match

Loading thumbnail…

World map

A world map visualization displays global cities as semi-transparent circles, with the circle size proportionally representing each city's population, layered over a graticule and world atlas landmasses. The example uses React to render SVG paths for the sphere, graticules, and land features, while city markers are positioned via the `geoMercator` projection. Population data from the Data Canvas Sense Your City Dataset is mapped to radius using `d3.scaleSqrt`, with the `d3.geoPath` and `d3.geoGraticule` APIs handling geographic geometry.

AAliaksandr

89% match

Loading thumbnail…

World Map with Cities Size

This example presents a world map with circles sized proportionally to city populations, using an equirectangular projection. The visualization layers country landmasses, interior boundaries, and graticules from World Atlas TopoJSON data, with city positions plotted from latitude and longitude coordinates. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and React hooks to load CSV city data and TopoJSON topology. All marks render as SVG elements within a React component structure, with styling applied through CSS classes.

Ssmile2git

89% match

Loading thumbnail…

Untitled

This example displays a world map with cities whose populations exceed 50,000, using circles sized by population via a square-root scale. It renders country boundaries and graticules using `d3.geoPath` with TopoJSON data from World Atlas, while city locations come from the Simplemaps World Cities Database. The React app uses `useWorldAtlas` and `useCities` custom hooks to load data, then passes a size scale and value accessor to a `Marks` component that draws the SVG output.

Eerahma

88% match