Spinning Globe

100%

Spinning Globe

✓ Published0🌍 Public

Last edited Feb 23, 2026

Created on Feb 23, 2026

This example visualizes the Earth as a spinning globe, using an orthographic projection to render country boundaries and a graticule in a dark-outlined sphere. The animation continuously updates the rotation state via `requestAnimationFrame`, gradually shifting the longitude to create a smooth spin. The code uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` from the D3 library, along with `topojson-client` to convert TopoJSON data fetched from the visionscarto-world-atlas into GeoJSON features. The visualization responds to window resizing, scaling the SVG output accordingly.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Spinning Globe

A spinning globe uses an orthographic projection to display world country boundaries from a TopoJSON file. The globe rotates continuously around its vertical axis as the projection’s rotation state updates on each animation frame via `requestAnimationFrame`. The code applies `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw country paths, a graticule, and a sphere outline, with state managed through setState and cleanup.

JJoel Jäggli

93% match

Loading thumbnail…

Spinning Globe

A spinning globe rendered with an orthographic projection animates its rotation around the y-axis. The visualization displays country boundaries and a graticule over a dark background, with a visible sphere outline. The code uses d3-geo’s `geoOrthographic`, `geoPath`, and `geoGraticule` functions to draw the map, and requests animation frames via `requestAnimationFrame` to update the projection’s `rotate` property. World country data comes from the visionscarto-world-atlas TopoJSON file processed with `topojson-client`.

SShad Frigui

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

92% match

Loading thumbnail…

Spinning Globe

This example shows a world map projected onto a rotating globe, using an orthographic projection to create a 3D effect. It displays the graticule and country boundaries with a simple, clean visual style. The code uses `d3.geoOrthographic` and `d3.geoPath` to render the map, and `d3.geoGraticule` for the grid lines. It loads country data from a TopoJSON file via `topojson-client` and manages rotation through state. The animation is implemented using `requestAnimationFrame` to update the rotation values, though it is currently disabled.

SShad Frigui

92% match

Loading thumbnail…

Spinning Globe

This example displays a continuously rotating orthographic globe, with landmasses rendered in a light gray and internal country borders drawn as a subtle mesh over a pale blue ocean. The map is built using the D3 libraries `d3.geoOrthographic`, `d3.geoPath`, and `topojson-client`, which fetch and process a world-atlas GeoJSON file from unpkg. Each animation frame slightly decrements the rotation parameter, driving the spinning effect, while the view is initialized to fit the browser window.

SShad Frigui

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

91% match

Loading thumbnail…

Spinning Globe

A world map spins continuously to show all continents and the graticule grid, rendered as an orthographic projection that creates the illusion of a rotating globe. The code uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw the sphere outline, graticule, and country borders, with data loaded from the visionscarto world-atlas TopoJSON file via `topojson-client`. Animation is driven by `requestAnimationFrame` in React, updating the projection’s rotation array each frame.

Sstchiang

91% match

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

91% match