Skip to main content
SimilarExport ZIP
100%

Zoomable Globe with Cities on Canvas

✓ Published1🌍 Public
CCurran Kelleher
Last edited Jan 16, 2026
Created on Jan 16, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
92% match
Loading thumbnail…

Fork of Zoomable Globe with Cities Template

This interactive globe visualizes world cities on a rotatable, zoomable orthographic projection with labels sized by population and collision detection. It renders the base map on Canvas using d3.geoOrthographic and d3.geoPath, overlays SVG text labels, and enables drag-to-rotate and scroll-to-zoom via d3.drag and d3.zoom. City and country data load from external JSON and CSV sources, and an RBush spatial index prevents label overlap.

SS Anand
91% match
Loading thumbnail…

Canvas Globe with Panning & Zooming

This canvas globe visualization displays country boundaries using an orthographic projection, allowing users to pan and zoom. Built with D3's `geoOrthographic`, `geoPath`, and `geoGraticule` APIs, it renders directly to a Canvas context. The map supports drag-based rotation and scroll-based zooming via D3's `drag` and `zoom` interactions. It loads world topology data from a remote JSON file and animates state transitions, with retina display support through device pixel ratio scaling.

CCurran Kelleher
86% match
Loading thumbnail…

Globe with Cities - React & D3

An orthographic globe projection displays world landmasses and city markers scaled by population, with graticules and a sphere contour providing geographic context. Built with React for state management and D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` for projection and rendering, the visualization includes interactive rotation via mouse position tracking. City coordinates come from a CSV dataset, and land features are derived from TopoJSON using `topojson.feature` and `topojson.mesh`.

Ddvinubius
84% match
Loading thumbnail…

Globe Zoom - Animate

This interactive globe visualization animates between orthographic and map projections to display geographic data points, with country boundaries rendered as SVG paths. Users can zoom and rotate the globe, search for locations, and toggle between datasets showing meat consumption and population growth percentages. The visualization is built with D3.js version 3, React, and TopoJSON, using d3.geo.orthographic and d3.geo.winkel3 projections with d3.geo.zoom for interaction. Data is loaded from external CSV and TopoJSON sources, with tooltips and a legend providing additional context.

Nnouralkhoury
84% match
Loading thumbnail…

Globe Zoom - Animate

This interactive globe visualization animates between orthographic and map projections to display geographic data points, with country boundaries rendered as SVG paths. Users can zoom and rotate the globe, search for locations, and toggle between datasets showing meat consumption and population growth percentages. The visualization is built with D3.js version 3, React, and TopoJSON, using d3.geo.orthographic and d3.geo.winkel3 projections with d3.geo.zoom for interaction. Data is loaded from external CSV and TopoJSON sources, with tooltips and a legend providing additional context.

Nnouralkhoury
84% match
Loading thumbnail…

Globe Zoom - Animate

This interactive visualization presents global data on a rotatable globe, supporting zoom and pan through d3.behavior.zoom. Users can switch between orthographic, Winkel3, and Mercator projections. The display animates between datasets, including geo-scatterplot transitions and population growth percentages. Country boundaries and graticules render via d3.geo.path, with a custom pattern marking missing data regions. Tooltips provide details on hover.

Nnouralkhoury
84% match