Skip to main content
100%

Spinning Globe

✓ Published0🌍 Public
Aapratt2003
Last edited Oct 27, 2017
Created on Oct 27, 2017

This example displays a spinning orthographic globe using D3 v4 and TopoJSON. It loads land geometry from the `world-110m` TopoJSON file and renders it as an SVG path. A `d3.timer` continuously updates the projection’s rotation, spinning the globe horizontally while tilting it vertically with a sinusoidal motion. The visualization demonstrates how minimal code can create an animated geographic visualization using D3’s geo path and timer modules.

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.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/a9555f8041f04a5cbfb53e6f5c53caae'>Spinning Globe</a>

mit Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Spinning Globe

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.

Aaaadarshsingh36@gmail.com
91% match
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
90% 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
89% 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
89% match
Loading thumbnail…

Spinning Globe BP

This example renders a continuously rotating orthographic globe using D3's `geoOrthographic` projection and `geoPath` to draw landmasses and a graticule. World map data comes from the VisionsCarto World Atlas as TopoJSON, processed with `topojson-client`. The animation updates the projection's rotation each frame via `requestAnimationFrame`, modifying state and redrawing the spherical outline and coastline in a dark, teal color scheme.

Aalfindavid7274@gmail.com
88% 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
88% 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