Skip to main content
SimilarExport ZIP
100%

Scale & translate

✓ Published0🌍 Public
PPatrick Wojda
Last edited Apr 18, 2018
Created on Apr 18, 2018

A short, looping D3.js v4 animation demonstrates the interplay of SVG transform operations. It starts with four circles, one red at (100,100) and three at the origin, and then sequentially applies `translate` and `scale` transforms via `transition()` calls. The example highlights how `scale()` scales the coordinate system, not just the element, showing that a subsequent `translate` must compensate for the scaling factor to maintain a desired position. The circles use SVG attributes and fill-opacity styling.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

transform, scale example

This example demonstrates how SVG transform chaining applies scale and rotation to a text element relative to a fixed coordinate system. The code renders a single text label ("that's the way") positioned at the center of a canvas, with a green crosshair polyline marking the reference point. Using D3 v4, the script selects the body, appends an SVG container, and applies a transform attribute combining translate, scale, and rotate operations. The visual result shows the text enlarged and tilted around its anchor, while the polyline highlights the origin. The example relies on D3's selection and attribute methods, with SVG elements styled via CSS classes.

335degrees
80% match
Loading thumbnail…

transform, scale example

This example demonstrates how the SVG `transform` attribute’s `scale` function modifies a circle’s size without altering its explicit radius. A single circle, positioned at (100, 100) with a radius of 50, is scaled by a factor of 2, effectively doubling its rendered dimensions while the original radius remains unchanged in the code. The visualization uses D3 v4 to append the circle and two reference polylines that mark the original center lines at x=100 and y=100. Styled with CSS classes for fill and stroke, the hover effect changes the circle’s radius and stroke width. The rendering relies on D3’s selection and attribute methods, outputting SVG.

335degrees
79% match
Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis
78% match
Loading thumbnail…

Simple transition chaining in v4

A circle begins on the left side of an SVG canvas and performs three sequential transitions: it moves horizontally to the right over four seconds, then doubles its radius over another four seconds, and finally changes its fill color from blue to red. The example demonstrates the chaining of transitions in d3.js v4, where each call to `transition()` queues the next animation stage after the previous one completes. The scene renders as animated SVG, using the `d3.select`, `append`, and `attr`/`style` methods to construct and modify the circle element, with transition durations set in milliseconds.

Dd3noob
78% match
Loading thumbnail…

transitions

This example animates a set of circles as they move and resize across a wide SVG canvas. Five circles, each driven by values from a static JavaScript array, shift their horizontal, vertical, and radius properties over a four-second duration. The code uses D3's `select()` to append the SVG and builds the animation with the `transition()` API, chaining `.duration()`, `.attr()`, and opacity settings. The circles are rendered as semi-transparent blue shapes, with the initial data divided by a constant factor within the external data module.

NNita
77% match
Loading thumbnail…

transform, scale example

This example demonstrates how D3’s `transform` attribute applies scaling and rotation to SVG text. The text "that's the way" is positioned at (200,200), scaled by a factor of 3, and rotated 20 degrees, all within an SVG canvas. Two reference polylines cross at the text’s origin to highlight the transformation’s effect. The code uses D3 v4 to append the SVG, set attributes like `transform`, and style elements via CSS classes. Hover interactions on `.dot` elements are defined but unused here. The rendering is purely SVG, with no external data source.

335degrees
77% match
Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock
77% match
Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar
77% match