To Get to the Other Side explainer

The aim of this puzzle: Get the circular chicken safely across the road.
Walkthrough of the solution: This puzzle is all about the duration() property. It is used after a transition() to set the time it takes for the transition to complete. The number you put in the parentheses of duration(), called the argument, is the amount of milliseconds (ms) the transition should last. Each second is equal to 1000ms, so if you want the transition to last for 2 seconds you would use .duration(2000). The larger the number, the slower the transition will move, because it has to spread the same amount of animation over a longer time. You just have to play with the duration value for the chicken so that it dodges all of the traffic. If it’s too slow (over 4100ms) it will get hit by the truck. If it’s too fast, it will hit the blue bike (under 1400ms) and maybe the red car(1400ms-2500ms). That means there’s a sweet spot between 2500ms and 4100ms. The definition of the startTraffic() function is hidden, but what it does is set the transitions for all of the vehicles. So when the you click on the chicken, the .on('click',...) runs the cross function. Then the cross function runs the startTraffic function and finally moves on to the chicken transition.
Sample code solution:
(Tap below to reveal)

function cross() {
  startTraffic();
  chicken.transition()
    .duration(3000)
    .attr('cy', 10);
}
chicken.on('click', cross);

Javascript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .transition(), .duration(), .attr(‘cy’,), .on(‘click’,)
Additional Code (hidden code that runs before the puzzle’s code):

var greenerGrass = svg.append('rect').attr('width',500).attr('height',30).attr('fill','green');
var grass = svg.append('rect').attr('width',500).attr('height',100).attr('y',180).attr('fill','darkgreen');
var chicken = svg.append('circle').attr('r',15).attr('cx',150).attr('cy',165).attr('fill','lightyellow');
var bike = svg.append('rect').attr('width',75).attr('height',20).attr('fill','blue').attr('x',150).attr('y',30);
var car = svg.append('rect').attr('width',100).attr('height',50).attr('fill','red').attr('x',-100).attr('y',55);
var truck = svg.append('rect').attr('width',150).attr('height',65).attr('fill','white').attr('x',355).attr('y',110);

function startTraffic(){
    bike.transition().duration(3000).attr('x',-100);
    car.transition().duration(2000).attr('x',400);
    truck.transition().duration(4000).attr('x',-200);
}
3 Likes

Please provide whole code
Here i think… It will be very usefull to learn this because it is easy, cool and usefull in prototype games.