Animation

100%

✓ Published0🌍 Public

Last edited Jul 14, 2013

Created on Jul 14, 2013

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.

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

84% match

Loading thumbnail…

Animation

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.

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…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

73% 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…

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

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

72% match

Loading thumbnail…

Canvas Fiddling

A small animated square glides horizontally across a blank canvas, moving in discrete steps and disappearing from its starting position as it advances. The example demonstrates fundamental Canvas 2D drawing and animation using the HTML5 `getContext('2d')` API, with a rectangular fill drawn via `fillRect` and cleared each frame using `clearRect`. Driven by a `setInterval` timer at 20-millisecond intervals, the square’s position increments by one pixel per frame, creating a simple, linear motion loop without user interaction.

SStrunck

72% match