Skip to main content
SimilarExport ZIP
100%

Zoomable Globe with Cities Template

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

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.

AI-generated description

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
  • ⚡ Canvas rendering for geo with SVG labels for superior text quality

Architecture

  • Canvas Layer: Renders geographic features (sphere, graticule, countries)
  • SVG Overlay: Renders city labels with proper text antialiasing and paint-order

The separation allows optimal performance for each rendering type while maintaining clean visual output.

Interaction

  • Drag to rotate the globe
  • Scroll to zoom in/out
  • City labels appear dynamically based on population and viewport visibility
MIT Licensed

Similar vizzes

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

Cities on a Globe

An interactive globe displays pink circles for cities with populations over 100,000, sized by population and hoverable for tooltips. Users can drag to rotate the globe via `d3.drag` and zoom with `d3.zoom`, which adjusts an orthographic projection’s scale. The visualization draws country boundaries from TopoJSON `world-110m` and `world-50m` files, using `d3.geoPath` to project shapes and city coordinates, while switching resolution during rotation. City data comes from preprocessed GeoNames CSV, and tooltips are generated with `d3-tip`.

KKusum Naithani
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
84% match
Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays cities with populations over 100,000 as pink circles, with size scaled by population and hover tooltips showing city names and populations. Users can drag to rotate the globe and zoom to adjust the scale, switching between 110m and 50m resolution world boundaries during interaction. Built with D3 v4, it uses `d3.geoOrthographic` for projection, `d3.geoPath` for rendering country shapes, `d3.drag` and `d3.zoom` for interaction, and `d3-tip` for tooltips. City data comes from a preprocessed GeoNames CSV, while country geometries use TopoJSON from the world-atlas package.

Ccriancinhazinha
83% match