Skip to main content
100%

Transition Rotation & Scale of Orthographic Projection with Easing

✓ Published0🌍 Public
Aandrew-reid
Last edited Oct 17, 2017
Created on Aug 10, 2017

Clicking a country on this orthographic globe zooms the view to center on that country, scaling and rotating the projection with a custom easing function. The map is rendered as SVG paths from TopoJSON world data, and transitions are applied via `attrTween` to interpolate the projection's rotation and scale, with different easing curves for zooming in versus zooming out. Clicking the background resets the globe to its default scale.

AI-generated description

Similar vizzes

Loading thumbnail…

Transition Rotation & Scale of Orthographic Projection

Clicking a country on this orthographic globe rotates the projection to center on that country and zooms in by scaling the projection, while resetting returns to the full globe. The animation smoothly interpolates both rotation and scale using D3's transition with attrTween, updating the SVG paths for land, water, and country boundaries from TopoJSON data.

Aandrew-reid
93% 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

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
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…

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
Loading thumbnail…

Orthographic Zoom III

This interactive globe displays country boundaries using an orthographic projection, panning and zooming smoothly with the mouse. During interaction, it renders the lower-resolution 110m world-atlas dataset, then switches to the higher-resolution 50m dataset once the motion stops for crisp detail. Built with D3 v4, it uses `d3.geoPath` and TopoJSON to project geographic features, with drag and zoom behaviors from `d3.drag` and `d3.zoom` controlling the globe's rotation and scale.

CCurran Kelleher
80% match
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
78% match
Loading thumbnail…

Orthographic Zoom I

This example presents an interactive orthographic projection of the world, allowing users to rotate the globe by dragging and zoom in and out with the mouse wheel. It visualizes land polygons from the `world-110m` TopoJSON dataset. The code uses `d3.geoOrthographic` and `d3.geoPath` to render shapes, with `d3.drag` handling rotation and `d3.zoom` adjusting the projection scale.

CCurran Kelleher
77% match