Slow Down Puzzle explainer

Aim of the puzzle:
Use the duration method .duration() to change the speed on an SVG animation.

Walk through of solution:
The duration method .duration() defines the amount of time, in milliseconds, that a .transition() takes to complete. The higher the number, the slower the animation.

In the code that you start off with, there is a function move and an event handler that calls move when shapes is tapped. The move function does two things: it transitions the circles from their current 'cx' position to 400 over the course of 1000 milliseconds (1 second), and - at the same time - it transitions the squares from their current 'x' position to -400 over the course of 1000 milliseconds (1 second). In this puzzle, you’ll slow that animation down by adjusting the .duration() of the .transition() to a higher number.

To complete the puzzle, change the argument of each duration method .duration() to 4000 (4 seconds). Now, when you tap on the shapes they won’t move as quickly as before.

Sample code solution:

function move() {
    circles.transition()
            .duration(4000)
            .attr('cx',400)

    squares.transition()
            .duration(4000)
            .attr('x',-400)
}

shapes.on('click', move);

Javascript Concepts: Variable, Event Handler, Function
D3 Concepts: Attribute, .duration(), .transition()
Additional Code (hidden code that runs before the puzzle’s code):

for (let i =0; i<10; i++){
    let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
    let circle = svg.append('circle')             
                .attr('r',10 + Math.random()*25)
                .attr('cx',Math.random()*window.innerWidth)
                .attr('cy',Math.random()*window.innerHeight)
                .attr('fill',color)
                .attr('opacity',`${0.2*pickRandom(9)}`);
}

for (let i =0; i<10; i++){
    let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
    let square = svg.append('rect')             
                .attr('width',30 + Math.random()*6)
                .attr('height',30 + Math.random()*6)
                .attr('x',Math.random()*window.innerWidth)
                .attr('y',Math.random()*window.innerHeight)
                .attr('fill',color)
                .attr('opacity',`${0.5*pickRandom(9)}`);
}

            

let circles = d3.selectAll('circle')
let squares = d3.selectAll('rect')

let shapes = d3.selectAll('circle, rect')

The code is right and this practice puzzle passes me, but the animation is taking place instanteously. There seems to be a bug in the duration attribute.