Get the Popcorn explainer

Puzzle 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()
Additional Code (hidden code that runs before the puzzle’s code):

function gauss(scale,iter=6) {
    return scale*Array(iter).fill().map(i=>Math.random()).reduce((a,c)=>a+c)/iter;
}

for (let i=0; i<50; i++) {
    svg.append('circle')
                .attr('r',8)
                .attr('cx',gauss(window.innerWidth))
                .attr('cy',gauss(window.innerHeight))
                .attr('fill','#E89800')
                .attr('stroke','grey')
                .attr('stroke-width',0.2);
}

let kernels = d3.selectAll('circle');
#4

Hey there
Can I just ask where the blue words come from in the hidden code, like window and math?
Thanks

#5

Hey there, great question!

window is a global object that is accessible when running JavaScript in a web browser. It has some handy properties built in to it.

The ones we use most often when creating our puzzles is window.innerWidth and window.innerHeight, which tells us how many pixels wide/tall the code output window is (it can vary in size depending on the size of the device).

You can read more about the window object on MDN.

Math is also a global object, and is part of JavaScript’s standard library, and contains a bunch of useful properties and methods. Take a look at the documentation on MDN.

Hope this helps! Let me know if you have any questions.
Ben

1 Like