Globe to Map transition

100%

Globe to Map transition

✓ Published0🌍 Public

Last edited Oct 19, 2013

Created on Oct 17, 2013

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.

AI-generated description

Globe rotating all the time, click on canvas to unreel/reel. In this example transition is based on interpolation between two projections and map always cut along antimeridian, it creates effect of unreelling/reelling. You can see some artefacts during reeling back to globe, I guess it is because of clipping or timings overlapping, if you have any ideas how to fix it, let me know.

For other variations of transition from Orthographic to Equirectangular and back check these examples:

This projected is licensed under the terms of the MIT license.

Similar vizzes

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

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

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

90% match

Loading thumbnail…

Map & Globe

Two interactive views of geographic data are linked: a Leaflet map on the left and a D3 orthographic globe on the right, both rendered with Canvas and animated. Panning and zooming the map updates the globe's rotation and zoom, and vice versa. The globe uses a black-and-white TopoJSON world map, while the map shows a monochrome tile layer. A visible circular outline on the globe indicates the map's current viewport. The linking is implemented using Chiasm plugins: `layout` for box layout, `links` for data binding between the two components, `leaflet` for the map, and `globe` for the D3 Canvas globe renderer.

CCurran Kelleher

83% match

Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière

82% match

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock

82% match

Loading thumbnail…

World Tour

This visualization presents an animated orthographic globe that cycles through the world’s countries, highlighting each one in red while rotating to center it on screen. The display shows the country name above the globe as it transitions between nations. The code uses D3.js v3 for transitions and tweens, TopoJSON for world map data, and a Canvas 2D context for rendering. A queue loads GeoJSON topology and country name mappings, while d3.geo.path draws land, borders, and the globe sphere with dynamic rotation.

AAjar06

81% match

Loading thumbnail…

Globe Zoom - Animate

This interactive globe visualization animates between orthographic and map projections to display geographic data points, with country boundaries rendered as SVG paths. Users can zoom and rotate the globe, search for locations, and toggle between datasets showing meat consumption and population growth percentages. The visualization is built with D3.js version 3, React, and TopoJSON, using d3.geo.orthographic and d3.geo.winkel3 projections with d3.geo.zoom for interaction. Data is loaded from external CSV and TopoJSON sources, with tooltips and a legend providing additional context.

Nnouralkhoury

81% match