Create an animated circle with D3

100%

Create an animated circle with D3

✓ Published0🌍 Public

Last edited Jan 16, 2020

Created on Jan 16, 2020

Forked from Create an animated rectangle 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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

88% match

Loading thumbnail…

First D3

A minimal D3 example demonstrates a single SVG circle moving across a 500-by-500 canvas in a three-step animated sequence. The circle initially appears at coordinates (50,50), then transitions horizontally to (150,50), drops vertically to (150,200), and finally returns to its starting x-position. The animation uses chained `transition()` calls with a 1500-millisecond duration per step. The code builds the SVG scene using `d3.select("body").append("svg")` and `attr()`, relying on D3 v3 loaded from the d3js.org CDN within a plain HTML page.

227-12-95

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

84% match

Loading thumbnail…

Simple transition chaining in v6

A circle demonstrates sequential transition chaining in d3.js v6, moving from left to right, then expanding its radius, and finally changing fill color from blue to red. Using the d3-transition API, the code applies three consecutive `.transition()` calls, each with a 4000-millisecond duration, to an SVG circle appended to the body. The example shows how transitions queue and execute in order, rendering the animation directly in SVG.

Dd3noob

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

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

84% match

Loading thumbnail…

Simple transition chaining in v7

This example uses chained `transition()` calls in d3.v7 to animate a single SVG circle through three sequential stages. The circle first slides horizontally from left to right, then expands its radius, and finally changes its fill color from blue to red, with each transition lasting 4000 milliseconds. The animation is built entirely with D3’s selection and transition API, applying attributes like `cx`, `r`, and `style` through `.attr()` and `.style()` methods. The code appends the circle directly to the body via an SVG element, with no external data source.

Dd3noob

84% match

Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita

83% match