Skip to main content
SimilarExport ZIP
100%

Projection Transitions w/slider and rotation

✓ Published0🌍 Public
SSey255
Last edited Dec 26, 2017
Created on Dec 26, 2017

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.

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>

glide Licensed

Similar vizzes

Loading thumbnail…

Projection Transitions w/slider and rotation

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.

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
91% 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
90% 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
88% 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
88% 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
82% 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
82% 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
79% match