Skip to main content
SimilarExport ZIP
100%

Zoomable Globe with Cities on SVG

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

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.

AI-generated description

Interactive Submarine Cable Map

A beautiful, interactive 3D globe visualization showing worldwide city networks. Built with D3.js and featuring dark mode aesthetics.

Data from:

Features

  • 🌍 Interactive 3D globe with orthographic projection
  • 🏙️ Dynamic city labels with collision detection
  • 🔄 Smooth drag-to-rotate and zoom interactions
  • 🌙 Dark mode aesthetic with elegant color scheme

  • 🎨
  • ⚡ Usa
  • ⚡ to te tlobehe globe, sc to zoom in/out. City labels appear dynamically based on population and viewport visibility.
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 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
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
90% 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
88% 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
86% 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
86% match
Loading thumbnail…

ZoomableGlobe

This interactive visualization presents a zoomable orthographic globe, displaying country boundaries and graticules sourced from the World Atlas TopoJSON. The globe is rendered as SVG paths using `d3.geoOrthographic` and `d3.geoPath`, with interactions managed by `d3.zoom`. It uses React to update the projection’s transform state during pan and zoom operations, adjusting stroke widths inversely to the zoom scale. The sphere and land features are styled with distinct fills, while interiors are outlined for clarity.

YYeeleng Scott Vang
85% match
Loading thumbnail…

Globe Zoom - Animate

This interactive visualization presents a globe that users can spin and zoom into, transitioning between orthographic, Winkel, and Mercator projections. It overlays animated geo-scatterplot transitions of global meat consumption and population growth data. Built with React and D3.js v3, it uses `d3.geo.path()` for map rendering, `d3.behavior.zoom()` for interaction, and SVG marks for data points, with tooltips showing exact values.

TTimmyLu
85% match