Skip to main content
SimilarExport ZIP
100%

Spinning Globe

✓ Published2🌍 Public
SShad Frigui
Last edited Sep 5, 2024
Created on Sep 5, 2024
Forked from World Cities

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.

AI-generated description

A spinning globe.

MIT Licensed

Similar vizzes

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

Spinning Globe

A spinning orthographic globe renders world landmasses as gray paths on a blue sphere, with the rotation state controlled externally. Using `d3-geo`’s `geoOrthographic`, `geoPath`, and `geoGraticule`, the visualization fades in the sphere outline and country features from topoJSON data fetched from the Visionscarto world atlas. The code supports a `requestAnimationFrame` loop that decrements the longitude on each frame, though it is initially disabled, and the sphere’s rotation is manually adjustable via the `rotation` state.

SShad Frigui
93% match
Loading thumbnail…

Spinning Globe

A spinning globe rendered with an orthographic projection animates its rotation around the y-axis. The visualization displays country boundaries and a graticule over a dark background, with a visible sphere outline. The code uses d3-geo’s `geoOrthographic`, `geoPath`, and `geoGraticule` functions to draw the map, and requests animation frames via `requestAnimationFrame` to update the projection’s `rotate` property. World country data comes from the visionscarto-world-atlas TopoJSON file processed with `topojson-client`.

SShad Frigui
92% 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
91% match
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
91% 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
91% 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
91% match
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
90% match