Skip to main content
SimilarExport ZIP
100%

Fork of Spinning Globe

✓ Published0🌍 Public
AArshia Eihami
Last edited Mar 16, 2026
Created on Mar 16, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
95% 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
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
94% 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
94% 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
93% 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
93% 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
93% 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
92% match