Projection Transitions

100%

Projection Transitions

✓ Published0🌍 Public

Last edited Jul 25, 2018

Created on Jul 25, 2018

A dropdown menu animates between 40+ map projections, swapping the rendered world map and graticule every 1.5 seconds. The visualization uses the `d3.geo.projection` plugin’s various projection constructors (e.g., `d3.geo.aitoff`, `d3.geo.robinson`) and renders land polygons via `d3.geo.path` with SVG paths, including a graticule overlay. The world-110m GeoJSON source feeds `topojson.feature` to build the land shapes. Selecting a projection from the menu triggers an animated transition between projections.

AI-generated description

These projections are available in the geo.projection plugin.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3711652'>Projection Transitions</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Projection Transitions

A drop-down menu and an auto-advancing timer cycle through dozens of map projections, each rendered over a world map with a graticule and sphere outline. The example shows how D3’s `d3.geo.path` and the `d3.geo.projection` plugin smoothly interpolate between projections using the `transition` API, with land from TopoJSON. A menu allows manual selection, while a periodic random selection demonstrates animated morphing between projections.

Mmbostock

93% match

Loading thumbnail…

Projection Transitions

This example demonstrates seamless transitions between dozens of geographic map projections, cycling automatically through options like Aitoff, Mercator, and Robinson. A dropdown menu also lets users manually select any projection. The visualization uses d3.geo.path with the geo.projection plugin to render world landmasses from TopoJSON data, along with graticules and sphere outlines. The code interpolates between projections using d3's transition system, updating the path generator's projection on a timer to animate the morphing effect smoothly in SVG.

MMicrobie

92% match

Loading thumbnail…

Projection Transitions

Projection Transitions showcases a rotating sequence of over 40 map projections, including Aitoff, Mercator, and Winkel Tripel. The visualization draws world land boundaries from TopoJSON and overlays a geographic graticule, rendering each projection with d3.geo.path. A dropdown menu allows manual selection, while an automatic timer cycles through projections every 1.5 seconds. The code uses the d3.geo.projection plugin and applies SVG animations to transition smoothly between geographic coordinate systems.

MMicrobie

92% match

Loading thumbnail…

d3v5 - Selective Projection Map

This example visualizes a world map with a dropdown menu to switch between over 40 different geospatial projections, including Miller, Mercator, and Robinson. The map is rendered as SVG using d3.geoPath, while the projection options are defined with d3-geo-projection methods like d3.geoMercator and d3.geoMiller. World coastlines come from a GeoJSON file, and a graticule and sphere outline are added to each view.

HHirosaji

82% match

Loading thumbnail…

Globe to Map transition

A world map transitions between two geographic projections: an interactive 3D globe and a flat, equirectangular map. Users rotate the globe by dragging, and a single click triggers a smooth 7.5-second animation that interpolates between the orthographic and equirectangular projections, with the map always cut along the antimeridian for an unrolling effect. Double-clicking a country reverses the transition. Built with D3 v3 and TopoJSON, it uses `d3.geo.orthographic()`, `d3.geo.equirectangular()`, `d3.geo.path()`, and `d3.transition()` for tweening the projection, rendering country boundaries from a 110m world dataset in SVG with hover tooltips.

KKoGor

81% match

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

79% match

Loading thumbnail…

go_ndm_01

This example demonstrates smooth transitions between two map projections, Equirectangular and Natural Earth, with a red dot marking the origin [0,0] on each projection. The visualization cycles through projections every 1.5 seconds with a 750-millisecond tween, combining animated morphing of map paths with graticule and land outlines from a world-110m GeoJSON dataset. Using D3 v4, it employs `d3.geoPath`, `d3.geoGraticule`, and a custom projection tween based on `attrTween`, along with a dropdown menu to manually switch projections and pause the automatic rotation.

HHakkahi

79% match

Loading thumbnail…

Globe to Map transition

A world map transitions between an orthographic globe and an equirectangular projection. The globe rotates via a D3 drag behavior, and clicking a country triggers a path-by-path transition to the flat map, while double-clicking returns to the globe. The visualization uses D3 v3 with `d3.geo.orthographic`, `d3.geo.equirectangular`, and `d3.geo.path` to render TopoJSON country boundaries as SVG paths, with CSS-based tooltips and hover highlighting.

KKoGor

78% match