scaling-corner

100%

scaling-corner

✓ Published0🌍 Public

Last edited Feb 13, 2018

Created on Feb 13, 2018

Two rounded rectangles scale vertically in a looping animation, while dashed circles mark their corners. The left rectangle stretches with its corner radius fixed, while the right rectangle divides its `ry` value by the scale factor to keep the corner arcs visually circular. Built with d3.timer and SVG transforms, the example demonstrates how to adjust a shape’s radius when applying non-uniform scaling.

AI-generated description

To keep the radius of a round rectangle constant when the y scaling is adjusted, divide the ry property by the scaling.

Here, the scale is scale(1, ${s}), so ry is set to r/s.

Similar vizzes

Loading thumbnail…

Rounded Rectangles

A grid of 25 rounded rectangles animates toward the mouse position while continuously rotating, with each rectangle’s fill color drawn from a categorical scale. Driven by a d3.timer, each tick updates the rectangles’ center coordinates and rotation angle based on their distance to the cursor. The SVG shapes use `rx` and `ry` attributes, and the code leverages D3’s data binding, `d3.scale.category20c`, and a `mousemove` event to track the pointer. This example adapts a Paper.js demo into D3 with animated transforms.

Mmbostock

74% match

Loading thumbnail…

Scale & translate

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.

PPatrick Wojda

73% match

Loading thumbnail…

Arc Corners III

Two donut charts display the same Fibonacci sequence as a series of arcs. One chart uses straight-edged arc segments, while the other animates its corner radius between zero and the maximum possible, transitioning from sharp to fully rounded corners. The animation uses a cubic-in-out easing over 2.5 seconds. The code uses `d3.layout.pie` and `d3.svg.arc` with its `cornerRadius` method, rendering to SVG with `d3.select`, `d3.timer`, and the `d3.ease` function.

Mmbostock

70% match

Loading thumbnail…

expanding-circles

Expanding circles continuously appear across the screen, growing from tiny dots to large rings with random fill and stroke colors. The animation generates a new batch of circles every second, each positioned on a grid spanning the full viewport. The code uses D3’s selection, data join, and chained transitions with `transition.attr('r')` to animate radius, while leveraging `d3.shuffle` to randomize drawing order. The SVG rendering relies on D3’s `append` and `translate` helpers from the d3-starterkit, with colors generated by a custom `randColor` function.

11wheel

70% match

Loading thumbnail…

Gist f4dd5c4b997e02efe9be

Four animated SVGs show a square deforming as its four corner points move along a continuously shrinking path. Each panel uses a different rule for selecting the next point: constant interpolation, gradually increasing step size, random step length, and a step inversely proportional to the remaining distance. The code relies on `d3.select`, `transition`, and `setInterval`, drawing line segments with `path` elements while updating point positions via the geometric helper functions defined in `geomtry.js`.

11wheel

70% match

Loading thumbnail…

Rounded Arc Test

Animated test of rounded and padded arcs rendered to Canvas with d3-shape. The Fibonacci sequence data is visualized as a pie chart, with arcs transitioning between square and fully rounded corners. Using d3-shape’s `arc` and `pie` APIs, the animation cycles every 2.5 seconds, adjusting `cornerRadius` via d3-ease’s `cubicInOut`. Stroke styles and a gray outline highlight the changing geometry.

Mmbostock

69% match

Loading thumbnail…

D3: Drawing Scale

This example demonstrates how D3’s linear and square-root scales translate raw data coordinates into pixel positions and circle radii. It plots an array of 11 `[x, y]` pairs as circles and red text labels on an SVG canvas. The code uses `d3.scaleLinear()` for both the x and y axes, and `d3.scaleSqrt()` for sizing the circles proportionally. The scales are configured with custom domains and output ranges, with padding applied to keep marks inside the 500×300 viewport. Data is rendered statically, with labels showing the original coordinate values.

MMarisa Tania

69% match

Loading thumbnail…

Arc Corners II

This example demonstrates the `cornerRadius` option for D3’s arc generator, which rounds the corners of pie-slice shapes. Seven arcs, sized by Fibonacci numbers, are drawn in translucent colors over a white stroke on a Canvas. The code uses `d3.pie()` to compute angles, `d3.arc()` with `cornerRadius` to generate paths, and the Canvas 2D API (`context.fill`, `stroke`) for rendering. A second pass overlays small circles at each corner to highlight the rounded geometry.

Mmbostock

69% match