van Wijk Smooth Zooming

van Wijk Smooth Zooming

A hexbin mesh forms the backdrop as two circular markers—a brown start point and a steelblue end point—define a zoom transition. The view continuously interpolates between these two camera positions using `d3.interpolateZoom`, which smoothly scales and translates the entire SVG group. The animation runs in an infinite loop, reversing direction each time it reaches a marker. The code builds the mesh from `d3.hexbin` and applies the zoom tween via `attrTween` on the group's transform.

93% match

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis

73% match

Zoom Transitions

Animated grid lines on a canvas demonstrate D3’s zoom transitions, which smoothly pan and scale the view every five seconds to a new random location. The example uses `d3.behavior.zoom` with linear scales, and `transition.call` to invoke the zoom’s translate and event methods. Grid rendering relies on the Canvas 2D API, drawing vertical and horizontal lines based on the current domain, with line width scaling by zoom level.

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Van Wijk & Nuij Zooming

This example demonstrates a smooth and efficient zooming and panning animation for interactive maps, based on the algorithm by Van Wijk and Nuij. It uses Polymaps to render Bing Maps imagery and animates the map's center and zoom level over time. The JavaScript code calculates a path between two map states, applying logarithmic interpolation to create a natural, accelerated motion. The animation is triggered by a search query, which finds a location and animates the map to focus on it.

D3 Translate Example

This example demonstrates a panning interaction for a 28×28 grid of colored rectangles rendered as SVG, where the default d3.zoom wheel behavior is replaced with a custom wheel handler that calls `zoomer.translateBy` on a transition. The visualization shows how adding a transition to `translateBy` causes the grid to gradually zoom out instead of scrolling vertically as intended, contrasting with the default behavior without a transition. The code uses `d3.select`, `d3.range`, `d3.zoom`, `d3.interpolate`, and SVG rectangles with random fill colors, with the zoom transform applied directly to the rectangles.

KK3zter

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics

71% match

Squares ↔ Hexagons

This example demonstrates a smooth morphing animation between two regular plane tilings: initially square cells transition into taller, non-regular hexagons. A grid of points is shifted horizontally by a changing offset each frame, and a Voronoi diagram is computed from these points using `d3.geom.voronoi`, rendering the resulting polygons as SVG paths. The offset moves point columns alternately, causing the cell shapes to transform continuously. The code uses `d3.timer` for the animation loop, with 2-pixel circles marking each generator point.