Get the Popcorn explainer


#1

The aim of this puzzle: Animate the radius and fill color changes using .transition()

Walkthrough of the solution: To animate an attribute change, you use .transition(). The order of .transition() and .attr() is important. You want the .attr() calls come after the .transition(), but they should still be attached. Like this: kernels.transition().attr().attr().

NOT these:

kernels.transition();
kernels.attr();
kernels.attr().transition()

That means you should select the kernels inside the code block {}, and then add .transition(). That will attach the .transition() directly to the kernels so that it comes before the .attr() calls.

Sample code solution:
(Tap below to reveal)

function heatUp() {
  kernels.transition().attr('r', 30).attr('fill', 'white');
}
kernels.on('click', heatUp);

JavaScript Concepts: Code Block (function)

D3 Concepts: .attr('r',), .attr('fill',), .on('click',...), .transition()