Animation

100%

✓ Published0🌍 Public

Last edited Jul 14, 2013

Created on Jul 14, 2013

This example demonstrates a simple animation of a rectangular block that moves diagonally across the SVG canvas. Using d3.js, the code generates 999 rectangles and animates their y-position based on their x-coordinate, creating a cascading diagonal motion. The animation is driven by d3’s selection and attribute manipulation, with the SVG elements updated continuously to reflect the changing positions.

AI-generated description

Similar vizzes

Loading thumbnail…

Animation

This example demonstrates the stark contrast between animated and static SVG rendering. The code appends a simple rectangle to the SVG canvas and repeatedly updates its x-coordinate with `setTimeout`, incrementing a counter every 10 milliseconds to create an infinite horizontal slide. Three linked versions allow comparison: one animates continuously, while two alternatives remove the update loop, leaving the rectangle fixed in place. The visualization uses raw D3.js selection and attribute methods (`svg.select("rect").attr`) rather than higher-level transition helpers, highlighting the fundamental mechanism behind frame-based movement in D3.

RRobinL

82% match

Loading thumbnail…

Animation

A small orange square is animated across an SVG canvas using a simple repeating timer. The code draws a single rectangle with d3, then updates its horizontal x position every 10 milliseconds via setInterval, incrementing the coordinate each tick. The animation moves the square steadily from left to right without any interaction, pausing or restarting. This example demonstrates the most basic form of programmatic animation in d3, relying on JavaScript's global timer rather than d3's transition system.

RRobinL

82% match

Loading thumbnail…

No animation

The visualization demonstrates that D3.js selectors return the first matching element, so repeatedly updating a single rectangle’s x attribute only moves that one rectangle, producing no visible motion or multiple shapes. The code uses `svg.append("rect")` and a loop with `svg.select("rect").attr("x", i+10)` to attempt animation, but because the same rectangle is selected each time, the final x position is simply 110. No animation, easing, or cloning is applied, resulting in a static rectangle despite the loop.

RRobinL

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

74% match

Loading thumbnail…

Create an animated rectangle with D3

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.

NNita

73% match

Loading thumbnail…

fresh block

A single red square animates through a sequence of 180- and 360-degree rotations using SVG transitions. The example demonstrates chained `transition()` calls with `duration` and `delay` to create a two-step spinning effect around a fixed center point. Built with D3.js v1 modules including `d3-transition`, `d3-selection`, and `d3-color`, the code directly manipulates the `transform` attribute on a `<rect>` element. The square starts at coordinates (100,100) and rotates in place without moving its position, showcasing how D3 handles attribute tweening for transform strings. No data source is used; the visualization is purely a geometric animation.

GGerardoFurtado

72% match

Loading thumbnail…

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

JJn1532

70% match

Loading thumbnail…

D3 Sketch Test

This example demonstrates the simplest form of animation in D3: a single white circle moving horizontally back and forth across a 960x480 SVG canvas. The circle transitions from x-coordinate 40 to 900 and back, with each leg lasting 3000 milliseconds. The code uses `d3.select`, `append`, `attr`, and chained `transition` calls with `duration`, where the `on("end")` event listener handles looping. It renders via SVG within a React application, though the animation itself operates independently of React’s rendering cycle.

NNita

70% match