Drag + Zoom + Slider

100%

Drag + Zoom + Slider

✓ Published0🌍 Public

Last edited Sep 21, 2016

Created on Sep 21, 2016

This example shows a scatterplot of dots from a TSV file, where users can both drag individual circles and zoom the entire view pane. An HTML5 range slider below the chart controls the zoom level, updating the SVG group’s transform scale in real time. Implemented with D3.js v3, it combines `d3.behavior.zoom` for pan/zoom interactions, `d3.behavior.drag` for moving circles, and a slider event handler that calls `zoom.scale(...).event(svg)` to drive the zoom behavior programmatically.

AI-generated description

An extension of this example to include an HTML5 slider in answer to this question.

forked from <a href='http://bl.ocks.org/bollwyvl/'>bollwyvl</a>'s block: <a href='http://bl.ocks.org/bollwyvl/871b7c781b92fd0044f5'>Drag + Zoom + Slider</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Drag + Zoom

In this example, dots loaded from a TSV file are positioned in an SVG scatterplot with a light grid. Users can drag individual circles to move them, while clicking and dragging on the background pans the view, and the mousewheel zooms the entire scene. The code combines `d3.behavior.drag` and `d3.behavior.zoom`, using `stopPropagation` in the dragstarted handler to give dragging precedence over panning. Both behaviors update the container's transform attribute via the zoom event's translate and scale values, with dragged circles updating their cx and cy attributes.

Mmbostock

89% match

Loading thumbnail…

Drag & Zoom II

This example demonstrates a zoomable SVG canvas containing two thousand circles arranged in a phyllotaxis pattern, where users can click and drag on the background to pan the view or drag individual circles to reposition them. The visualization combines d3-drag and d3-zoom, using the `d3.zoomIdentity` transform to update the group’s `transform` attribute during zooming, while the drag handler updates each circle’s `cx` and `cy` attributes directly. Rendering relies on SVG’s built-in hit-testing and coordinate transformation, avoiding the need for manual redraws or complex event logic.

Mmbostock

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

81% match

Loading thumbnail…

Fork of Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable, zoomable circles rendered as an SVG visualization. Users can drag individual circles to reposition them and zoom or pan the entire scene using mouse or touch interactions. The visualization uses D3’s `drag` and `zoom` behaviors, with a state management pattern that updates circle coordinates and the group transform on interaction. Initial circle positions, sizes, and colors are hardcoded as static data, while the `d3.select`, `join`, and `attr` methods handle dynamic rendering and updates.

AAl Piepho

81% match

Loading thumbnail…

force graph with zoom and drag

This example demonstrates a force-directed graph that can be zoomed and dragged. A circle within an SVG group responds to mouse interaction, with the SVG changing its cursor style to indicate draggable zones. The visualization uses D3 v6 to create three separate SVG elements, applies a linear color scale mapping scores to colors like lime, yellow, and red, and employs a power scale for sizing nodes. A zoom effect is implemented via `d3.zoom()`, which updates the SVG’s transform attribute on zoom events.

Ssgzzhinde

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

80% match

Loading thumbnail…

Zooming and Panning

Four multicolored circles arranged in a square pattern sit at the center of an SVG canvas. The visualization demonstrates zooming and panning through d3.behavior.zoom, which captures mouse wheel drags and touch gestures. Users can scale the view between 1× and 10× magnification and pan freely by dragging. The circles’ positions are defined in data arrays and rendered as SVG circle elements with a translate transform applied to the parent group during zoom events.

IIgathi

80% match

Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics

80% match