SVG Globe with cities

100%

SVG Globe with cities

✓ Published0🌍 Public

Last edited Jun 9, 2018

Created on Jun 9, 2018

An interactive SVG globe displays roughly 48,000 cities from the MaxMind WorldCities database, with each city shown as a red point. Users can pan and zoom the globe, which uses `d3.geoOrthographic` and `d3.geoPath` to render the sphere, graticule, and country borders. The implementation leverages `d3.zoom` for navigation, and dynamically redraws the paths on each zoom or drag event. The city data is loaded from a CSV and plotted as a single `MultiPoint` feature, with population values available but not visually encoded.

AI-generated description

A globe with pan and zoom showing all cities with population data from the MaxMind WorldCities database (~48k cities).

The globe is rendered with SVG. Also compare:

Canvas Globe with cities and

Canvas Globe with cities - buffered

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/larsvers/'>larsvers</a>'s block: <a href='http://bl.ocks.org/larsvers/f8efeabf480244d59001310f70815b4e'>SVG Globe with cities</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Canvas Globe with cities

This interactive visualization presents a world map showing the distribution of approximately 48,000 cities from the MaxMind WorldCities database. Using an orthographic projection rendered on a Canvas element, the map displays each city as a red point overlaid on a graticule and land polygons. The view supports pan and zoom interactions through the d3.zoom API, with the projection updating dynamically. The implementation leverages d3.geoOrthographic, d3.geoPath, and d3.geoGraticule within a Vue framework, with animation driven by requestAnimationFrame.

SSazerland

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

86% match

Loading thumbnail…

Cities on a Globe

This example presents an interactive orthographic globe that plots circles for cities with populations over 100,000, with circle size proportional to population. Users can pan and zoom the globe by dragging or using the scroll wheel, which triggers dynamic re-rendering of city markers. The visualization uses D3 v4 with d3.geoOrthographic projection, d3.geoPath, d3.drag, and d3.zoom, along with TopoJSON world-atlas data for country boundaries. City data originates from a preprocessed Geonames dataset, and the code displays tooltips via d3-tip on hover.

DDavid Allyn

85% match

Loading thumbnail…

Zoomable Globe with Cities on SVG

This visualization presents an interactive 3D globe of the world with city labels that appear based on population and zoom level. Users can drag to rotate the globe and scroll to zoom, with label visibility adjusting dynamically. Built with React and D3 v7, it uses `geoOrthographic` projection, `geoPath`, `geoGraticule`, and drag/zoom behaviors. City and world atlas data come from external JSON and CSV sources, with an SVG-based renderer featuring configurable colors and label styling.

CCurran Kelleher

84% match

Loading thumbnail…

Canvas Globe with cities

This example visualizes the locations and populations of cities from the MaxMind WorldCities database (~48,000 points) on a rotatable and zoomable orthographic globe. It renders the graticule, landmasses, and city points using the Canvas API, with d3.geoOrthographic projection and d3.geoPath for geographic mapping. The visualization is interactive, supporting both pan and zoom gestures through d3.zoom, which updates the projection’s rotation and scale. The city data includes a subset of major world cities with their names, populations, and coordinates.

SSazerland

84% match

Loading thumbnail…

SVG intro

A scatterplot of global cities maps each location with a circle scaled by population, using longitude and latitude for positioning on an 800×400 SVG canvas. Built with Vue and D3.js, the visualization loads city data from a CSV file and applies a square-root scale so circle area corresponds to population size. The code uses `d3.scale.sqrt()` and `d3.extent()` to set scales, then renders semi-transparent white circles against a black background.

SSazerland

84% match

Loading thumbnail…

Fork of Cities on a Globe

An interactive SVG globe shows the world’s cities with over 100,000 inhabitants, sized by population; hovering reveals names and counts. Panning by dragging and zooming via the mouse wheel or pinch gestures rotates the orthographic projection, with lower-resolution country boundaries during active motion. The visualization uses d3.geoPath, d3.geoOrthographic, d3.drag, d3.zoom, and d3.queue to load and project GeoJSON from world-atlas and CSV population data from Geonames.

AAki78

83% match

Loading thumbnail…

Cities on the Globe

A rotatable and zoomable orthographic globe displays circles for cities with populations over 100,000, sized by population and colored semi-transparent blue. Dragging rotates the globe using D3’s drag and projection inversion; zooming scales the projection. Built with D3 v4, it uses `d3.geoOrthographic` and `d3.geoPath` to render country boundaries from TopoJSON world-atlas data, while city coordinates come from a preprocessed Geonames CSV. Population-based circle radii scale with zoom, and hover tooltips (via d3-tip) show each city’s name and formatted population.

SSazerland

83% match