Falling Down Explainer


Aim of the puzzle: Use .transition() to animate an SVG shape.
Walk through of solution: The .transition() method animates the changes made to an SVG shape, by applying any new attributes over time.

Without .transition(), any changes made to an SVG shape would be applied instantly.

To complete the puzzle, add .transition() to the end of circle inside the fall() function declaration, then use .attr() to set the attributes for circle to transition to.

When using .transition(), any new attributes must be on the same line as the .transition() for the animation to work properly.

Sample code solution:

let circle = svg.append('circle').attr('fill', 'red').attr('r', 15).attr('cx', 150).attr('cy', 15);

function fall() {
    circle.transition().attr('cy', 200).attr('r', 30);

circle.on('click', fall);

**JavaScript Concepts: Functions, Variables, Properties, Event Handlers, Callback Functions
D3 Concepts: .attr(), .transition(), .append()

listed #2