DOM panzoom demo

100%

DOM panzoom demo

✓ Published1🌍 Public

Last edited Nov 27, 2021

Created on Nov 27, 2021

Forked from Pan

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

DOM panzoom demo 3

This example demonstrates pan-and-zoom interaction on a scatter plot of breast cancer data from a CSV file, plotting Clump Thickness against Uniformity of Cell Size. The visualization uses Vega-Lite via the vega-lite-api to render circles, with scales bound to interval selections, enabling mouse-drag panning and wheel zooming on the SVG output. It also applies the panzoom library to the DOM element for additional zoom capability, while custom configuration adjusts axis and label styling for readability.

OOleJRask

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

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

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

75% match

Loading thumbnail…

DOM panzoom demo INTERACTIVE! 02

This interactive demo shows a scatter plot of breast cancer dataset attributes, plotting Clump_Thickness against Uniformity_of_Cell_Size. Users can pan and zoom the entire DOM by holding the Alt key, using the panzoom library to control both wheel-zoom and mouse-drag interactions. The visualization is built with Vega-Lite API and rendered as SVG, with D3 v7 fetching the CSV data. The plot fills the viewport and includes linked scale-brushing via a selection parameter bound to the axes.

OOleJRask

75% match

Loading thumbnail…

DOM panzoom demo 4

This example demonstrates how pan-and-zoom interaction can be applied to a scatter plot of breast cancer data. The visualization uses a circle mark for each data point, mapping `Clump_Thickness` and `Uniformity_of_Cell_Size` to x and y axes, with fixed domains. Built with vega-lite-api and registered with vega-lite and vega, the chart fills the viewport. The panzoom library enables smooth zooming and panning of the entire DOM container, while the data is loaded from a CSV via d3.csv.

OOleJRask

75% match

Loading thumbnail…

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

75% match

Loading thumbnail…

zoom/pan d3v4 - Full

This example demonstrates how to implement zoom and pan interactions on an SVG canvas. The visualization displays a single green circle centered in the viewport, with the zoom behavior applied directly to the SVG group element. The code uses the D3 v4 zoom API via `d3.zoom().on("zoom", zoomfn)` to handle mouse and touch events, and the zoom function applies the event transform to the group. A circle is rendered at the center using `svg.append("circle")`, and the zoom handler updates the group’s `transform` attribute while also calling `svg.scale(4)`, which scales the entire group by a fixed factor. The SVG fills the browser window.

IIgathi

74% match