Skip to main content
100%

d3js workshop - circles 2

✓ Published0🌍 Public
Aaduo122
Last edited Oct 19, 2017
Created on Oct 19, 2017

Three circles, bound to an array of data values, are rendered as SVG elements and animated with a sequence of D3 transitions. The circles initially grow and change fill color, then respond to mouseover events by shrinking and repositioning upward. The example uses D3 v3’s `selectAll`, `data`, `enter`, and `transition` APIs to demonstrate basic data joins, event handling, and chained animations.

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/294888109e025d770c8a680a730ef04e'>04_workshop_interactive circles</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3js workshop - circles

Three circles animate downward and expand while their fill color transitions to red, using D3's data join to bind an array of three numbers to SVG circle elements. The circles respond to mouseover by turning black and to clicks by shrinking to zero radius and fading to grey, with each transition lasting two seconds. The code uses D3 v3's `selectAll`, `data`, `enter`, and `transition` APIs with `duration` and `delay` methods. The initial positions derive from the data values multiplied by four for the x-coordinates.

Aaduo122
94% match
Loading thumbnail…

d3js workshop - circles

Three SVG circles sit in a row inside an 720x120 canvas, built with D3 v3’s selection and data-join pattern. The code defines a static dataset `[10, 20, 30]` and uses `append`, `attr`, and `style` to set each circle’s radius, vertical position, and horizontal offset based on its data value. A commented sequence demonstrates animated transitions: first changing fill color to red with a 2-second duration, then adding per-element delays, and finally combining color, radius, and vertical movement in one transition. All animation code remains inactive, showing only the initial static circles.

Aaduo122
94% match
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
94% match
Loading thumbnail…

d3js workshop - circles 2

Three circles animate downward, change color, and grow before returning to their original positions on click. The visualization demonstrates basic D3 v3 data binding, transitions, and event handling. It creates an SVG canvas, binds an array of three values to circle elements, and uses `transition().delay()` and `transition().duration()` for sequential animation. Clicking a circle triggers a two-second transition that shrinks it to zero radius and turns it black, while mouseover behavior remains commented out in the code.

Aaduo122
93% 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
93% match
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
92% 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
92% 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
92% match