Skip to main content
SimilarExport ZIP
100%

Rotating Transverse Mercator

✓ Published0🌍 Public
Mmbostock
Last edited Mar 6, 2017
Created on Dec 18, 2013

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.

AI-generated description

A rotating transverse Mercator projection.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Rotating Transverse

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.

Mmbostock
88% match
Loading thumbnail…

Transverse Mercator

This example demonstrates the transverse Mercator map projection, displaying world landmasses and country boundaries within a graticule grid. The map is rendered as SVG using the D3.js library, specifically employing the `d3.geoTransverseMercator` projection and `d3.geoPath` for drawing geometries. World data comes from the `world-atlas` package, processed with `topojson-client` to extract land and boundary features. The visualization includes a spherical outline, a graticule, and styled land and boundary paths, all centered within a 960x960 canvas.

Mmbostock
87% 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
86% 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
85% 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
85% 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
85% match
Loading thumbnail…

Spherical Mercator

The example shows the spherical Mercator projection applied to a world map, displayed within a circular outline that represents the globe. The map renders landmasses in dark gray with white country boundaries, overlaying a graticule grid of meridians and parallels. Built with d3.geoMercator and d3.geoPath, it draws the sphere outline, graticule, and world geography via SVG paths. Geographic data comes from the world-atlas TopoJSON dataset, processed with topojson-client to extract land and country meshes.

Mmbostock
83% match
Loading thumbnail…

Tobler–Mercator

This example demonstrates the Tobler–Mercator projection, a modified Mercator projection that preserves area. The world map is rendered with graticule lines, country boundaries, and a white sphere outline. Built with D3 v4, it combines `d3.geoProjection` with a custom projection function and `d3.geoPath` for geographic rendering. The map uses TopoJSON data from the world-atlas package, with land and country boundary geometries loaded via `d3.json` and processed using `topojson.feature` and `topojson.mesh`. The visualization is fully SVG-based.

Mmbostock
83% match