D3 Translate Example

100%

D3 Translate Example

✓ Published0🌍 Public

Last edited Dec 24, 2021

Created on Dec 24, 2021

This example demonstrates a panning interaction for a 28×28 grid of colored rectangles rendered as SVG, where the default d3.zoom wheel behavior is replaced with a custom wheel handler that calls `zoomer.translateBy` on a transition. The visualization shows how adding a transition to `translateBy` causes the grid to gradually zoom out instead of scrolling vertically as intended, contrasting with the default behavior without a transition. The code uses `d3.select`, `d3.range`, `d3.zoom`, `d3.interpolate`, and SVG rectangles with random fill colors, with the zoom transform applied directly to the rectangles.

AI-generated description

Example of issue with zoom.translateBy()

MIT Licensed

Similar vizzes

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

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

78% match

Loading thumbnail…

Pan & Zoom Axes

This example shows interactive pan and zoom axes, where a colorful gradient-filled rectangle serves as the plotting area and responds to user drags and wheel gestures. The visualization uses d3-zoom to handle transforms, which rescale the linear scales for both the x and y axes via *transform*.rescaleX and *transform*.rescaleY, updating the axis tick marks and grid lines accordingly. The same transform is applied directly to the SVG rectangle using the SVG transform attribute, while a reset button triggers a smooth transition back to the initial view. The code relies on d3.axisBottom and d3.axisRight to render the axes, with a custom linear gradient defined in SVG defs for the background fill.

GGerardoFurtado

78% match

Loading thumbnail…

Zoom Transitions

Animated grid lines on a canvas demonstrate D3’s zoom transitions, which smoothly pan and scale the view every five seconds to a new random location. The example uses `d3.behavior.zoom` with linear scales, and `transition.call` to invoke the zoom’s translate and event methods. Grid rendering relies on the Canvas 2D API, drawing vertical and horizontal lines based on the current domain, with line width scaling by zoom level.

Mmbostock

78% match

Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning across a field of 2,000 semi-transparent red squares, whose positions are randomly generated from normal distributions centered in the viewport. The visualization shows how HTML elements can be transformed interactively using D3’s zoom behavior, with the underlying coordinate scales updating in real time. It uses D3 v3’s `d3.behavior.zoom` and linear scales (`d3.scale.linear`) to map data coordinates to screen positions, applying CSS `transform` styles to `<div>` elements. Unlike typical SVG-based examples, this implementation renders the squares as HTML `div` elements, highlighting a lightweight alternative for pan-and-zoom interactions without canvas or SVG overhead.

DDinoJay

78% match

Loading thumbnail…

Pan & Zoom Axes

This example demonstrates a zoomable scatterplot where panning and zooming are controlled by the d3-zoom library. The visualization shows a colorful gradient rectangle as the data view, with axes that rescale dynamically through `transform.rescaleX` and `transform.rescaleY`. Users can drag to pan and scroll to zoom, with a button to reset the view via `d3.zoomIdentity`. The SVG rendering uses d3-scaleLinear for axes and a text gradient inspired by Nadieh Bremer.

Mmbostock

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

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

77% match