100%

Fork of Spinning Globe

✓ Published0🌍 Public

Last edited Feb 23, 2026

Created on Feb 23, 2026

This animated globe uses D3.js with an orthographic projection to render a continuously rotating view of the world. Country polygons from the VisionsCarto World Atlas TopoJSON are drawn via `d3.geoPath`, with a graticule grid and a glowing outline over a dark ocean sphere. Hovering a country highlights it by adjusting opacity and displays a bold cyan label with the nation's name.

AI-generated description

Spinning Globe

An interactive 3D spinning globe built with D3.js that displays countries with a rotating animation.

Features

Smooth rotating globe visualization
Orthographic projection for 3D effect
Graticule grid overlay
Beautiful color scheme
Interactive country name labels on hover
Country highlighting on hover for better visibility

Usage

Watch the globe automatically spin and explore the world! Hover over any country to see its name displayed and the country highlighted.

How It Works

The globe rotates continuously in 3D space
World map data is fetched from the World Atlas TopoJSON
Hover interactions reveal country names with visual highlighting

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Spinning Globe

A spinning globe animation uses an orthographic projection to display world country boundaries from a TopoJSON dataset loaded from unpkg. The d3-geo projection rotates continuously via requestAnimationFrame, updating the globe’s rotation state each frame. A graticule and sphere outline are drawn using d3.geoPath, while country polygons are rendered with distinct strokes, creating a clear, animated visualization of Earth’s geography.

Ss_cural@coloradocollege.edu

94% match

Loading thumbnail…

Fork of Spinning Globe 1

This animated visualization shows a spinning orthographic globe with country boundaries and a graticule grid, rotating continuously around its vertical axis. The map renders world geography from a TopoJSON dataset fetched from unpkg.com, using D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` to project and draw the sphere, outline, and countries. Animation is driven by `requestAnimationFrame`, updating the rotation state to decrement the longitude each frame, which re-renders the projection. The code manages state transitions and cleanup for hot reloading.

Jjeetamakhal@gmail.com

92% match

Loading thumbnail…

Fork of Spinning Globe

A spinning globe made with d3-geo shows countries in a black-and-white orthographic projection, automatically rotating around the vertical axis as graticule lines and a sphere outline remain visible. Using `geoOrthographic`, `geoPath`, and `geoGraticule`, it renders country polygons from TopoJSON data fetched from the visionscarto-world-atlas via `topojson.feature`. Animation is driven by `requestAnimationFrame` and `setState`, decrementing the projection’s rotation along the longitude axis. Both `map.js` and `index.js` coordinate state updates to redraw the globe smoothly, making it suitable for observing the distribution of land and sea over time.

AArshia Eihami

92% match

Loading thumbnail…

Fork of Spinning Globe

This example shows a continuously spinning orthographic globe, with country borders rendered as white outlines against a graticule grid and a sphere outline. The rotation updates its longitude coordinate in each animation frame via `requestAnimationFrame`, while the map is drawn using `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`. Geographic data comes from a TopoJSON world atlas fetched at runtime, processed with `topojson-client`.

NNita

92% match

Loading thumbnail…

Fork of Spinning Globe

A spinning orthographic globe displays country boundaries from the visionscarto-world-atlas TopoJSON dataset, with a graticule and sphere outline. Using `d3.geoOrthographic` and `d3.geoPath`, the projection rotates continuously via state updates, reducing the longitude by 0.2 degrees per frame. The animation is driven by `requestAnimationFrame` calls within a reactive state management system, while `topojson-client` converts the TopoJSON features for rendering.

Ool.ritter@web.de

92% match

Loading thumbnail…

Fork of Spinning Globe

This animated visualization renders an orthographic projection of the world, with country boundaries outlined in white and overlaid with graticule lines. The globe continuously rotates around its vertical axis, and country labels fade in when the map is sufficiently zoomed in. The view is interactive, allowing users to drag and rotate the globe, which adjusts the projection’s rotation parameters. Built with D3 and the `topojson-client` library, it uses `geoOrthographic` and `geoPath` to draw continents and `d3.geoGraticule` for the grid, fetching GeoJSON data from the visionscarto-world-atlas package.

Sshenmubea23@gmail.com

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

91% match

Loading thumbnail…

Fork of Fork of Spinning Globe

A three-dimensional world map rotates continuously as countries are colored according to population data sourced from the file's embedded constants. The orthographic projection and graticule lines are drawn with `d3.geoPath` and `d3.geoGraticule`, while the globe's spin is driven by a recursive `requestAnimationFrame` loop. User interaction via dragging is contemplated, though the current implementation only auto-rotates the view. Topological data is fetched from a remote atlas and converted using `topojson-client`.

Uuser6938420@gmail.com

91% match