d3js workshop - circles

100%

d3js workshop - circles

✓ Published0🌍 Public

Last edited Oct 19, 2017

Created on Oct 19, 2017

Three circles animate sequentially, expanding, turning red, and shifting downward when the page loads. Hovering turns a circle black, while clicking shrinks it to nothing and changes its fill to grey. The example uses D3 v3 with SVG rendering, binding an array of three numbers to circle elements via `data()` and `enter()`. Transitions apply staggered delays and durations through `transition().delay()` and `transition().duration()`, and mouse events trigger additional animated style and attribute changes.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/mostaphaRoudsari/'>mostaphaRoudsari</a>'s block: <a href='http://bl.ocks.org/mostaphaRoudsari/665123a242248dcde1e1451bef4069f5'>05_workshop_interactive circles solved</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3js workshop - circles

Three circles, bound to an array of three values, appear in an SVG canvas and animate sequentially: each circle grows, shifts downward, and turns red over two seconds. The code builds the SVG with `d3.select` and `append`, then uses the data-join pattern with `selectAll('circle')`, `data`, and `enter` to create the circles. Mouseover triggers a two-second transition that fills a circle black, while a click transitions it to grey and shrinks its radius to zero, both via `transition.attr` and `style`. The initial animation uses `transition.delay` based on array index.

VVyrwn

95% match

Loading thumbnail…

d3js workshop - circles 2

Three circles spaced horizontally transition in sequence from their initial position, turning red as they shift downward. Hovering reverses the effect, returning a circle to its starting point in black; clicking turns it green, briefly enlarges it, then shrinks it to nothing. The example demonstrates D3 data joins, selection, and event handling within an SVG scene, using D3 v3’s `transition()`, `delay()`, `duration()`, and `on()` methods on a fixed data array. It extends a basic circles tutorial with interactive feedback and animated state changes.

NNate-Holland

93% match

Loading thumbnail…

d3js workshop - circles 2

Three circles animate from the top of an SVG canvas to a lower position, changing color from black to red and growing in radius, before a mouseover returns them to their original size and a click shrinks them to nothing. The visualization demonstrates basic D3 data binding and transitions, using `d3.select` to append SVG circles, `selection.data` to bind an array of radius values, and `transition.delay` and `transition.duration` to control the animation timing. Event handlers attached with `selection.on` trigger the mouseover and click responses.

VVyrwn

93% match

Loading thumbnail…

d3js workshop - circles

Three circles render in an SVG across a 720-by-120 canvas, each initially positioned along the x-axis with a fixed radius and vertical center. The example demonstrates D3’s data-join pattern, binding an array of tuples to circle elements and setting their `cx` attributes based on index. A chained transition then animates each circle sequentially, with a one-second delay between starts, over two seconds changing the fill color to the tuple’s second value, increasing the radius to 17, and shifting the y-coordinate to 80. The code uses d3.v3 selection, `.data()`, `.enter()`, `.append()`, and `.transition()` with `.delay()` and `.duration()`.

VVyrwn

93% match

Loading thumbnail…

d3js workshop - circles 2

Three circles animate from the top of an SVG canvas, shifting downward and turning red through a D3 transition, then revert to their original position and black fill on mouseover. Clicking a circle sets its radius to zero, removing it from view. The example uses D3 v3’s selection, data binding, and transition methods, with event handlers for mouseover and click. It renders with SVG elements and demonstrates basic interactivity, showing how D3 binds an array of numbers to visual properties like x-position and radius.

BBillyBHWong

91% match

Loading thumbnail…

d3js workshop - circles

Three circles are rendered in an SVG, with a red fill and a staggered transition that delays each circle’s color change and radius increase by one second per circle. The example demonstrates D3’s data join, binding an array of numbers to circle positions, and uses `transition().delay()` and `transition().duration()` to animate style and attribute changes over two seconds. The code explicitly appends an SVG element, selects circles via `d3.select`, and applies transitions to fill, radius, and vertical position, showing basic animation and data-driven updates with D3 v3.

AAlbertFranco

91% match

Loading thumbnail…

d3js workshop - circles 2

Three circles of different data values appear in an SVG canvas, then animate by shifting downward and turning red before returning to their original positions on mouseover. The example demonstrates basic D3.v3 selection, data binding, and transition APIs, including `transition().delay().duration()`. Interactive event handling is implemented through `.on("mouseover")`, which changes circle styling and radius. The code initializes an SVG element with `d3.select('body').append('svg')` and uses a data array `[10, 20, 30]` to map circle positions.

LLelandCurtis

91% match

Loading thumbnail…

d3js workshop - circles

Three circles are drawn in an SVG canvas, then animated in sequence: each circle turns red, grows, and shifts downward. The animation is staggered with a one-second delay per circle using D3's transition API, which modifies the fill, radius, and y-position attributes. The SVG elements are created by appending to the canvas and bound to a simple data array, demonstrating basic D3 v3 selection and transition methods.

NNate-Holland

91% match