Spinning Globe

100%

Spinning Globe

✓ Published0🌍 Public

Last edited Sep 27, 2017

Created on Sep 26, 2017

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.

AI-generated description

A globe that spins. Uses world-110m from TOPOJSON World Atlas. Inspired by This Is a Globe.

This was the first stop along the way for creating a more involved map. I was so amazed at how little code was required to get this to show up.

mit Licensed

Similar vizzes

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

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

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

90% match

Loading thumbnail…

Simplified Globe

A simplified globe spins continuously, displaying the world's landmasses as a dark silhouette against a plain background. The visualization uses an orthographic projection (`d3.geoOrthographic`) and renders the geographic features as an SVG path via `d3.geoPath`. Land data comes from the `world-110m` TopoJSON file, which is simplified with `topojson.presimplify` and `topojson.simplify`. A `d3.timer` drives the animation, rotating the projection and tilting it sinusoidally to create a wobbling effect.

CCurran Kelleher

89% match

Loading thumbnail…

spinning_globe_NH

A spinning orthographic globe displays world countries as filled paths, rotating smoothly around a tilted axis. The visualization uses d3-geo’s `geoOrthographic` projection, `geoPath`, and `geoGraticule` to render landmasses and grid lines. Country boundaries come from the visionscarto-world-atlas TopoJSON dataset, fetched via `fetch` and converted with `topojson-client`. The animation is driven by React state updates, with rotation angles changing each frame via `requestAnimationFrame`, redrawing the map on every render.

NNavak94

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

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

88% match

Loading thumbnail…

Spinny Globe

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.

Mmbostock

88% match