Skip to main content
SimilarExport ZIP
100%

Spinning Globe

✓ Published0🌍 Public
SShad Frigui
Last edited Aug 22, 2024
Created on Aug 22, 2024
Forked from 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`.

AI-generated description

A spinning globe!

See also:

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