Animation Challenge

Your challenge this week is to implement several different kinds of animations. In all cases, you should refer to the documentation on d3-transition. In particular, you should examine how to chain .transition() calls, and how you might make .duration and .delay dependent on a function instead of a set parameter (so that you can use (d, i) => {stuff} ).

You must make 3 different kinds of animations. For each one we have provided a set of <script> tags and associated chart. You only need to edit the code within the function triggered by the Animate button. You can decide the particular duration of your animations, but be sure to choose values so that the grader can see what is happening in a timely manner.

Your first animation should animate everything at once. Points should move and change color all at the same time.

Your second animation should step through the visual channels. Points should first move on the x axis, then move on the y axis, and finally change color. Each of those stages must trigger step-by-step.

Your third animation should animate each point one-by-one. One point will animate (x, y, and color at the same time), another point will animate, and so on. The animations can overlap a bit, but it should be obvious that points are moving one after another.

Submit your answer to CMS in the form of a .zip file containing your own version of this page's HTML. Submissions will be graded for completeness in meeting the 3 criteria rather than quality. You must meet all criteria in order to receive credit. You must turn in your final version before 11:59PM on Monday, May 4 in order to receive credit.

Chart 1 - Animate everything at once:

Chart 2 - Animate channels by step (x, y, color):

Chart 3 - Step through each point and animate: