Skip to main content
SimilarExport ZIP
100%

World Cities

✓ Published1🌍 Public
SShad Frigui
Last edited Sep 5, 2024
Created on Sep 4, 2024
Forked from World Map

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.

AI-generated description

A world map showing cities with population of 50K or more using the World Cities Database.

MIT Licensed

Similar vizzes

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
90% 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
89% match
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
88% 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
87% 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
87% 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
87% 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
86% match
Loading thumbnail…

Fork of Fork of World Cities

This visualization displays a world map with cities plotted as small circles, using geographic coordinates to position each point. The rendering fetches country boundaries from a TopoJSON atlas and city data from a CSV file, then applies the Natural Earth projection via `geoNaturalEarth1` and `geoPath` from d3-geo. City circles are added through D3’s data join, while graticule and outline paths provide spatial context. The code also uses `topojson-client` to convert TopoJSON features and relies on D3’s `csvParse` to handle the dataset.

Aamrouni.kahina2002@gmail.com
85% match