Fork of Spinning Globe

100%

Fork of Spinning Globe

✓ Published2🌍 Public

Last edited Jul 25, 2026

Created on Jul 25, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

93% match

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

92% match

Loading thumbnail…

Fork of Spinning Globe

This example presents a continuously rotating orthographic projection of the world, with country boundaries rendered in white over a graticule. The sphere tilts at a fixed -20 degree latitude while spinning on its y-axis using `requestAnimationFrame`. The visualization relies on `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the map, fetching country data from a visionscarto TopoJSON atlas via `topojson-client`. A black outline is drawn using a `Sphere` geometry path.

SSeekerzero

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

92% match

Loading thumbnail…

Fork of Fork of Spinning Globe

This example shows an animated orthographic projection of the world, with countries rendered as filled paths and a graticule overlay, all rotating in three dimensions. The animation is driven by `projection.rotate` from `d3.geo`, adjusting the view based on state changes. It uses `d3.geoPath` to project the map, `d3.geoGraticule` for the grid, and fetches country boundaries from the `visionscarto-world-atlas` as TopoJSON, which is converted to features via `topojson-client`. The rotation is updated each frame using `requestAnimationFrame` to create a spinning globe effect.

Ool.ritter@web.de

92% match

Loading thumbnail…

Fork of Spinning Globe

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.

Aaaadarshsingh36@gmail.com

91% match