My Object!

100%

✓ Published0🌍 Public

Last edited Aug 27, 2018

Created on Aug 27, 2018

Five filled circles appear in a vertical row, centered at increasing x-coordinates with radii growing from 100 to 500. The example uses D3 v5 and SVG animation to demonstrate a staged transition: after a two-second delay, the circles become semi-transparent, scale to half their size, and gain a red stroke with a width of one em. All circles share a fixed y-coordinate and blue fill, with data provided as an inline array of objects.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

78% match

Loading thumbnail…

Rendering dynamic data

Five circles, colored by a D3 ordinal scale, animate across an SVG canvas as JavaScript modifies an array of fruit objects. The example uses the D3 version 5 API to demonstrate data joins with `enter`, `merge`, and `exit` selections, plus `transition().duration()` to animate radius and position changes over time.

Ppplomith

78% match

Loading thumbnail…

HTML Starter

Five red circles appear in a row across the center of an SVG canvas, created using D3 v5 data joins. The code generates an array of apple objects with `d3.range`, binds it to circle elements, and renders them with a static radius and fill. It then removes one data item to demonstrate the `.exit()` selection, but no transition animates the removal. The visualization relies on D3 selections and standard SVG attributes.

Mmohdabidali

77% match

Loading thumbnail…

Exercise v2

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.

Aalexis

77% match

Loading thumbnail…

Multiple SVGs

Three stacked SVG panels show parallel animated sequences of circles moving horizontally across colored backgrounds. Each SVG contains ten circles driven by an array of numeric values, with one panel displaying a static blue dot alongside an expanding green-outlined circle, while the other two panels animate yellow and red outlines using D3 v5 transitions. The example demonstrates creating multiple independent SVG containers via d3.select and append, applying staggered transition.attr calls with a two-second duration to position circles at calculated coordinates.

NNita

77% match

Loading thumbnail…

Untitled

Five circles in a horizontal row show a small dataset of numeric values, sized proportionally and shaded with a sequential color scale from light to dark green, with each value labeled beside it. The code uses D3 v4’s data join to bind an array of five numbers to SVG group elements, then appends circles and text. Circle radii are scaled by the data value, and colors come from a hardcoded array, while dimensions are set directly on the SVG.

DDavid-Wong110723

77% match