Skip to main content
SimilarExport ZIP
100%

Exercise v2

✓ Published1🌍 Public
Aalexis
Last edited Jul 3, 2024
Created on Jul 3, 2024
Forked from Exercise v1

This example animates five circles on a black background, each starting at radius 0 and expanding to its target size while updating its position. The circles use distinct colors and opacity, with staggered entrance delays and a faster linear transition for position updates. Built with D3 v7, it employs `transition`, `easeLinear`, and data joins via `selection.join()` to handle enter, update, and exit states. The visualization is a reproduction of a Sol LeWitt art piece, with the code defining explicit x, y, and radius values for each circle and rendering them as an animated SVG.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Exercise v3

A reproduction of a Sol LeWitt art piece shows a black background with five colored circles that animate into place. Using D3.js, the code binds an array of circle objects to SVG elements, entering circles with a slow transition that delays each one and expands its radius from zero. Updates apply a fast linear transition to reposition existing circles, while exits shrink back to zero before removal. The rendering uses D3 transitions with `easeLinear` and explicit key functions for stable data binding.

Aalexis
89% match
Loading thumbnail…

Exercise v1

This visualization reproduces a Sol LeWitt art piece by rendering four semi-transparent circles of varying radii and colors onto an SVG canvas. Built with D3.js, the code uses the `select` and `join` APIs to manage the SVG container and circle elements, positioning them via `cx`, `cy`, and `r` attributes. The circles overlap with a fixed opacity value, creating layered intersections that mimic the geometric style of the original artwork. The composition is static, with no interaction or animation, and the data is hardcoded in an array of objects within the `index.js` file.

Aalexis
83% 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
Loading thumbnail…

style

Six colored circles animate onto a light green background, expanding from zero radius to varied sizes at staggered intervals. After all circles are visible, a second, faster transition updates their positions, shifting them to new coordinates with a linear easing. The example uses D3 v7's `transition()` API with custom durations and delays, joining data to SVG circle elements via `selectAll().join()`. Entering elements grow slowly over two seconds, while updates move in 500 milliseconds, showcasing D3's built-in animation capabilities.

Vvelitetik@gmail.com
82% 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
82% match
Loading thumbnail…

D3 Transitions

This example demonstrates how D3 transitions animate circles across a light green canvas, with circles entering at zero radius and expanding to their final size, while updates move and resize smoothly. The code uses `select`, `transition`, and `easeLinear` from D3 v7, applying a slow 2000ms enter transition with staggered delays and a faster 500ms update transition. A key function on `d.id` drives the enter, update, and exit selections, with exits shrinking back to zero before removal. The six circles have predefined positions, radii, and hex color fills.

SSubhendu Karmakar
82% match
Loading thumbnail…

D3 Transitions

D3 Transitions demonstrates animated circle transitions using D3 version 7. The visualization renders six fixed-position circles that grow from radius zero to their target sizes over two seconds, with staggered delays, then rapidly move between hardcoded coordinates using a 500-millisecond linear ease. The code uses `select`, `transition`, and `easeLinear` from `d3`, applying data joins with explicit enter, update, and exit handlers. Enter animations expand circles, updates reposition them, and exits shrink them before removal, all within a light green SVG backdrop.

CCurran Kelleher
81% match
Loading thumbnail…

Moving Circles - using JOIN v1

Fifteen circles animate in a wave-like pattern across the screen, their vertical positions and radii oscillating sinusoidally over time. The visualization uses D3 v6’s `selectAll`, `data`, and `join` methods to bind and update circle elements on an SVG canvas, with a `setInterval` driving the animation at 60fps. Data is generated procedurally via `range` and trigonometric functions, demonstrating the core update pattern of D3’s data-join without explicit enter or exit handling.

Ddan.tinoco@gmail.com
81% match