d3js workshop - circles

100%

d3js workshop - circles

✓ Published0🌍 Public

Last edited Oct 19, 2017

Created on Oct 19, 2017

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.

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/4663275cf71af0e30e1fe869af90cb39'>03_workshop_the 3 circles</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3js workshop - circles

This example demonstrates how to animate three circles on an SVG canvas using D3.js version 3, showing how data binds to elements and transitions update their appearance. It creates an SVG of 720 by 120 pixels, binds a simple array of three numbers to circle elements, and positions them horizontally based on their data values. The visualization uses chained `transition()` methods with configurable `duration()` and `delay()` to animate the circles’ fill color to red, and also applies radius and vertical position changes. The code relies on D3’s data-join pattern (`selectAll`, `data`, `enter`) and shows how multiple transitions can be sequenced with per-element delays.

BBillyBHWong

94% match

Loading thumbnail…

d3js workshop - circles

Three circles appear in a horizontal row on an SVG canvas, then animate their fill color, radius, and vertical position. The example demonstrates basic D3.js data binding and transitions using `d3.selectAll`, `.data()`, `.enter()`, and `.append()`, with a data array of `[10, 20, 30]` determining circle indices. It uses `transition().duration()` and `transition().delay()` to stagger color changes to red over two seconds while also shifting the circles downward. The code is a workshop exercise built with D3 v3, rendering via SVG elements in the browser.

OOValdivia110

93% match

Loading thumbnail…

d3js workshop - circles

This example demonstrates how to create and animate three circles in an SVG scene using D3.js version 3. The visualization shows circles transitioning from their default black fill to red, with each circle animating sequentially based on a delay. The code builds an SVG container, binds an array of numeric data to circle elements via `d3.selectAll` and `data().enter().append()`, then applies transitions using `transition()`, `delay()`, and `duration()`. The example illustrates basic D3 data joins, SVG circle attributes like `cx`, `cy`, and `r`, and chained transition methods for styling and position changes.

LLelandCurtis

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

92% match

Loading thumbnail…

d3js workshop - circles 2

This example demonstrates three circles that animate and respond to user interaction. The circles initially appear at set positions, then transition to a new radius and vertical offset before returning to their original state on mouseover. A click event is also set up to shrink a circle out of existence. The visualization uses D3.js v3, selecting SVG elements and binding data to create the circles, with transitions controlling the animated changes and event listeners handling mouseover and click actions.

AAlbertFranco

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

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

91% match

Loading thumbnail…

d3js workshop - circles 2

An interactive D3.js visualization displays three circles that initialize in a horizontal row, then transition to a larger red size with a staggered delay before resetting on mouseover. The example demonstrates basic SVG circle creation using data binding with an array of values, where circle x-coordinates derive from the data. It applies transitions with staged timing and duration, then adds mouseover events to change circle fill color and dimensions, returning them to their original state. The code uses d3.select, selection.data, enter, append, transition, and event handling.

OOValdivia110

91% match