Three-Axis Rotation

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

86% match

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

81% match

Multiple Rotations

An animated canvas displays a rotating globe. The graticule and sphere are drawn using D3’s geometry pipeline, which applies two sequential rotations—a fixed tilt and a time-based spin—before orthographic projection and clipping. The code uses `d3.geo.pipeline` with `d3.geo.rotate`, `d3.geo.clipCircle`, and `d3.geo.project`, rendering via a `contextSink`. The graticule is generated by `d3.geo.graticule`.

81% match

D3 - Maps

A rotating orthographic globe displays world landmasses as stroked vector outlines on a Canvas element. D3’s `d3.geoOrthographic` projection and `d3.geoPath` render both the geographic features and a graticule, with the rotation updated by `projection.rotate` inside a `setInterval` loop. The geographic data comes from a remote TopoJSON-like GeoJSON file, while the animation runs on a 960×800 canvas.

SSubhendu Karmakar

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Nnouralkhoury

Rotating Orthographic

An orthographic projection of the world rotates continuously, showing a dark outline of the continents against a circular boundary. The rotation is driven by a timer that recalculates the projection’s center based on elapsed time and a fixed velocity. The example uses `d3.geo.orthographic()`, `d3.geo.path()`, and `topojson.feature()` to render the land from a `world-110m.json` dataset as SVG. The code also applies a 90-degree clip angle and updates the path’s `d` attribute on each tick, with styling from a CSS circle element.

Rotating Globe

A rotating orthographic globe displays Earth's landmasses in sky blue against a black background, with graticule lines and interactive country names on hover. The rotation is driven by a `d3.timer` that continuously updates the projection's rotation angles, while `d3.geoOrthographic` and `d3.geoPath` render the sphere and features. World map data comes from the `world-atlas` package, loaded via `d3.json` and `d3.tsv`, with country names built into a lookup table. The visualization uses SVG for rendering within a `d3` framework.

AAbhishekJha1994Outlook

Rotating Orthographic

This rotating orthographic projection displays a graticule and the equator as animated SVG paths on a sphere. It uses the d3.geo.orthographic projection with a rotating view, updating the projection’s rotation based on a timed loop. The sphere, graticule, and equator are drawn as SVG paths via d3.geo.path, with the animation driven by d3.timer incrementally adjusting the rotation angles.