Rotating Orthographic

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.

89% match

Three-Axis Rotation

Three rotating orthographic projections display the Earth from the perspective of three perpendicular axes, labeled λ, φ, and γ. The world-110m land data is rendered as filled paths using `d3.geoPath` and `d3.geoOrthographic`, with the rotation angles updated per frame from a timer. Each canvas uses its 2D context to clear and redraw shapes, with a sphere outline stroke for the globe boundary.

86% match

Rotating Transverse Mercator

A rotating transverse Mercator projection continuously spins a world map around its central meridian, showing how the projection distorts shapes and areas away from the axis of rotation. The animation uses a dark canvas with white country borders and a semi-transparent graticule, all rendered via `d3.geoPath` and Canvas 2D drawing. Land polygons and country boundaries come from TopoJSON data in the world-atlas package, while a `d3.timer` updates the projection’s rotation each frame. The code specifies `d3.geoTransverseMercator`, `d3.geoGraticule10`, and `topojson.feature` and `topojson.mesh` for data processing.

86% match

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.

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

Spinny Globe

A sphere rotates continuously, displaying only the visible front hemisphere through a navigable orthographic projection. The example uses D3’s `d3.geo.orthographic` projection with great-circle clipping and renders land geometries onto a Canvas via `d3.geo.path`. The rotation is driven by a `d3.timer` that updates the projection’s rotation over time. Land data comes from Natural Earth’s world-110m dataset, loaded as TopoJSON.

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

Orthographic Grid

An orthographic grid of graticule lines at 10-degree intervals rotates slowly over time, demonstrating an azimuthal projection that resembles a globe viewed from space. The visualization uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.graticule` to render SVG paths, while a `d3.timer` continuously updates the projection’s rotation based on a fixed velocity vector. A static circle outlines the globe’s edge, and the animation shows how latitude and longitude lines curve as the view shifts.