Prezi Compo entry - 662 bytes

100%

Prezi Compo entry - 662 bytes

✓ Published0🌍 Public

Last edited Jun 11, 2012

Created on Jun 6, 2012

This example presents a zoom-based presentation tool that cycles through four text slides, each displayed one at a time. It visualizes the current slide’s content while the scaling factor increases or decreases in response to mouse wheel input. The presentation uses a plain HTML structure with a `<w>` element and inline JavaScript, reacting to the `mousewheel` and `DOMMouseScroll` events. The code manipulates the `innerHTML` and CSS `transform` property with a `scale()` function, applying the zoom effect directly to the text content.

AI-generated description

Similar vizzes

Loading thumbnail…

DOM panzoom demo

This example demonstrates pan-and-zoom interaction on DOM elements. A page of placeholder Latin text can be dragged and scaled using the `panzoom` library, which manipulates CSS transforms. The rendering uses plain HTML and D3 v5 for setup, while the interaction logic relies on the external `panzoom` API. The visualization is purely a DOM manipulation demo, with no data binding or charting involved.

OOleJRask

62% match

Loading thumbnail…

Pan & Zoom IV

Two thousand circles laid out in a phyllotaxis spiral show the d3.zoom behavior applied by directly manipulating each circle’s SVG transform attribute. On every zoom event, the code calls *transform*.applyX and *transform*.applyY to remap the original data coordinates, keeping all circle radii constant at 2.5 pixels while allowing pan and zoom between half and four times the initial scale. This approach, written in d3.v4 with SVG, demonstrates an alternative to scaling a single parent group, trading performance for customization.

Mmbostock

61% match

Loading thumbnail…

Zoom + Pan

This example demonstrates interactive zooming and panning on a simple coordinate grid with axes, controlled both by mouse gestures and on-screen buttons. The visualization uses d3.behavior.zoom to link the scale domains to user input, with the axes redrawn on each zoom event. Button clicks trigger animated transitions that adjust the zoom scale or translate the view, recalculating the center point in data space to maintain focus. The rendering uses SVG with d3.v3, and the code explicitly handles coordinate conversion between screen and data space via the zoom object's scale and translate properties.

663anp3ca

61% match

Loading thumbnail…

Pan & Zoom III

This example shows a dense phyllotaxis pattern of 2,000 circles that users can pan and zoom with the mouse. The code uses the d3-zoom plugin in D3 v4 to handle input, applying the zoom transform directly to a group element containing the circles. An invisible overlay rect ensures the zoom behavior receives events, while the SVG’s coordinate system is adjusted with a translate transform. The rendering is done via SVG circles, with a resize handler updating the layout.

HHerst

61% match

Loading thumbnail…

D3 Zoom

A D3 zoom interface demonstrates interactive panning and scaling within an SVG coordinate system. A single green circle, positioned through linear scales, responds to mouse wheel and drag gestures that trigger the `d3.zoom` behavior. The example simultaneously updates axis tick marks via `transform.rescaleX` and `rescaleY`, while displaying the current translation values and zoom multiplier in separate HTML divs. The visualization renders with SVG elements, using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to maintain spatial mapping during the zoom transform.

WWRCIECH

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

61% match

Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning across a field of 2,000 semi-transparent red squares, whose positions are randomly generated from normal distributions centered in the viewport. The visualization shows how HTML elements can be transformed interactively using D3’s zoom behavior, with the underlying coordinate scales updating in real time. It uses D3 v3’s `d3.behavior.zoom` and linear scales (`d3.scale.linear`) to map data coordinates to screen positions, applying CSS `transform` styles to `<div>` elements. Unlike typical SVG-based examples, this implementation renders the squares as HTML `div` elements, highlighting a lightweight alternative for pan-and-zoom interactions without canvas or SVG overhead.

DDinoJay

60% match

Loading thumbnail…

Codu_presentation

A click-driven narrative presentation demonstrates text animation and custom Svelte components for storytelling. It uses GSAP with TextPlugin to sequence title and subtitle changes, while animating SVG circles through different states: initially as a row, then collapsing to zero, and finally repositioning into a bar chart with axes. The visualization references geographic data via a CSV file containing positional coordinates and color groups. On the final step, a video embedded from GitHub appears to complement the narrative flow.

Rrudi.oreillymeehan@gmail.com

60% match