World Map

100%

✓ Published4🌍 Public

Last edited Oct 12, 2023

Created on Oct 3, 2023

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.

AI-generated description

A program that loads in some data CSS Named Colors using D3 utilities and uses React state to Keep track of the data.

MIT Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

World map

This world map visualizes global city populations, with semi-transparent circles sized by population using a square-root scale. A Natural Earth projection draws the landmasses, graticule, and country borders via D3's `geoNaturalEarth1` and `geoPath`, while city coordinates are projected and rendered as SVG circles. The map loads geographic data from World Atlas TopoJSON and population data from a CSV, using `topojson.feature` and `topojson.mesh` to construct the land and interior boundaries.

TTakuya Kitazawa

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

92% match

Loading thumbnail…

world map with points

This example visualizes global population distribution using a natural Earth projection, plotting cities as semi-transparent circles sized by population. The map renders SVG paths for land, graticules, and sphere outlines via `d3.geoPath`, while React hooks load world atlas TopoJSON and city CSV data, with `d3.scaleSqrt` mapping population to circle radii.

MMohammed Banani | MbDev

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

91% match

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

91% match