World Cities Population

100%

World Cities Population

✓ Published0🌍 Public

Last edited Mar 28, 2023

Created on Mar 27, 2023

This visualization depicts global city populations on a natural Earth projection, where each city is a white circle scaled by population, with one pixel per 25,000 people. Hovering reveals city names and population counts. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.scaleSqrt to project and size the circles, while d3.zoom enables pan and zoom interaction. Data comes from the world-atlas TopoJSON for country outlines and a worldcities CSV file.

AI-generated description

A world map showing cities and its population.

Refrred the code from this visualization - https://blocks.roadtolarissa.com/curran/752b97cef3f880a813ab

City is represented by circles. The larger the circle, the higher the population. Each pixel in the circle represents 25000 people in the city. The density of the populace can be inferred from the circles' overlapping and increasing brightness. We can hover over the cities to see their names and population.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Cities

This visualization shows the locations of cities worldwide as small dots overlaid on a Natural Earth projection map, with country boundaries rendered in light gray. The map is drawn using d3-geo’s geoNaturalEarth1 projection and geoPath, while city coordinates from a reduced World Cities CSV are projected and plotted as circles. Graticule lines and an outline frame the globe. Data loading uses fetch, topojson-client for country features, and d3.csvParse for city entries, with asynchronous state management coordinating the rendering.

CCurran Kelleher

86% match

Loading thumbnail…

Cities on the World Map

This visualization displays cities as semi-transparent circles on a natural Earth projection, with circle size encoding population using a square-root scale. It renders world land masses, graticules, and country interiors via `geoPath` and `geoNaturalEarth1`, while city positions are projected from latitude and longitude coordinates. Data comes from a CSV of world cities loaded with `d3.csv`, and the world atlas TopoJSON is parsed using `feature` and `mesh` from topojson. React manages the component state, with D3 version 7 providing all geographic and scaling utilities.

KKolezhannochka

85% match

Loading thumbnail…

World Cities

This visualization displays a world map with cities of 50,000 or more inhabitants, sourced from the World Cities Database. The map is rendered using D3’s `geoNaturalEarth1` projection with `geoPath`, while landmasses and internal country borders come from a TopoJSON world atlas. City positions are computed by projecting latitude and longitude coordinates, and are drawn as small circles. The code uses `d3.csvParse` for data loading and `topojson-client` to convert topology into GeoJSON features.

SShad Frigui

85% match

Loading thumbnail…

World Cities Map

This visualization displays a world map with circles marking cities that have populations exceeding 50,000, sourced from the Simplemaps World Cities Database. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and interiors in SVG. Circle radii are scaled proportionally to population using `d3.scaleSqrt`. The visualization is built with React, D3 v5, and TopoJSON, loading world atlas data from `world-atlas@2.0.2`.

VValentineAuer

85% match

Loading thumbnail…

Cities on World Map

This example displays a world map with city populations overlaid as semi-transparent circles. Country boundaries appear as gray landmasses with interior borders, alongside graticules and a sphere outline. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to render the map, with a sqrt scale mapping city population to circle radius. Data comes from a CSV of world cities and TopoJSON land geometry, rendered as SVG within a React framework.

CCatalina Vajiac

85% match

Loading thumbnail…

World city population

This visualization displays a world map with dots representing cities, sized by population. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, graticules, and country borders rendered as SVG paths from TopoJSON data. City coordinates are projected using the same projection function, and each city is drawn as a small semi-transparent circle. The data comes from a CSV file loaded with `d3.csv` in React, and the visualization is built with React components, D3 v5, and SVG, styled with a clean, minimalist aesthetic.

Jjabowen2020@gmail.com

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

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

84% match