Skip to main content
SimilarExport ZIP
100%

Spinny Globe

✓ Published0🌍 Public
Mmbostock
Last edited Dec 20, 2022
Created on Sep 27, 2011

A sphere rotates continuously, displaying only the visible front hemisphere through a navigable orthographic projection. The example uses D3’s `d3.geo.orthographic` projection with great-circle clipping and renders land geometries onto a Canvas via `d3.geo.path`. The rotation is driven by a `d3.timer` that updates the projection’s rotation over time. Land data comes from Natural Earth’s world-110m dataset, loaded as TopoJSON.

AI-generated description

This is a rotating orthographic projection, a type of azimuthal projection. Only the visible front hemisphere is shown, using great-circle clipping. D3 includes support for many other projections, as well as for rendering great arcs.

The geometry for this example comes from Natural Earth’s land dataset via the World Atlas project.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Spinning Globe

A spinning globe displays the world’s landmasses in an orthographic projection, rotating continuously while its tilt oscillates. The visualization uses D3 v4’s `d3.geoOrthographic()` projection and `d3.geoPath()` to render country polygons from the `world-110m` TopoJSON dataset. A timer updates the projection’s rotation and tilt, redrawing the SVG path each frame to create the animated effect.

CCurran Kelleher
88% match
Loading thumbnail…

Spinning Globe

A spinning globe rendered with an orthographic projection, showing country boundaries from the visionscarto World Atlas TopoJSON dataset. The view rotates continuously around its vertical axis using `requestAnimationFrame` to incrementally adjust `projection.rotate`. Built with `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`, the animation highlights the graticule lines, country outlines, and a bold sphere outline as the Earth turns.

CCurran Kelleher
86% match
Loading thumbnail…

See-Through Globe

A rotating see-through globe displays both the front and back hemispheres simultaneously. The orthographic projection, implemented with `d3.geo.orthographic`, first renders the entire sphere as a light outline, then draws the front-facing land polygons in a darker tone using the `d3.geo.path` API on a Canvas. A graticule overlays the sphere, and the entire scene rotates continuously via a timer. The code loads world-110m GeoJSON data from a gist and relies on `topojson.feature` to extract land polygons.

Mmbostock
85% match
Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Mmbostock
85% match
Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock
85% match
Loading thumbnail…

Fork of Spinning Globe

This example presents a spinning globe, rendered as an orthographic projection that continuously rotates to showcase Earth's geography. The visualization uses d3-geo's `geoOrthographic` projection and `geoPath` to draw country outlines from TopoJSON data loaded from the visionscarto-world-atlas, along with a graticule and sphere outline. An animation is driven by `requestAnimationFrame`, which updates the projection's rotation state to create the spinning effect. The code is structured with a main module handling data fetching and state management, while a separate map module draws the geographic elements.

Ool.ritter@web.de
85% match
Loading thumbnail…

Spinning Globe

A dark globe rendered with an orthographic projection spins continuously, its country borders drawn in red against a black background. The animation updates the projection’s rotation each frame via `requestAnimationFrame`. Built with D3 v7, it uses `geoOrthographic`, `geoPath`, and `geoGraticule` to draw the sphere and graticule, while country outlines come from the `visionscarto-world-atlas` TopoJSON dataset processed with `topojson-client`.

LLauren
85% match
Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière
84% match