DOM panzoom demo INTERACTIVE!

100%

DOM panzoom demo INTERACTIVE!

✓ Published2🌍 Public

Last edited Nov 29, 2021

Created on Nov 28, 2021

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

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

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

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

74% match

Loading thumbnail…

Scatterplot of Breast Cancer

This scatterplot shows the relationship between clump thickness and cell size in the Breast Cancer dataset, with each point representing a sample. The code loads the CSV data from a GitHub gist using `d3.csv`, parses the numeric fields, and maps them to x and y positions via `d3.scaleLinear` with an auto-computed extent. Circles are rendered as SVG elements, and axes are added using `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, with margins and a fixed point radius, demonstrating a basic D3 v6 data-joining workflow.

RRidhima Saxena

73% match