Canvas Globe with cities

100%

Canvas Globe with cities

✓ Published0🌍 Public

Last edited Jun 9, 2018

Created on Jun 9, 2018

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.

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 canvas. Also compare:

SVG 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/dab7c2d6ea5ab964d10df0ef1470b90e'>Canvas Globe with cities</a>

forked from <a href='http://bl.ocks.org/Sazerland/'>Sazerland</a>'s block: <a href='http://bl.ocks.org/Sazerland/1f3dd23be302ac327794788c71f69528'>Canvas 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

93% match

Loading thumbnail…

Zoomable Globe with Cities on Canvas

This example presents an interactive, zoomable world globe rendered on an HTML5 Canvas. It visualizes a dataset of global cities, dynamically labeling them based on population and current zoom level. Users can pan the globe via drag and zoom with the scroll wheel, with the projection updating for a smooth experience. The visualization uses D3.js modules including `d3.geoOrthographic`, `d3.geoGraticule`, and `d3.geoPath` for map rendering, and an R-Tree for efficient label placement. Country boundaries and city data come from external JSON and CSV sources.

CCurran Kelleher

87% match

Loading thumbnail…

Zoomable Globe with Cities Template

This interactive globe visualizes major world cities using an orthographic projection, with labels that dynamically appear as users drag to rotate and scroll to zoom. Canvas handles the geographic rendering of countries, graticule, and sphere gradient via `d3.geoOrthographic` and `d3.geoPath`, while an SVG overlay draws city labels using collision detection powered by `rbush`. Population data from a CSV file is filtered and scaled with `d3.scaleSqrt`, with interactive controls implemented through D3’s `drag` and `zoom` behaviors.

CCurran Kelleher

84% match

Loading thumbnail…

SVG Globe with cities

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.

SSazerland

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

84% match

Loading thumbnail…

Cities on a Globe

This interactive globe visualizes cities with populations over 100,000 using circles sized by population. Users can pan and zoom the orthographic projection. The visualization renders country borders from world-atlas TopoJSON data and city coordinates from a Geonames CSV file. It leverages d3.geoOrthographic, d3.geoPath, d3.scaleSqrt, and d3-tip for tooltips, with d3.drag and d3.zoom handling interaction.

CCurran Kelleher

83% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization shows a globe displaying circles for cities with populations over 100,000, using data from Geonames. Users can pan and zoom the orthographic projection, with low-resolution world boundaries shown during movement and higher-resolution boundaries when settled. The globe is rendered using d3.geoPath with a d3.geoOrthographic projection, while city positions are computed and projected onto the SVG. d3.drag handles rotation, and d3.zoom manages scaling. Hovering over a city reveals a tooltip, implemented with d3-tip, showing the city name and formatted population. Data includes country outlines from the world-atlas TOPOJSON files and city coordinates from a preprocessed CSV.

PPiotr Paszek

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

82% match