Join Ray Villalobos for an in-depth discussion in this video Using transitions and animations, part of Data Visualization with D3.js.
In D3 you can create animations through something called the transition method. And they're pretty awesome, so let's go ahead and dig into how they work. Now in the simplest form, a transition is a way of animating a selection. So you have these different methods that you can use in order to control it. So let's go ahead and add one. It'll make more sense when I do so. If you want to, you can move over to this mouse over section in our graphic. And then right after we select the element, then we can add just a transition method here.
And if I save it, you'll see that now when I roll over, it takes it a little bit longer to activate, or to change the color to that yellow. Now if I wanted to animate it as it leaves the mouse, I just do the same thing. Repeat my transition here and now you can see that it takes a little bit of time to get into the transition and then a little bit of time to get out. Now there's a problem sometimes because I can go so fast that I don't actually trigger a mouse out or a mouse over then. You can also control how long the transition takes place by specifying a duration.
I can say duration here and then something like 800. By default, transitions will last 250 milliseconds. So if I save this, the transition would take a little bit longer to move out. And if I want to, I can also do a delay. So a delay would just do a transition after a specific time period. So you can say something like delay 500, and that's going to change how the transition works. So as I leave, notice that it takes a while for it to actually go away.
So those are the basic methods that you use. Let's go ahead and take these out of here, because they look a little. I'm going to leave just the default transition and I think it works well enough. And sometimes it may leave a little ghost. Let's just go ahead and take those out. Take these two out of here. Now you may think that you could do a transition on the whole graph, by just adding a transition say right after you append the rectangles. And let's check that out. We'll put transition right here. And save this and that sort of works.
It's really fast, so let's go ahead and add a duration and we'll set a time of 800. And you see that what happens is it starts drawing the elements and then it's actually fading the color to what they need to be. It might look okay if, maybe, we set the color to the color of the background first. And then we fade in but that's probably not what you were thinking about doing. So let me go ahead and make this some what smaller over here, and just show you a different way that we can do this. So let me take out this transition and duration from here.
And what I want to do is actually create a transition by modifying our graph to be inside a variable and then applying the transition to that variable. So I will take this D3 select statement and convert it into a variable, or, rather, place it in a variable. So this is going to be something called myChart, and then I'm going to set it to the rest of my drawing methods there. And if I save, you'll see that it works exactly the same as before.
And now that means that I can take and set my transitions up on a separate place. So I can say myChart.transition and what I want to transition is essentially right now the height as well as the y position of each of the elements. Let's go ahead and do that. We'll do and attribute. So here's where I do the height, and here's where I do the y position, right over here. Here they are together.
And what I want to do is actually just take these two out of here, and then set them up so that the height starts off at 0. And the y position is going to be set up to just be my height. And let's go ahead and save that. You'll see that the charts not going to show up for right now, but need to delete this thing here. So we set the height to zero and then the y to the height of the element. Let's go ahead and see this. You're not going to see anything up here.
So we'll take the transition now, and what we'll do is we'll sort of add these two functions that we had before that apply the proper height and the y position of the transition. And now you can see that they animate. As I refresh the page, they sort of animate into position. And that's already looking pretty good. But perhaps you wanted to happen kind of on a line by line basis. And to do that, what we're going to do is set the delay function to be a function itself.
So over here, we will set a delay and instead of applying a delay. Well let's go ahead and try to see what happens if I say delay 20 here. So it's just taken a little longer than it would, so 800. It waits a little bit until it gets applied. But the delay can also be a function. So that's what I'm going to do. I'm going to set the delay and use the index. And then in here just return the index times some sort of time that I want it to wait.
I don't this to be too much. Or it will take forever to draw the scales. So I'm going to say just 20 and If I save it, you'll see that these are coming in with a pretty cool animation. So, let's reload that again. That's pretty awesome. Like I said, you don't want to set this up too high because it's gotta apply to every single one of these bars. And if you had a ton of bars that would be really bad. So, you know, you could set it up really fast or you could set it up to something that, like, 10.
That looks pretty good right there, so I'll leave it at 10. Now, you can also change the way that the animation happens for each one of these bars. So if we look at the documentation, you can see there's actually different ways of doing something called easing. As you can see, there's different types of easing that you can do, and the one that I want to use right now is this one called elastic. So, if I come down here, down over here, I can add something called ease, and then set it to elastic, and that needs to be in quotes.
And if I save this, you can see that they have a little bit of a bounce. Let me set this back up to 20. You can kind of see it. It's sort of a cool little easing effect that causes the graph dots to have a little bit of a bounce. The last thing I want to do is set a duration here of a second. And that's going to actually slow down the drawing of each one of these to be one second. So as I load these as they're getting drawn, they're taking a little longer than 250 milliseconds, which is the default.
So that's actually looking pretty good. Including transition adds a whole new level of fun and makes your charts come to life. So it's already making our animation look pretty cool
- What is D3.js?
- Creating a basic document structure
- Controlling HTML DOM elements
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data
- Creating and adjusting layouts