Skip to main content
SimilarExport ZIP
100%

world map w/ cities & countries pop!

✓ Published8🌍 Public
Zzach b.
Last edited Mar 20, 2023
Created on Nov 12, 2020

A world map depicts countries with their population encoded in color opacity, alongside cities sized by population via a square-root scale. A graticule and geographic lines overlay the landmasses. The visualization uses React to render SVG marks with D3’s `geoNaturalEarth1` projection and `geoPath`, integrating country boundaries from the world-atlas TopoJSON and city data from the Simplemaps World Cities Database. Country population data from the UN Population 2019 CSV is joined onto the TopoJSON features, with no-data countries displayed uniformly.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

--
Datavis 2020 #37

MIT Licensed

Similar vizzes

Loading thumbnail…

world map w/ cities

This visualization displays a world map with cities whose populations exceed 50,000, using a natural Earth projection that spins to reveal different hemispheres. The map incorporates country boundaries, interior borders, graticules, and geographic lines, with land areas filled by an animated pattern. City markers are sized by population using a square-root scale, while country boundaries include tooltips on hover. The project uses React with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, sourcing city data from Simplemaps and country shapes from World Atlas TopoJSON, all rendered as SVG elements.

Zzach b.
91% match
Loading thumbnail…

World map cities & countries population

This visualization presents a global map depicting both country-level population and major city populations. It uses a natural Earth projection, which can be rotated through a spin parameter. Country population density is encoded through fill opacity, while city population determines circle size using a square root scale. The map renders SVG elements via React, using d3-geoPath for geographic features, d3-geo-projection for the projection, and TopoJSON loaded from world-atlas. Hovering reveals country names and formatted population values, with cities also displaying their populations. Data comes from CSV sources for cities and country populations.

VVAbhiram99
90% match
Loading thumbnail…

Fork of world map w/ cities & countries pop!

A world map visualization displays global city populations and country population data, with city circles sized by population and country polygons colored by opacity according to population. The visualization uses a Natural Earth projection from d3-geo-projection, rendered with React and SVG paths via d3.geoPath. City data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON. Hovering over cities or countries reveals population tooltips, with graticules and geographic reference lines overlaid for context.

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

world map w/ cities

This example presents a world map visualization of cities with populations exceeding 50,000. It uses a React framework with SVG rendering, employing d3-geo-projection’s geoNaturalEarth1 projection and d3-geo’s geoPath to draw landmasses, country boundaries, graticules, and geographic lines. City locations are plotted as circles from Simplemaps’ World Cities Database, while country and land data come from World Atlas TopoJSON. The visualization includes hover tooltips showing country names, with styling applied through CSS.

Zzach b.
89% match
Loading thumbnail…

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities exceeding 50,000 population and country-level population data. Cities appear as scaled circles based on population, while countries vary in opacity according to their population figures. The map uses React with d3-geo-projection’s `geoNaturalEarth1` projection and `geoPath` for rendering. City data comes from Simplemaps, country boundaries from World Atlas TopoJSON, and population values from a UN 2019 dataset. Additional geographic lines and graticules enhance the map’s spatial context.

Rradhadevarapu
89% match
Loading thumbnail…

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities exceeding 50,000 population and country-level population data. Cities appear as scaled circles based on population, while countries vary in opacity according to their population figures. The map uses React with d3-geo-projection’s `geoNaturalEarth1` projection and `geoPath` for rendering. City data comes from Simplemaps, country boundaries from World Atlas TopoJSON, and population values from a UN 2019 dataset. Additional geographic lines and graticules enhance the map’s spatial context.

Rradhadevarapu
89% 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
89% match