Page Swiping

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jan 14, 2014

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`.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

75% match

Loading thumbnail…

Multitouch Drag II

Twenty colored divs drift across the browser window, each rendered as a circle via CSS border-radius and positioned using a CSS transform translate. Dragging a circle with a mouse or touch lifts it visually: it expands, gains a soft box-shadow, and uses an elastic ease during the size transition. The implementation uses D3 v3’s `d3.behavior.drag` for pointer handling, `d3.scale.category10` for colors, and `d3.interpolate` to animate box-shadow between drag states. Data is randomly generated from 20 coordinate pairs.

Mmbostock

73% match

Loading thumbnail…

d3.js: mouse drag a la iphone: decceleration

This example demonstrates an interactive image viewer that supports panning, zooming, centering, and resetting using mouse drags, scrollwheel, and keyboard shortcuts. It implements a swipe gesture with deceleration, where releasing the mouse during a drag continues the image’s momentum. The interface also displays a cycling tip-of-the-day overlay after five seconds of inactivity, which fades in and out using D3 transitions. The code relies on `d3.behavior.drag`, `d3.timer`, and `d3.json` to load the configuration, while rendering a large external JPEG image inside a clipped container.

GGerHobbelt

72% match

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

72% match

Loading thumbnail…

Swipe function

This example demonstrates swipe detection on a web page, where a user can swipe left, right, up, or down on a touch surface to trigger a visual response. The interface displays a message indicating the direction of the swipe. The code implements a custom `swipedetect` function using the `touchstart`, `touchmove`, and `touchend` events, calculating distance traveled and elapsed time to determine the swipe direction. The result is shown in the `#touchsurface` div, which has a styled green border and yellow text, with the background set to black via CSS.

HHariprashanth75

71% match

Loading thumbnail…

scrollytest1

This interactive scrollytelling visualization demonstrates the interplay between scrolling and data-driven graphics, built with D3 v4 and the graph-scroll library. The page uses a fixed-position chart that updates as the user scrolls through sections, with transitions between states driven by scroll position. The visualization leverages d3-dsv to parse tabular data, rendering it as an SVG/WebGL animation. As the user scrolls, the active section triggers changes in the displayed chart, creating a narrative flow. The design uses a clean, minimal aesthetic with the chart fixed on screen while text scrolls, and it supports both fixed and below-fold layouts for responsive storytelling.

335degrees

71% match

Loading thumbnail…

Multitouch Drag

Twenty colored circles move freely over a full-window SVG canvas. Each circle is draggable with a multitouch pointer, and its position updates live to follow the finger. The code uses `d3.behavior.drag` with `dragstart`, `drag`, and `dragend` handlers to manage interaction, while `d3.select` and `.transition().ease("elastic")` animate the radius from 32 to 48 pixels on grab and back on release. Random starting coordinates come from `d3.range(20).map()`.

Mmbostock

71% match

Loading thumbnail…

scrollytest6

This example, titled "scrollytest6," is an animated, scroll-driven data visualization that combines SVG and WebGL rendering within the D3.js framework. The visualization demonstrates a technique for synchronizing narrative content with user scrolling, likely transitioning between different chart states or datasets as the user progresses through the page. The visualization uses D3's data parsing capabilities (d3-dsv) and custom scroll-handling logic to create a dynamic, story-telling experience. The rendering is hybrid: SVG is used for crisp, interactive elements while WebGL handles performance-intensive graphics, with animations smoothly tying the scroll steps together. The example is part of a series of scroll-based experiments by the author 35degrees, building upon earlier iterations (scrollytest1-5) to refine the technique. The visualization is built with D3 and licensed under MIT.

335degrees

70% match