Zoom Skeleton

100%

✓ Published0🌍 Public

Last edited Dec 31, 2020

Created on Dec 21, 2020

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.

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 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.

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

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

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

79% match

Loading thumbnail…

Zooming

This example demonstrates D3.js zooming on a scatterplot of name, weight, and height data from a CSV file. The visualization renders circles in SVG, with axes and a zoomable plot area. Users can pan and zoom via the `d3.zoom` API, which rescales both x and y scales (`rescaleX`, `rescaleY`) and updates the axes and circle positions. The code uses React for the overall structure, with D3 v6 handling data binding, transitions, and axis generation.

DDasbach.EJ

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

77% 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…

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

77% match