Basic Transitions with D3

[00:00] Now that we've added some basic interaction to the chart, let's take a look at adding some animated transitions. The first thing we'll do is click a button that will actually trigger our transition. Then we'll just have that button call a function called update.

[00:13] What that function is going to do is simply loop over our dataset with the underscore or low dash each method. As we get each object, we'll just update the x, y, and r properties with the same code that we do to initially create it, which is just assigning a random number somewhere between 0and 100 for the x and y, and then somewhere between 5 and 15 for the radius.

[00:36] Now that we have this function in place, we can go over here and test it. We can see that we can click the button, and it is actually calling this function, but the chart isn't updating it. That's because we're updating the properties of our data objects, but we're not actually telling the chart itself to re-render.

[00:56] To get the chart to actually re-render, we need to get a reference to all of our circles and have them actually update their properties, so the cx, cy, and r attributes. If you'll notice, this is the same exact code that we're using when we initially create the chart. We're just going to rerun it in response to our button click here.

[01:18] If we now go over and click our update button, you'll see that we do get our chart to update, but they're just sort of snapping into their new places and appearing in their new positions. We want to add some nice, smooth animated transitions.

[01:32] The way we do that is using another one of D3's awesomely simple methods, which is just called transition. Then we're going to give it a duration of 500 milliseconds, so half a second. When we click our button, we get a nice smooth animation.

[01:49] You can see that that transition applies to all three of those attribute assignments that happened after it, so the x, the y, and the r property are all updated based on that.

[02:04] Another sort of basic thing that D3 lets you control with your transitions is you can apply a delay. In this case, we'll add a 250 millisecond delay. When we click our button, we get a short little delay before the transition actually plays.

[02:23] A blanket delay probably isn't terribly useful. But we can, again, replace this static value with a function that's going to be past a datum and that datum's index in our dataset. What we can do here is use that index to sort of create a stagger. We're actually going to multiply the index by 25 milliseconds.

[02:46] You can see our bubbles sort of stagger the beginnings of their animations, creating a slightly more organic effect. D3 also allows you to specify various easing functions that can be used to affect the way that your bubbles or elements animate.

[03:03] If we specify the elastic easing type, you'll see that the bubbles sort of bounce into their new place. There's a pretty long list of different types that you can play with to get exactly the type of movement that you really want.

[03:16] We're now animating our bubbles' position and size smoothly in response to our click. Everything happens all at once, but D3 actually makes it very simple to add some more control over your animations and act on pieces independently. What we're actually going to do here is we're going to copy our transition and duration calls, and we're going to move that to each one of our attribute assignments.

[03:47] You'll see that we can then sequence these movements so that when we click our button the elements animate along the x axis and then along the y, and then their radius updates. Each call to transition and duration affects the next or any following attribute assignments. But once we call transition again, that's going to create a second sequence to transition.

[04:12] Interpolating things like x position, and y position, and radius are fairly simple to do. It's not surprising that D3 can do that for us. But it can also do some other things. One thing that we're going to look at here is actually animating a color change. Rather than changing an attribute on the SVG tag, we're actually going to change a style property, in this case fill.

[04:37] We'll just tell it to change it to purple here, as part of the last step. We get our x and y animations. Along with our radius change, we'll get that color change as well, since we're attaching to that final step in our animation sequence.

[04:53] If we then copy this style change and add a new one to each of our first two steps, we can then have these transition to other colors. Then we'll get a different color as each part of our animation plays. Now, if we save this and let it play, we'll see that as we change x axis, y axis, and radius, we get a color change with each step along the way.