Skip to main content
SimilarExport ZIP
100%

World Map - React & D3

✓ Published1🌍 Public
Ddvinubius
Last edited Jul 8, 2021
Created on Jun 3, 2021

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`.

AI-generated description
MIT Licensed

Similar vizzes

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
91% 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
91% 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
91% match
Loading thumbnail…

World Map

This example visualizes global population distribution by rendering a world map with cities represented as scaled circles. The map displays land masses, graticules, and country borders, while city markers use a square-root scale to encode population size. The visualization is built with React and D3 v5, using `geoNaturalEarth1` projection via `d3.geoPath` and topojson data from the world-atlas package. Population data comes from a CSV of world cities, with React hooks managing asynchronous data loading.

MMatias Conde
91% match
Loading thumbnail…

World Map with Cities with React & D3

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`.

MManon ROMAIN
90% match
Loading thumbnail…

World Map with City Points Sized

A world map with city points sized by population. The visualization uses a natural Earth projection with graticules and land boundaries rendered as SVG paths. City populations are scaled using a square root scale, mapping to circle radii with a maximum of 15 pixels. The chart is built with React, D3 v5's `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, and loads city data as CSV and world atlas topology JSON.

SSam Hege
89% match
Loading thumbnail…

World Map

This visualization displays a natural Earth projection world map with cities represented as semi-transparent circles sized by population. The map renders land masses in light gray with graticules and country borders overlaid. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for geographic projections, while `scaleSqrt` maps population data to circle radii. City coordinates and populations come from a CSV of world cities, and country boundaries derive from TopoJSON world-atlas data.

Ssophievanderhorst
89% match
Loading thumbnail…

World Map with Data Points

This visualization displays world city population data as scaled circles on a natural Earth projection. The React app combines D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render landmasses, country interiors, and graticules, while `scaleSqrt` maps population values to circle radii. Data comes from a preprocessed world cities CSV, with city coordinates projected via D3’s `projection` function to position each semi-transparent point.

RRichardPearce60
89% match