Skip to main content
SimilarExport ZIP
100%

World Cities

✓ Published9🌍 Public
CCurran Kelleher
Last edited Feb 26, 2024
Created on Mar 21, 2023
Forked from Simple World Map

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.

AI-generated description

A world map showing cities.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Cities

This visualization displays a world map with cities as small dots, rendered using a Natural Earth projection. It uses D3’s `geoNaturalEarth1` for the projection and `geoPath` to draw country boundaries, graticules, and an outline. City data is loaded from a CSV containing latitude, longitude, and population, with each point plotted via `projection`. The map updates asynchronously, fetching TopoJSON country boundaries and city data before rendering. The graticule and country paths are styled with light fills and strokes, while cities appear as tiny circles, emphasizing global population distribution.

Rreddysushma994@gmail.com
87% match
Loading thumbnail…

Fork of World Cities

This visualization displays a world map of cities, with each city represented by a small dot positioned according to its geographic coordinates. It highlights the global distribution of populated places, using a Natural Earth projection to render continents and a graticule for reference. The code loads GeoJSON country boundaries via TopoJSON and city data from a CSV, then uses D3’s geoNaturalEarth1, geoPath, and geoGraticule to project and draw the features. Circles are plotted with a radius of 0.2 pixels, while the outline path frames the projection.

Vvidiyalasahithi1999@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
86% 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
86% 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
86% match
Loading thumbnail…

World Map

This visualization displays a world map with city locations overlaid as semi-transparent dots. The map uses the Natural Earth projection via `d3.geoNaturalEarth1`, with graticules, land polygons, and country boundaries rendered through `d3.geoPath` and TopoJSON data from the world-atlas package. City coordinates from a CSV file are projected and drawn as SVG circles. The React component manages data loading with custom hooks, while D3 v5 handles geo and CSV parsing.

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