DOM panzoom demo 4

100%

DOM panzoom demo 4

✓ Published1🌍 Public

Last edited Nov 28, 2021

Created on Nov 27, 2021

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.

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

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

93% match

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

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

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

88% match

Loading thumbnail…

Simple Zoom and Pan

This example demonstrates simple zoom and pan interactions on a scatterplot of 100 randomly positioned circles. The visualization uses D3 v4 to render SVG circles with a categorical color scale, while a transparent overlay rectangle captures pointer events and applies a zoom behavior with a scale extent from 0.5× to 4×. The zoomed function updates the transform attribute of a container group, enabling smooth panning and scaling of all circles. The code leverages d3.zoom and d3.event.transform to handle the interaction, with the data generated on the fly using d3.range and Math.random.

EEfratVil

76% match

Loading thumbnail…

Vega-Lite API Template 4

This example uses the Vega-Lite API to render two scatter plots of the Wisconsin Breast Cancer dataset, with the main chart showing the relationship between Mitoses and Bland_Chromatin while a smaller overview chart displays Bare_Nuclei against Uniformity_of_Cell_Shape. The visualization uses `markCircle` with low opacity and size 300 to reveal density distributions, with points colored by class and tooltips showing the class label. The main chart resizes to fit the window while the navigator view occupies one-third of the width and one-fifth of the height, both using `vega-lite-api` with a dark styled config that removes axis domains and applies small gray guide labels.

OOleJRask

76% match

Loading thumbnail…

Zooming

This example demonstrates D3.js zooming on a scatterplot of name, weight, and height data from a CSV file. The visualization renders circles in SVG, with axes and a zoomable plot area. Users can pan and zoom via the `d3.zoom` API, which rescales both x and y scales (`rescaleX`, `rescaleY`) and updates the axes and circle positions. The code uses React for the overall structure, with D3 v6 handling data binding, transitions, and axis generation.

DDasbach.EJ

75% match