Stop Short explainer

The aim of this puzzle: Make the box stop moving when you tap on the red button.

Walkthrough of the solution: When the code starts running, the box.transition()... starts animating the box. The box will keep moving until another .transition() is applied to the box, or the original transition finishes, or it is interrupted with box.interrupt().

Inside the stopBox() function definition, add box.interrupt(). When that command runs any transition animations on the box will be cancelled. The last line of code already connects the stopBox function to the button using button.on('click',stopBox)

Sample code solution:
(Tap below to reveal)

function stopBox() {
  box.interrupt();
}
box.transition().ease(d3.easeLinear).duration(10000).attr('x', 0);
button.on('click', stopBox);

JavaScript Concepts: Code Block (function)

D3 Concepts: .attr('x',), .duration(), .ease(), .interrupt(), .on('click',...), .transition()
Additional Code (hidden code that runs before the puzzle’s code):

let box = svg.append('rect')
                .attr('width',100)
                .attr('height',100)
                .attr('x',window.innerWidth-100)
                .attr('y',60)
                .attr('fill',`hsl(${50+Math.random()*250},100%,50%)`);
                
let button = svg.append('circle')
                .attr('r',30)
                .attr('cx',30)
                .attr('cy',30)
                .attr('fill','red');