Velocity

100%

✓ Published0🌍 Public

Last edited Aug 6, 2012

Created on Aug 1, 2012

Dragging a background grid with a mouse or touch updates two meter bars in real time, displaying horizontal and vertical velocity. The Velocity library computes speed from recent pointer positions and applies easing when dragging stops. The interactive interface includes a dat.GUI panel for adjusting the easing effect and duration of the velocity decay.

AI-generated description

Similar vizzes

Loading thumbnail…

momentum

On mouse press, the page displays a real-time, animated scatterplot of mouse velocity, computed as the distance between successive mouse positions divided by the elapsed time between frames. The animation runs continuously while the button is held, logging each velocity sample to the browser console. The visualization uses a custom `Loop` class built on `requestAnimFrame` (Paul Irish’s shim), with mouse coordinates tracked via jQuery’s `mousemove` event. A blue grid background, drawn with CSS gradients, provides visual reference.

Aabernier

67% match

Loading thumbnail…

Gist 73e5cb2c456084a9c356f9c3f89f8803

An interactive particle field visualizes the gravitational attraction between a cursor and thousands of moving points. The code uses D3's quadtree for spatial indexing and d3.forceSimulation with custom force functions to compute particle velocities and positions, while a Vue component manages the animation loop and canvas rendering. The display updates in real time, with particles flowing toward and around the pointer position based on distance-based force calculations, creating a dynamic, organic swarm effect on a dark background.

MMAKIO135

61% match

Loading thumbnail…

Inertia

A 3D cube rendered with CSS transforms sits at the center of a scrollable background grid. Dragging the background applies inertial motion, with velocity and friction computed per frame using a custom Loop animation and Hammer.js for touch gestures. jQuery UI handles pointer interactions, while mousewheel events adjust the cube’s rotation. The cube’s six faces use CSS `rotateX` and `rotateY` transforms with `translateZ` offsets, and the background’s scroll position is updated with `translateZ` for depth. The code relies on raw GitHub-sourced libraries and jQuery for event handling.

Aabernier

61% match

Loading thumbnail…

Inertia and back

The example shows a field of 100 translucent orange and pink circles of varying sizes, which drift in response to dragging and then ease back to their original positions after a few seconds. The offset follows the formula `t * (1-t) * velocity`, creating a smooth return animation. Using D3’s `drag` and the `d3-inertia` helper, the code tracks pointer movement through callbacks like `start`, `move`, and `end`, while a custom `render` function applies the positional offset to each circle. The SVG rendering uses D3 selections to update `cx` and `cy` attributes based on stored angles and velocities.

PPhilippe Rivière

59% match

Loading thumbnail…

Drag + Zoom

This example demonstrates how to combine drag and zoom interactions on an SVG canvas. A grid of lines serves as a background, and individual dots can be dragged by clicking on them, while panning occurs when dragging the background; the mousewheel controls zooming. The code uses d3.behavior.drag and d3.behavior.zoom, with stopPropagation to prioritize dragging over panning. Data is loaded from a TSV file containing x and y coordinates for each dot, rendered as SVG circles that turn red while being dragged.

SSpaceActuary

58% match

Loading thumbnail…

Draggable Voronoi Circles - canvas

A canvas-based visualization shows 100 particles moving with random velocities, their positions defining a Voronoi diagram whose cells are computed in real time. Each cell contains its largest possible inscribed circle, drawn with a light gray fill, while the cell boundaries and particle centers are also rendered. Users can click and drag any particle, causing its Voronoi cell to follow the pointer and the inscribed circle to update; the active cell is highlighted in red. The animation runs via d3.timer, with particles bouncing off the canvas edges and exhibiting slight random jitter.

Aalexmacy

58% match

Loading thumbnail…

Jitter Line

A dark, interactive sketchpad displays a white, jittery line that follows the mouse cursor, leaving a trailing path of points. The line’s vertical position is randomly perturbed each frame, creating a trembling, organic effect while maintaining a smooth, interpolated curve. Built with D3.js v3, the visualization renders an SVG path updated via `requestAnimationFrame`, with a `dat.GUI` control panel allowing real-time adjustment of jitter strength, tail length, and line color. Mouse and touchmove events drive the point array, which is capped to a fixed tail length for a fading trail effect.

BBeaupe

58% 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

58% match