Skip to main content
100%

Transition Rotation & Scale of Orthographic Projection

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

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Transition Rotation & Scale of Orthographic Projection with Easing

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.

Aandrew-reid
93% 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
80% 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
79% 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
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
79% 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
78% match
Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Mmbostock
77% match
Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929
77% match