Spinning Globe BP

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.

91% match

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`.

91% match

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

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.

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

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.

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