Skip to main content
100%

Intro D3 Workshop

✓ Published0🌍 Public
Aaaronboogaard
Last edited Feb 8, 2018
Created on Feb 8, 2018

Fifty circles arranged in concentric rings around a central point animate on click. Selecting a circle moves it to the center and increases its count, while all other circles reposition based on their distance from the selected item’s count. The visualization uses D3 v4 scales (`d3.scaleSqrt`, `d3.scaleLinear`) to map data values to radius and color, with SVG circles and 800-millisecond transitions (`transition().duration(800)`). Randomly generated count data drives the layout, and clicking triggers a re-render that updates positions and fills.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/janwillemtulp/'>janwillemtulp</a>'s block: <a href='http://bl.ocks.org/janwillemtulp/b33c121d2d0e9781bb1b38d88a9bcb44'>Intro D3 Workshop</a>

mit Licensed

Similar vizzes

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
92% 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
87% match
Loading thumbnail…

d3js workshop - circles

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.

VVyrwn
84% 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
84% 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
84% 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
84% match
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
84% 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
83% match