DOM panzoom demo 2

100%

DOM panzoom demo 2

✓ Published1🌍 Public

Last edited Nov 27, 2021

Created on Nov 27, 2021

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.

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

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

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

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

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

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

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

72% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Breast Cancer dataset, with points transitioning every two seconds between four numeric attributes: area, texture, perimeter, and radius standard error. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined to data and updated via a `setInterval` callback that swaps the x-value accessor. The reusable chart pattern, defined in `scatterPlot.js`, accepts configurable width, height, margins, and radius, with animations handled through D3’s data join.

Aamiralitah

72% match