Create an animated rectangle with D3

100%

Create an animated rectangle with D3

✓ Published2🌍 Public

Last edited Jan 16, 2020

Created on Jan 14, 2020

This example demonstrates how D3 transitions can animate the properties of an SVG rectangle. An initially short, 100-pixel-wide rectangle grows in height from zero to 400 pixels over two seconds after a one-second delay, while its fill color changes from steelblue to a warm orange in a second transition. The code uses D3 v5’s `d3.select` to append an SVG element, `selection.append('rect')` to create the shape, and chained `transition()` calls with `.delay()` and `.duration()` methods. The rectangle is rendered directly in the browser via SVG, with all styling and timing defined imperatively in JavaScript.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Create an animated circle with D3

A circle in an SVG transitions through a sequence of fill colors—red, steelblue, and orange—then shrinks to a radius of zero and expands back to its original size while turning black. The example demonstrates D3 v5's chained transitions, where each `transition()` call queues a new animation stage with specified `duration` and optional `delay`. The circle is appended to the body via `d3.select`, and its position and initial radius are set with SVG attributes, while styling from the page's CSS centers the content.

NNita

84% match

Loading thumbnail…

transitions

Five blue squares animate their width and height from zero to the values in the rectData array (100, 200, 300, 400, 500), growing at a 0.3 opacity on a 960-by-500 SVG canvas. Using D3 v5 and the select API, the visualization attaches a transition to the enter selection of each rectangle, applying a 5-second duration with a 250-millisecond delay to both dimension changes simultaneously.

NNita

82% match

Loading thumbnail…

d3 Animation

This example demonstrates a single-circle animation using D3 transitions. The visualization shows a red-outlined circle that starts at the left side of an SVG canvas and moves downward while changing its fill color to green over one second. The code appends an SVG element sized to the browser window, creates a circle with initial x-coordinate 200, then chains a transition with a 1000-millisecond duration to animate the y-coordinate, radius, and fill style. It uses D3 v6's `selection.transition()` and `transition.attr()` methods within a minimal HTML page.

MMTR

81% match

Loading thumbnail…

Test1

This example animates twenty pairs of rectangles moving diagonally across an SVG canvas, with each rectangle shifting horizontally and vertically before transitioning to a red fill. The visualization demonstrates chained D3 transitions, where the initial position attributes are set without animation, then followed by two sequential transition stages. The data is generated programmatically in JavaScript using a loop to create an array of x-coordinates. The code uses D3 v5’s selection, data binding, and `.transition().duration()` API, rendering elements as SVG rectangles within a 900×500 viewport.

NNita

81% match

Loading thumbnail…

d3 course

This example demonstrates a single red rectangle that smoothly transitions to green and dramatically thickens its stroke when hovered, using CSS transitions on SVG `rect` elements. The code relies on plain HTML, CSS, and JavaScript, with no external libraries or data sources. It sets initial styles for the rectangle and defines a hover state, allowing the browser to interpolate the fill color and stroke width over three seconds. The empty script tag suggests the visualization is static, with all interaction handled purely through CSS.

AAlexander Garzo

80% match

Loading thumbnail…

SVG Animation using CSS Transition

A single red rectangle with a black border animates smoothly when hovered, transitioning its fill color to green and expanding its stroke width over three seconds. This simple example demonstrates SVG animation achieved through CSS transitions, applied directly to the `rect` element using the `transition: all 3000ms` property. The page is a bare HTML document with embedded CSS and JavaScript, showcasing how CSS can drive SVG property changes without explicit JavaScript animation logic. The HTML includes a minimal SVG canvas of 960 by 500 pixels, with the rectangle's styling and hover state defined entirely in the stylesheet.

Ddaigou65

79% match

Loading thumbnail…

SVG Transition rectangle

This example shows how CSS transitions can animate SVG shapes when a user hovers over them. A red rectangle changes its fill color to blue, increases its stroke width, and shifts its stroke color to grey over 3 seconds, while a circle fades to light green and scales up over 2 seconds. A second yellow rectangle remains static, illustrating contrast. The code uses plain HTML, CSS, and JavaScript with inline SVG, leveraging CSS `transition` and `:hover` pseudo-classes. No JavaScript libraries are used; the rendering relies on the browser’s native SVG support.

Gguththered

79% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates a D3 workshop exercise focused on SVGs and transitions, showing how to create and animate rectangles within an SVG canvas. It begins with a static scene of blue, red, and yellow shapes, then uses D3’s `transition()` and `attr()` methods to move rectangles to random positions over one second when a button is clicked. The code appends rectangles bound to an array of color data, merges existing selections, and animates both position and fill color randomly. It relies on D3 v4’s data join and selection APIs, with animations driven by `duration()` and `delay()` methods.

CCirieneve

79% match