Skip to main content
SimilarExport ZIP
100%

Zoom Skeleton

✓ Published3🌍 Public
Ppsabela
Last edited Dec 1, 2020
Created on Dec 1, 2020

This example demonstrates a zoomable SVG stage built with React and D3 v6. A zoom behavior attached to the SVG element updates a transform state, which is applied to a child `<g>` container, allowing the text "Hello World!" to pan and scale in response to mouse gestures. The implementation uses React hooks (`useState`, `useEffect`) and D3's `zoom` and `select` APIs, with the stage and zoom container defined as reusable components. The SVG is rendered declaratively via React, with D3 handling the interactive zoom events.

AI-generated description

A program that follow a mouse with a circle HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Zoom Skeleton

This example demonstrates a zoomable SVG visualization built with React and D3, showing a simple text label that can be panned and scaled using the mouse wheel or drag gestures. The code fetches JSON data and performs data transformations with `d3.rollup` and `d3.filter`, though the rendered output remains minimal. The zoom behavior is implemented via `d3.zoom`, which updates a React state transform that is applied to a group element using SVG `transform` attributes. The visualization uses React hooks like `useState`, `useEffect`, and `useContext` to manage the SVG stage and zoom container, with D3’s event handling integrated through the `select` API.

Ppsabela
92% match
Loading thumbnail…

react zoom transition

This example demonstrates a zoomable React component that applies a D3 zoom behavior to any SVG content, shown here with a large “Hello, World!” text element. The `ZoomContainer` component uses `d3.zoom()` and its `zoom` event to capture the current transform, storing it in React state via `useState`, then applies that transform as `translate` and `scale` attributes on a `<g>` element. The `Stage` component provides the SVG context through React’s `Context` API, and the `useSvg` hook supplies the DOM node to D3.

AAnimesh Nautiyal
88% match
Loading thumbnail…

Fork of React Starter

This example demonstrates an interactive SVG pan-and-zoom interface built with the react-svg-pan-zoom library. It renders a set of overlapping geometric shapes—three circles and a rectangle—inside a 500×500 pixel viewport, with buttons that trigger zooming, fitting to a selection, or fitting the entire SVG to the viewer. The component tracks zoom and pan events through console logging, and uses the `fitToViewer` method on initial mount to center the scene. The visualization is constructed using basic SVG elements such as `<rect>` and `<circle>`, with React handling the UI state.

Ssmeiyin
77% 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
76% 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
76% match
Loading thumbnail…

Zoom + Pan

A zoomable and pannable SVG viewport displays a large grid with axes, controlled by the mouse. The example shows how to programmatically reset the zoom state using a button. It uses d3.behavior.zoom with d3.scale.linear domains, and a transition tween with d3.interpolate to animate the domain reset. The axes and grid are rendered as SVG shapes, and zoomed() rebinds the axes to the updated scales during the transition.

Mmbostock
74% 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
74% 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
73% match