d3-zoomable-axis — zoom a penguins scatterplot

Drag a handle (or Tab to it and use ← → / Home / End), or drag the shaded band to pan. The scatterplot zooms live to the selected x (flipper length) and y (body mass) window — direct manipulation, tightly coupled.

This page imports the published npm package @john-guerra/d3-zoomable-axis@0.0.4 from the esm.sh CDN — the same code you get from npm install.

—

Filter instead of zoom (dynamic query)

Same idea, but the axes sit on the top (x) and right (y) — the range filters rather than zooms: the scales stay at full extent, points inside the selected x and y window keep their species color, the rest grey out. Each scent grows away from the plot (top histogram upward, right histogram rightward), showing the orientation-aware direction. This is the Shneiderman/Ahlberg dynamic-query pattern.

—

Filter synced with a box brush

The two axes and a 2D box brush on the plot are three views of one shared [xRange, yRange] selection, kept in sync the reactivewidgets.org way: each view's programmatic update is silent, so moving the brush drives the axes and moving an axis drives the brush — no feedback loop. Drag a box on the scatter, or drag either axis; the in-range points and both scents update together.

—

Without scent

Same axes and interaction, no distribution drawn along them.

—