Zoom vs. Click

100%

Zoom vs. Click

✓ Published0🌍 Public

Last edited May 31, 2016

Created on Mar 2, 2016

This example distinguishes a mouse click from a zoom gesture (pan or wheel) using `d3.event.defaultPrevented`. Randomly placed colored circles render in SVG with `d3.behavior.zoom` for pan and zoom, while a background `rect` listens for click events; clicking it briefly flashes black before returning to white, but panning or zooming suppresses that flash. The code uses D3 v3’s `d3.event.defaultPrevented`, `d3.scale.category10`, and `d3.range` to generate the data.

AI-generated description

This example demonstrates how to disambiguate a click from a zoom gesture using d3.event.defaultPrevented. Click and drag to pan, mousewheel to zoom, or click the background to briefly highlight it.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

No Zoom on Context Menu

This example demonstrates how to selectively disable D3's zoom behavior by intercepting the mousedown event. A grid of fine lines fills an SVG, and panning works only with the left mouse button; right-click or control-click triggers a colored pulse animation instead of zooming. The code uses `d3.behavior.zoom`, registers a `mousedown` listener, and calls `d3.event.stopImmediatePropagation()` to prevent the zoom handler from firing. Red pulses mark stopped events, while green pulses show successful zoom triggers.

Mmbostock

83% match

Loading thumbnail…

Mouse click

Three circles, bound to the array `[50,40,60]`, render in steel blue on an SVG canvas. Hovering turns a circle red, and clicking turns it black, while a zoom behavior attached via `d3.behavior.zoom` allows panning and scaling the entire group with the mouse wheel or drag. The example demonstrates basic event handling and zoomable SVG rendering using D3 v3, with the data hardcoded in the script.

IIgathi

82% match

Loading thumbnail…

MB zoom circles in and out

Three circles, colored green, purple, and red, sit on a white canvas as the core subjects of this zooming example. The visualization demonstrates click-to-zoom interactions using d3.zoom, where clicking a circle triggers a smooth transition that scales and translates the view to center on that circle. The code uses d3.v4 with SVG rendering, and the zoom behavior is applied to the entire SVG container while individual circles respond to click events. A background rectangle handles resetting the view when clicked, and the active circle is tracked to toggle between zoomed and reset states. The data consists of a simple JSON array of circle positions, radii, and colors, rendered as SVG circle elements.

IIgathi

80% match

Loading thumbnail…

Zoom + Pan

This example demonstrates interactive zooming and panning on a simple coordinate grid with axes, controlled both by mouse gestures and on-screen buttons. The visualization uses d3.behavior.zoom to link the scale domains to user input, with the axes redrawn on each zoom event. Button clicks trigger animated transitions that adjust the zoom scale or translate the view, recalculating the center point in data space to maintain focus. The rendering uses SVG with d3.v3, and the code explicitly handles coordinate conversion between screen and data space via the zoom object's scale and translate properties.

663anp3ca

79% match

Loading thumbnail…

Zoom + Pan

This example demonstrates how to pan and zoom a chart using D3.js v3. It renders an SVG with axes and a filled background rectangle, using linear scales for the x- and y- dimensions. The `d3.behavior.zoom` API links the zoom behavior to the scales, allowing mouse wheel and drag interactions to rescale the axes. When zooming occurs, the axes are redrawn to reflect the updated scale ranges. The code sets a zoom scale extent between 1 and 32, and uses `d3.svg.axis` to produce the tick marks and grid lines.

Mmbostock

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

78% match

Loading thumbnail…

D3 Zoom

A D3 zoom interface demonstrates interactive panning and scaling within an SVG coordinate system. A single green circle, positioned through linear scales, responds to mouse wheel and drag gestures that trigger the `d3.zoom` behavior. The example simultaneously updates axis tick marks via `transform.rescaleX` and `rescaleY`, while displaying the current translation values and zoom multiplier in separate HTML divs. The visualization renders with SVG elements, using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to maintain spatial mapping during the zoom transform.

WWRCIECH

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

78% match