Skip to main content
SimilarExport ZIP
100%

DOM panzoom demo INTERACTIVE! 02

✓ Published0🌍 Public
OOleJRask
Last edited Nov 29, 2021
Created on Nov 29, 2021

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

DOM panzoom demo INTERACTIVE!

This interactive demo shows a scatterplot of breast cancer tissue measurements, with Clump Thickness on the x-axis and Uniformity of Cell Size on the y-axis. The visualization uses Vega-Lite’s interval selection bound to scales to enable brushing, while the panzoom library adds wheel-zoom and mouse-drag panning, restricted to Alt-key activation. Data is loaded via d3.csv from a remote GitHub dataset. The chart fills the viewport and uses custom config for larger axis labels and tooltips.

OOleJRask
97% match
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
95% 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
93% match
Loading thumbnail…

DOM panzoom demo 2

This interactive scatterplot visualizes the Wisconsin breast cancer dataset, plotting Mitoses against Bland_Chromatin with points colored by tumor class. Built with Vega-Lite and rendered via D3, the visualization uses the Panzoom library to enable smooth panning and zooming of the entire DOM area. The chart fills the browser window and includes tooltips for exploring individual data points, with a configurable axis style to improve readability.

OOleJRask
90% match
Loading thumbnail…

DOM panzoom demo SelectPoint

This example demonstrates interactive pan and zoom on a scatterplot of breast cancer data, where each circle represents a sample plotted by Clump Thickness against Uniformity of Cell Size. The page applies the `panzoom` library to the entire DOM container, allowing users to navigate the visualization, while Vega-Lite’s `selectPoint` parameter binds a point selection to the axes’ scales for dynamic filtering. Built with Vega-Lite API and D3 v7, the code loads CSV data from a GitHub gist and renders the marks as SVG, with the visualization sized to fill the browser window.

OOleJRask
89% match
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
75% match
Loading thumbnail…

D3 Zoom

This example demonstrates interactive zooming and panning on a scatterplot of 100 randomly positioned points. Users can scroll to zoom in and out within a scale extent of 0.5x to 4x, or click and drag to pan across the full-window SVG canvas. The visualization uses d3.zoom to attach zoom behavior to the root SVG element and applies the transform directly to that element’s `transform` attribute during the zoom event. Data is generated randomly with the `makeData` utility, and circles are bound and updated using D3’s data join pattern.

KKhanin Sisaengsuwanchai
74% match
Loading thumbnail…

Pan & Zoom III + fix

This example shows an interactive scatterplot of 2,000 points arranged in a spiral, which users can pan and zoom by dragging or scrolling over the entire SVG canvas. The visualization relies on the d3-zoom behavior attached to a transparent overlay rectangle, ensuring smooth pointer interaction regardless of the zoomed content. During zooming, the code applies the current transform directly to a group element using the zoom event’s transform property, updating the positions of all circles in real time. The data is generated on the fly with a phyllotaxis function, while the SVG circles are rendered from an array of computed coordinates.

PPhilippe Rivière
74% match