The aim of this puzzle: Make the regular blue object fall like the strange green object.
Walkthrough of the solution: If you were given 1 minute to move your phone from one side of the room to the other, there are a lot of ways you could do it: get it there really quickly and then wait, move smoothly and slowly across, start slowly and speed up as time runs out, or even two steps forward one step back the whole way. All those different ways to move across the room are like the easing of your transition. The ease call takes one argument: a function from the d3 library. d3.easeQuadIn starts slow and speeds up just like how gravity works on Earth, while d3.easeCubicOut starts fast and then slows down. To solve the puzzle, you need to replace the easing function for the blueCircle with the same easing function as the greenCircle.
Sample code solution:
(Tap below to reveal)
function drop() {
blueCircle.transition()
.duration(1000)
.attr('cy', 180)
.ease(d3.easeCubicOut);
greenCircle.transition()
.duration(1000)
.attr('cy', 180)
.ease(d3.easeCubicOut);
}
d3.selectAll('circle')
.on('click',drop);
JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .transition(), .duration(), .attr(‘cy’,), .ease()
Additional Code (hidden code that runs before the puzzle’s code):
var floor = svg.append('rect').attr('fill','slategrey').attr('x',0).attr('y',205).attr('width',300).attr('height',50);
var blueCircle = svg.append('circle').attr('fill','aqua').attr('r',25).attr('cx',100).attr('cy',30);
var greenCircle = svg.append('circle').attr('fill','limegreen').attr('stroke','lime').attr('stroke-width',3).attr('r',25).attr('cx',175).attr('cy',30);
