Bubble Up explainer


#1

The aim of this puzzle: Slow down the .transition() that makes the bubbles rise.

Walkthrough of the solution: The length of time it take for a .transition() to animate the attribute changes is set using .duration(). The argument of .duration() is in milliseconds, so .duration(1000) means, “the transition will take 1 second to complete”. To slow down an animation, you want to make it last longer.
If you want it to last 3.5 seconds, that would be 3500 milliseconds. You can attach .duration(3500) to the .transition() to set the time.

Sample code solution:
(Tap below to reveal)

function rise() {
  bubbles.transition().duration(3500).attr('cy',0);
}
bubbles.on('click', rise);

JavaScript Concepts: Code Block (function)

D3 Concepts: .attr('cy',), .duration(), .on('click',...), .transition()