Rotating Orthographic

100%

Rotating Orthographic

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 7, 2013

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Orthographic Shading

An interactive orthographic projection shows Earth’s graticule as a shaded sphere rotating continuously. Latitude and longitude lines at 10° increments form the grid, which is clipped to the visible hemisphere. The animation uses `d3.geo.orthographic()` and `d3.geo.path()` to project the graticule, while a radial gradient fills a circle to simulate lighting. A `d3.timer` updates the projection rotation and the fill’s transform, altering the view over time. The SVG rendering includes subtle stroke opacity for depth.

Mmbostock

87% match

Loading thumbnail…

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.

Mmbostock

86% match

Loading thumbnail…

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.

Mmbostock

85% match

Loading thumbnail…

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.

Mmbostock

85% match

Loading thumbnail…

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

84% match

Loading thumbnail…

Orthographic Clipping

A rotating orthographic globe displays a graticule of latitude and longitude lines at uniform 10-degree increments, with a circular clipping boundary. The globe slowly spins via a d3.timer that updates the projection rotation over time. The example uses d3.geo.orthographic with clipAngle(90) and d3.geo.path to render the graticule as an SVG path, while a separate SVG circle outlines the globe’s edge.

Mmbostock

84% match

Loading thumbnail…

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

Mmbostock

84% match

Loading thumbnail…

Rotating Earth

An animated orthographic projection of Earth rotates continuously, with its scale oscillating as the globe spins. The map and graticule paths update every 10 milliseconds using `d3.geoOrthographic` and `d3.geoPath`, while a click toggles the rotation. The land polygons come from a Natural Earth GeoJSON file, and the SVG rendering includes a clickable text prompt to start or stop the animation.

AAlireza-Dezfoolian

82% match