Rotating Transverse

100%

Rotating Transverse

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 7, 2013

Two animated map projections rotate in sync on a single canvas: a transverse equirectangular (Cassini) projection on the left and a transverse Mercator on the right. Each frame, `d3.geo.equirectangular` and `d3.geo.mercator` recompute their rotation via `d3.timer`, while `d3.geo.path` renders land from TopoJSON world-110m data and a graticule. The canvas context is manually rotated by 90 degrees to align the transverse orientation.

AI-generated description

A rotating Cassini projection (transverse equirectangular) on the left; a rotating transverse Mercator projection on the right.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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.

Mmbostock

88% match

Loading thumbnail…

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

Mmbostock

83% 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

82% match

Loading thumbnail…

Rotating Winkel Tripel

A rotating Winkel Tripel projection continuously spins the world map around its longitude axis. The example shows both landmasses and graticule lines drawn on a canvas, with the rotation driven by a timer that updates the projection’s rotation each frame. It uses D3 v3 with the `d3.geo.winkel3` projection, `d3.geo.path`, and Canvas 2D context, while loading world-110m TopoJSON data. The graticule and its outline are stroked separately to distinguish the grid from the map frame.

Mmbostock

82% 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

80% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating world map rendered on a Canvas element, with countries and a graticule drawn in grayscale against a dark sphere. Using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`, the code redefines the projected sphere each frame via a `d3.timer` that increments the rotation speed. Land polygons are loaded from a local `land.geojson` file, and the animation highlights how reprojection affects visible geography as the globe spins.

AAlexanderDavidson

80% match

Loading thumbnail…

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.

Mmbostock

79% match

Loading thumbnail…

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

79% match