Cutting Ties explainer


#1

The aim of this puzzle: Remove the line and make the buoy float to the top.
Walkthrough of the solution: All the work you need to do will be inside of the cutLine function definition – the block of code between the curly brackets {}. This cutLine function will run once you tap on the tether (the grey rectangle). First, you want the line to go away, and you can do that by using line.remove(); The other part of the puzzle is to make the buoy float to the top. And because you want it to be animated, this will require a transition. You know to start the command as: buoy.transition() After that, you need to specify what the transition is transitioning to – the surface of the water. A vertical position between 30 and 60 will do just that, so .attr('cy', 50) would work. Remember that the .attr() should come after the .transition() but as part of the same command. How do you make the buoy bounce at the top? By changing its easing: .ease(d3.easeElastic) will make the transition use a springy effect when moving the circle. One last step is to slow down the animation by changing the duration. .duration() sets the number of milliseconds for the transition to complete its animation. For this puzzle, anything over 500ms will work, but a number closer to 4000 probably looks more realistic.
Sample code solution:
(Tap below to reveal)

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

JavaScript Concepts: Code Block (function), Identifiers, Member Expression, Variable Declaration
D3 Concepts: .append(), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,), .attr(‘fill’,), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .remove(), .transition(), .duration(), .ease(), .on(‘click’,)


Issues with "cutting ties"
What's going in
Cutting ties not working
#2

I


#3

Can someone please explain what I’m doing wrong here?


#4

@Grasshopper_Heather please help!


#5

You’re close!

Notice that your .attr('cy', 40) is attached to easeElasticOut instead of the closing parentheses of the .ease().

Correct: .ease(d3.easeElasticOut).attr(...);
Incorrect: .ease(d3.easeElasticOut.attr(...));

–Frankie


#6

Thanks Frankie. I’ve tried, but can’t get it to move. I’ll give it another go.


#7

No worries. I got it.


#9

Screenshot_20180729-104741


#10

Toward the bottom of your code, you have .attr('cy',40) attached to d3.easeElasticOut. The .attr() should be moved out of the parentheses of the .ease().

Here is the explainer for this puzzle in case you want to see the solution code to compare.

–Frankie


#11

Screenshot_20180426-114714

Having some difficulty with this. Not sure where the mistake/error is.


#12

Hey @Amit_Sharma,

You are super close to finishing this! Your error is really small and hard to catch: you’ve putt the .attr() call inside the .ease() call, rather than chaining it after.

Rather than this code:

buoy.transition().duration(4000).ease(d3.easeElasticOut.attr('cy', 40));

Try moving the last .attr() call to after the .ease() call:

buoy.transition().duration(4000).ease(d3.easeElasticOut).attr('cy', 40);

Hope this helps!
H :slight_smile:


#13

Screenshot_20180511-212821_Grasshopper


#14

This seems to be the same issue posted here.

Somehow the cutLine function declaration became a function expression. Normally, the function expression would have parentheses around it, but they’re being hidden by the app in this case. I’m not sure how to create a function expression with the buttons available in the app, so any details about the steps you took to get to this point in the puzzle would be helpful. Did you recreate the function from scratch, or rename it, or use the “reset” button at all?

–Frankie


#15