Projection Transitions w/slider and rotation

100%

Projection Transitions w/slider and rotation

✓ Published0🌍 Public

Last edited Dec 26, 2017

Created on Dec 26, 2017

This interactive world map demonstrates smooth morphing between dozens of map projections via two dropdown menus and a slider, while also supporting click-and-drag rotation. Built with D3 v4 and the d3-geo-projection plugin, it renders countries from TopoJSON using d3.geoPath and interpolates both projection paths and rotation during transitions. The slider manually controls interpolation progress, and dragging updates the projection’s rotation. The visualization showcases projection-specific distortion differences across a global landmass dataset.

AI-generated description

This is another riff on projection transitions, based on <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3711652'>Projection Transitions</a>. This one uses a slider to allow for manually controlled transitions. The map can also be rotated by clicking and dragging.

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/6700d44240d2b6d3ec9767a5a5854e42'>Projection Transitions w/slider and rotation</a>

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/082cb12c8f4d5c0d5c4445c16a3db383'>Projection Transitions w/slider and rotation</a>

forked from <a href='http://bl.ocks.org/Sey255/'>Sey255</a>'s block: <a href='http://bl.ocks.org/Sey255/015abedf20dc9afbe30e89d4577df8f2'>Projection Transitions w/slider and rotation</a>

glide Licensed

Similar vizzes

Loading thumbnail…

Projection Transitions w/slider and rotation

This interactive visualization demonstrates smooth transitions between dozens of map projections, allowing users to compare different geographic representations of world data. Two dropdown menus select the starting and ending projections, while a slider manually controls the interpolation between them. The map can also be rotated by dragging. Built with D3 v4 and d3-geo-projection, the code uses `d3.geoPath` and TopoJSON to render country boundaries as SVG paths, with projection morphing driven by an input event.

SSey255

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

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

88% match

Loading thumbnail…

Projection Transitions

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.

MMicrobie

87% match

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

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

84% match

Loading thumbnail…

Globe to Map transition

This interactive visualization demonstrates a smooth animated transition between two geographic projections of the same world map. A slowly rotating orthographic globe morphs into a flat equirectangular projection when a country is clicked, with a double-click on any country triggering the reverse transformation. The example highlights the shortest path between these two projection states. The code uses d3.v3, specifically the `d3.geo.orthographic()` and `d3.geo.equirectangular()` projections, along with the `d3.geo.path()` for generating SVG paths. Country boundaries come from a TopoJSON file, and country names are loaded from a TSV file.

KKoGor

81% match

Loading thumbnail…

Globe to Map transition

A world map continuously rotates as a globe on a canvas, and clicking it triggers a smooth animation that interpolates between the orthographic and equirectangular projections, creating an effect of unrolling the globe into a flat map. The transition is implemented using `d3.transition` and `d3.interpolate` to tween between the two projection functions, while `d3.geo.path` renders the land and border geometries from a TopoJSON world dataset. A second click reverses the animation, reeling the map back into a rotating globe.

KKoGor

80% match