Simplemaps: World Cities Database

100%

Simplemaps: World Cities Database

✓ Published0🌍 Public

Last edited Oct 1, 2019

Created on Oct 1, 2019

This example visualizes a world map of cities with populations over 50,000, using a dataset sourced from Simplemaps. It plots each city as a point positioned by latitude and longitude, with point size reflecting population. The visualization uses Vue for the application structure and D3’s `d3.geoPath` for rendering map outlines, while city markers are drawn on a canvas using `getImageData` to sample pixel colors for styling.

AI-generated description

A dataset containing cities whose population is larger than 50,000.

Downloaded from Simplemaps: World Cities Database October 2019.

Manually altered using LibreOffice Calc to:

Exclude cities smaller than 50,000
Remove all rows except city,lat,lng,country,population.

Original LICENSE text included from the download.

Similar vizzes

Loading thumbnail…

D3 Example

This interactive visualization displays global cities with populations over 100,000 as circles on a world map. Using SVG rendering within a Vue application, each city is represented by a circle whose area corresponds to population, with one filled pixel per 50,000 people. Overlapping city circles create brighter regions, visually encoding population density. Users can pan and zoom to explore, and hovering reveals a tooltip with the city name and population via d3-tip. The visualization supports scroll-wheel zooming and drag-based panning, with data sourced from GeoNames.

CCurran Kelleher

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

80% match

Loading thumbnail…

Dataviz 10 - Points on map

This visualization displays a world map with points marking cities that have populations exceeding 50,000, using data from the Simplemaps World Cities Database. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, featuring graticules, land masses, and interior boundaries from the World Atlas TopoJSON. City locations are plotted as semi-transparent teal circles positioned via the projection function. The visualization is built with React and D3 v5, loading geographic and city datasets asynchronously through custom hooks before rendering.

RRyAlpha

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

80% match

Loading thumbnail…

Cities on the Globe

This interactive globe displays all cities with populations over 100,000 as proportional circles, rendered in SVG with d3.geoOrthographic projection and d3.geoPath. Users pan by dragging and zoom with the mouse wheel, swapping between low- and high-resolution TopoJSON world boundaries (110m and 50m) during movement for performance. City data comes from a CSV of 250 cities, with tooltips via d3-tip showing population counts.

CCurran Kelleher

80% match

Loading thumbnail…

Points on a Map

This example displays a world map with cities whose populations exceed 50,000, plotted as semi-transparent circles. The map uses a Natural Earth projection via `d3.geoNaturalEarth1`, with landmasses, graticules, and country interiors drawn using `d3.geoPath` from the World Atlas TopoJSON dataset. City coordinates are projected from latitude and longitude into SVG circle positions, with the data loaded from a Simplemaps CSV via `d3.csv`. The rendering is handled in React, producing a clean, styled SVG visualization.

GGiovanniD_

79% match

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.

79% match

Loading thumbnail…

world ma Points on a Map

This visualization displays a world map with points marking cities whose population exceeds 50,000, sourced from the Simplemaps World Cities Database. It uses a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, interiors, and a sphere outline from World Atlas TopoJSON data. City points are projected and drawn as semi-transparent circles. The React-based implementation, using d3.v5 and SVG rendering, creates a clean, minimal aesthetic with light gray landmasses and teal city markers.

Ssagar limbu

79% match