Skip to main content
SimilarExport ZIP
100%

World map

✓ Published0🌍 Public
AAliaksandr
Last edited Jan 14, 2021
Created on Jan 8, 2021
Forked from LIne Chart

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.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

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

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

World Map points

A world map displays city points scaled by population, with country boundaries, graticules, and a sphere outline rendered as SVG. Using React and D3 v5, the visualization employs d3.geoNaturalEarth1 for projection, d3.geoPath for drawing land and graticule geometry, and d3.scaleSqrt for radius mapping. City data comes from a CSV of world cities, while country shapes load from World Atlas TopoJSON. Semi-transparent teal circles overlay the map, with land filled light gray and interiors shown as thin strokes.

Mmarianamartins87
90% match
Loading thumbnail…

World Map v3

A world map visualization displays the Earth's landmasses and 2020 UN population data for cities, with each city represented as a circle whose radius is proportional to its population. The map uses D3.js v7's geoNaturalEarth1 projection, geoPath, and geoGraticule for the geographic features, while the data is rendered as SVG circles with square-root scaled radii. Population data comes from a CSV file of world cities, and the map is built using React's state management to load and display the atlas and population datasets.

JJohn Lewis
90% 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
90% match