flipbook

100%

✓ Published0🌍 Public

Last edited Feb 4, 2013

Created on Jul 18, 2012

A flipbook animation depicts a book with ten pages that fold open and closed in sequence. Each page is drawn as an SVG path whose shape interpolates between two states, driven by a slider or mouse clicks. The code uses d3.v2 selections, transitions with `attrTween`, and a custom interpolation function to animate the fold geometry. CoffeeScript defines the book dimensions, page thickness, and mouse interaction logic, with the SVG rendered in a clean, outlined style.

AI-generated description

Similar vizzes

Loading thumbnail…

Page Swiping

Five vertical pages, each displaying a large index number on a radial gradient background, alternate between light and dark themes. Using touch input, the user can drag or flick through the pages with momentum-based scrolling. The D3 v3 code listens to touch events, records drag samples to calculate velocity, and animates the final page position and a CSS `translate3d` overscroll effect via `d3.interpolateNumber`.

Mmbostock

71% match

Loading thumbnail…

Gist 850793

This interactive book-style visualization presents the 20 Things I Learned educational content as a page-flipping experience. The code uses jQuery for DOM manipulation and layout management, while the HTML5 Canvas API handles the rendering and animation of page turns, creating a realistic book-like interface with interactive navigation.

Aabernier

71% match

Loading thumbnail…

Simple transitioning slides with SVG and D3

This example demonstrates a slide-based presentation system built with D3.js and SVG, where each slide is defined by a rectangle with an ID like "slide_1" or "slide_2.5" in an Inkscape-created SVG file. The script sorts slides by their numeric IDs and transitions between them by animating the SVG viewBox with a 1.5-second duration, using keyboard controls (arrow keys, Home, End) or touch gestures. Each slide exposes scale_x and scale_y functions that map a normalized [0,1000] domain to the slide's pixel boundaries, enabling easy placement of interactive elements—here a bouncing steelblue circle on slide 3. The visualization also supports panning and zooming via mouse drag and mousewheel, with zoom anchored to the cursor position. This example demonstrates a simple, flexible approach to building slide-based presentations from SVG files.

ZZJONSSON

67% match

Loading thumbnail…

Page ROller

This example shows a looping CSS animation of four rotating lines that form a rolling square shape. The animation uses custom keyframes named `desno`, `desno2`, and `desno3` to rotate each line sequentially around different origins, with staggered opacity changes creating the illusion of a continuous page-turning effect. The code relies on CSS transforms, animation properties, and positioning, with the lines styled as rounded rectangles in a yellow-green palette on a green background. While the HTML includes an SVG element and D3.js, the visual effect is driven entirely by CSS.

AAndrew-Kiwa

66% match

Loading thumbnail…

Smooth Scrolling

This example demonstrates a playful, self-scrolling page where a series of "Whee!" headings cascade down the viewport, driven entirely by a D3.js transition. The page uses a custom tween, defined via `d3.transition().tween`, to interpolate the window’s vertical scroll offset from its starting position to the bottom of the document. Specifically, `scrollTween` creates an interpolator with `d3.interpolateNumber` and applies it inside the tween’s returned function, calling `scrollTo` on each tick. The animation begins after a delay, smoothly propelling the reader through the page’s content over 7.5 seconds.

Mmbostock

65% match

Loading thumbnail…

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.

Mmbostock

65% match

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel

65% match

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Mmbostock

64% match