d3js workshop - circles 2

100%

d3js workshop - circles 2

✓ Published0🌍 Public

Last edited Oct 19, 2017

Created on Oct 19, 2017

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.

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

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

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

88% match

Loading thumbnail…

Intro D3 Workshop

Fifty red circles radiate from the center of an SVG canvas, each sized by a random count value and positioned by distance from a clicked circle. Clicking a circle increments its count and re-renders the layout, animating all circles to new positions via `transition()` over 800 milliseconds. The example uses D3 v4 scales (`d3.scaleSqrt`, `d3.scaleLinear`) to map counts to circle radius and color, with a color gradient from steelblue to red based on proximity to the clicked circle. A gray ring backdrop and trigonometric positioning complete the interactive workshop demo.

GGJHazelaar

82% match

Loading thumbnail…

d3 workshop Tulp

Fifty red circles orbit a central point, each sized by a random count and positioned by its similarity to a clicked circle. Clicking a circle moves it to the center, increments its count, and reseats all points by a distance function. The example demonstrates animated transitions with d3.scaleLinear for radius and color, d3.scaleSqrt for size, and SVG circle elements, using a click handler and transition duration of 800ms.

FFrissAnalytics

81% match

Loading thumbnail…

D3 js part 2

A looping animation of circles moves vertically in a sine-wave pattern across an SVG canvas, with the number of circles oscillating between five and fifteen over time. The code uses D3 v7's `select`, `range`, and the data-join method `.join('circle')` to bind array data to SVG elements, updating their `cx` and `cy` attributes each frame via a `setInterval` callback. The visualization highlights D3's declarative enter-update-exit pattern for dynamic datasets.

GGautier DAVID

80% match