Big Blue Blob Puzzle Explainer


Aim of the puzzle:
Use the ease method .ease() to modify the rate of an animation’s change over time.

Walk through of solution:
The ease method .ease() defines the rate of an animation’s .transition() over time. For example, an ease value of linear means that there is a constant rate of change, or that the animation neither accelerates or decelerates during its duration. This is the default setting for .transition(). A value of easeQuadIn means that there is an accelerated rate of change, or that the animation begins slowly but speeds up over the course of its duration. An ease value of easeCubicOut means there is a decelerated rate of change, or that the animation starts quickly but slows down as time progresses.

In the code that you start off with, there is a function, changeSize, and an event handler. The changeSize function applies an animation to blob, changing its radius, 'r', over the course of 1 second. The event handler calls the changeSize function when blob is tapped. Since ease is not defined, it defaults to linear. In this puzzle, you’ll change the ease on the blob.

To complete the puzzle, add the ease method, .ease(), to blob after .transition(). Use d3.easeElastic as an argument. Now, when you tap on the blob its rate of change will be non-linear.

Sample code solution:
(Tap below to reveal)

function changeSize() {
    blob.transition().duration(1000).attr('r',35 + pickRandom(100)).ease(d3.easeElastic);


Javascript Concepts: Variable, Function, Event Handler
D3 Concepts: Attribute, .transition(), .duration(), .ease()
Additional Code:

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

let blob = svg.append('circle').attr('r',35).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2).attr('fill','deepskyblue');
listed #2