Simple Zoom Example v4 II

100%

Simple Zoom Example v4 II

✓ Published0🌍 Public

Last edited Apr 5, 2017

Created on Apr 5, 2017

This example demonstrates a simple zoom interaction on an SVG canvas populated with 50 randomly placed blue circles. The circles are generated using `d3.range` and assigned random `cx` and `cy` coordinates within the canvas dimensions. The zoom behavior is implemented with the `d3.zoom()` method, which triggers a `zoom` event handler that applies the transform to the circle group. The code uses the D3 v4 library and specifically the `d3.zoom()` API, along with `d3.select` and `attr` for SVG manipulation.

AI-generated description

This is an simple example of adding zoom to your graph.

Click here to read a more detailed explanation on how zoom works.

forked from <a href='http://bl.ocks.org/puzzler10/'>puzzler10</a>'s block: <a href='http://bl.ocks.org/puzzler10/91a6b53d4237c97752d0e466443dad0b'>Simple Zoom Example v4 II </a>

mit Licensed

Similar vizzes

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

85% match

Loading thumbnail…

zoom/pan d3v4 - Full

This example demonstrates how to implement zoom and pan interactions on an SVG canvas. The visualization displays a single green circle centered in the viewport, with the zoom behavior applied directly to the SVG group element. The code uses the D3 v4 zoom API via `d3.zoom().on("zoom", zoomfn)` to handle mouse and touch events, and the zoom function applies the event transform to the group. A circle is rendered at the center using `svg.append("circle")`, and the zoom handler updates the group’s `transform` attribute while also calling `svg.scale(4)`, which scales the entire group by a fixed factor. The SVG fills the browser window.

IIgathi

85% match

Loading thumbnail…

d3v4 - zoom and drag circles - drag adjusted for zoom

This example demonstrates how to zoom and drag circles in d3 v4 while ensuring the drag positions correctly match the mouse location after zooming. A drag handler, built with `d3.drag`, adjusts the circle’s new coordinates by dividing the mouse movement by the current zoom scale, retrieved from the element’s transform attribute. A separate `d3.zoom` handler applies the transform to all SVG circles. The visualization renders 50 randomly positioned yellow circles on a blue rectangle using SVG elements, with data generated via `d3.range` and `Math.random`.

TThanaporn-sk

84% match

Loading thumbnail…

Zoomable Circles & Pan with D3-Zoom

This visualization demonstrates a zoomable and pannable SVG canvas containing six colored circles of varying sizes and positions. The example uses the `d3-zoom` library's `zoom` function, which is applied to the SVG element to handle mouse interactions. A `transform` state, updated via a zoom event callback, is applied to a group element containing all circles, allowing the entire set to be panned and scaled smoothly. The circle data, including x, y, radius, and fill color, is hardcoded in the JavaScript.

DDonald Bagwell

83% match

Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example presents a static scatterplot of six colored circles on a light green background, with zoom and pan interactions enabled. The circles are positioned at fixed coordinates and rendered as SVG elements using d3.select and attribute setters. The zoom behavior is implemented with d3.zoom, which captures the current transform in state and applies it to a group element containing all circles. The state-driven transform updates the group’s transform attribute, allowing the entire collection of circles to be moved and scaled smoothly.

YYanghong Huang

83% match

Loading thumbnail…

MB zoom circles in and out

This example shows a set of four colored circles on a white background that zoom in and out when clicked. Clicking a circle smoothly transitions the viewport to center on that circle and scale it up, while clicking the background resets the view. The code uses d3.zoom with a zoom transform, d3.transition for the 750-millisecond animation, and SVG circle elements. Circle positions and radii come from an inline JSON array, and the zoom behavior applies a transform to a group element containing the circles.

TThanaporn-sk

83% match

Loading thumbnail…

Pan & Zoom III

This example shows a dense spiral of 2,000 circles generated by a phyllotaxis pattern, which users can pan and zoom. The d3-zoom behavior is attached to an invisible overlay rectangle that covers the entire SVG, ensuring it captures all pointer input. On each zoom event, the code applies the current zoom transform to the group element containing the circles via `d3.event.transform` in the `zoomed` callback. This uses SVG transforms and d3.v4’s zoom API, with scale limits set between 0.5 and 4.

MMTClass

82% match

Loading thumbnail…

Fork of D3 Zoom

This example demonstrates interactive zooming and panning on an SVG canvas. A group of circles connected by lines, generated from trigonometric functions in `utils.js`, responds to mouse wheel and drag gestures through the `d3.zoom` API. The zoom behavior applies a scale transform to the container group, respecting a scale extent between 0.5x and 4x. The SVG output is created with the `select` and `append` methods from the `d3` v7 library.

KKhanin Sisaengsuwanchai

82% match