World Cities (night)

100%

World Cities (night)

✓ Published0🌍 Public

Last edited Apr 12, 2024

Created on Apr 2, 2024

A world map depicts the top 10,000 cities by population as glowing yellow-to-white dots, with capital cities outlined in red. The dark ocean and landmasses provide a night-time aesthetic, and the map is rendered using a Natural Earth projection. The visualization uses d3.geoPath to draw the world map and graticule, while city positions are projected with d3.geoNaturalEarth1. Data comes from the Simplemaps World Cities Database, and city point sizes are scaled by the square root of their population.

AI-generated description

A world map showing cities at night with red accent color around capital cities. 'Only' the top 10k cities are shown, because of the scaling relative to population, smaller cities are way too small.

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

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

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

80% match

Loading thumbnail…

World Cities Population

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.

Kkratikashetty1102@gmail.com

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

80% match

Loading thumbnail…

World Cities

This visualization displays global cities as tiny dots on a natural Earth projection, overlaid with graticule lines and country outlines. It uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the map, while `topojson-client` converts TopoJSON country boundaries. City coordinates are projected from latitude and longitude, and each dot’s radius is fixed at 0.2 pixels. Data comes from a reduced World Cities CSV and a 110m world atlas, loaded via `fetch` and parsed with `csvParse`.

Aabell@wpi.edu

79% match

Loading thumbnail…

Fork of World Cities

This visualization shows the world's cities as tiny dots on a natural Earth projection, with country boundaries rendered in light gray and graticule lines overlaid for geographic context. The code uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw the map, while fetching geographic data from a TopoJSON world atlas and city coordinates from a CSV file. Each city’s population is parsed but not visually encoded; instead, all cities appear as uniform 0.2-pixel-radius circles. The rendering is driven by D3 selections with data joins, and topojson-client converts the TopoJSON features into GeoJSON for mapping.

BBen Trantanella

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

79% match