Raise the Stakes explainer

The aim of this puzzle: Make the balloon increase in speed as it falls, and remove it if it gets hits the ground.

Walkthrough of the solution: To change the way a transition moves a shape from point A to B, we use .ease(). The .ease() function takes 1 argument which is stored in the d3 library. In this case, there’s only 1 ease function listed: .easeQuadIn. To apply the new easing function, we simply attach .ease(d3.easeQuadIn) to the .transition(). To make the balloon “pop” if it touches the ground, we need to use .remove(). We know that the balloon touches the ground when the transition is over, so we can simply add .remove() to the .transition() as well. The transition knows to only remove the balloon at the very end, even if you use .transiton().remove()...

Review cards:
This last puzzle might test your memory a bit. You learned about .ease() and .remove() back in the 1st Animations course. If you complete Cutting Ties, you should be able to figure out Raise the Stakes. If you want a little more practice, try solving Bowl a Strike and Strange Gravity from the last course.

Sample code solution:
(Tap below to reveal)

Since this is part of the final topic of the Animations II course and it is testing your knowledge, there is no sample solution code.

D3 Concepts: .ease(), .remove()
Additional Code (hidden code that runs before the puzzle’s code):

var position = [];
for (var i=35; i<=window.innerWidth-35; i+=5) {
    position.push(i);
}

svg.append('rect').attr('fill','silver').attr('y',165+35).attr('width',window.innerWidth).attr('height',window.innerHeight-200);

Hi!
I successfully completed the last task Raise the Stakes, but everyday I have notification from application about incomplete task. Is it a bug or a feature? I would keep notifications ON if new courses will appear, but these messages are boring me.

Best regards,
Oleg.

A post was merged into an existing topic: Keyboard in playground

Need help with the puzzle it’s confusing me and I want to know what the problem is

Here’s the photo

Hey there, you’re very close to finishing! Just add .remove() after the end of .ease(d3.easeQuadIn), like this:

.ease(d3.easeQuadIn).remove()

Hope this helps!
Ben

Thanks a lot grasshopper Ben for helping me pass.have a great night.

2 Likes

Please help me
I can’t understand

I copied it to code playground and changed the Duration lower so that it was faster! And I changed the color! It’s a really fun game!

let balloon = svg.append('circle').attr('fill', 'red').attr('r', 35).attr('cx', pickRandom(position)).attr('cy', 35);
balloon.on('click', (___) => {
  balloon.interrupt().attr('cy', 35).attr('cx', pickRandom(position));
  balloon.transition().attr('cy', 165).duration(2000).ease(d3.easeQuadIn).remove();
});