This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "Animating Transitions" Lesson
[00:00:00]
>> Shirley Wu: So I absolutely love transitions, because it basically emphasizes the changes in state from state A to state B, right? So some examples I had for you, like this one was basically just, this is a really old example from me. This is basically the annual salary, as well as the cost of living.
[00:00:27] So this bar graph is the salary, and then this is the cost of living for BART which is Bay Area Rapid Transit. It's like the subway system in like San Francisco. And the whole thing is like there was like BART strike a few years ago and then this was the visualization around that.
[00:00:52] And so right now, I'm defaulting to Station Agent but if let say for example, I knew transition, so I can play around with, depending on who it is, like how much did they make, and a lot of the transition is super simple. It's just that bar graph going up and down.
[00:01:11] But then there's also that transition of the cost of living going red if the cost of living is below their salary. And then sometimes, it's just fun to go from one of these guys to management, because it just shoots all the way up. So transitions are kind of fun to emphasize when you have a visualization and you want to emphasize something that's a little bit extreme, that's really fun.
[00:01:43] The other thing that I love about transitions is that in here I use it to interpolate. So I did something really silly recently where I got all of Obama's late night talk show interviews, and just put emojis on their faces. And this actually, the technology behind this is actually quite sophisticated.
[00:02:12] Because I took screenshots of every time somebody talked. And then I ran through google vision API to see what their emotions were like and that gave me dimensions of their faces. This has nothing to do with D3. I'm just telling you because I I have to do this.
[00:02:34] So dimensions of their faces and like how happy they were or how sad they were and the confidence like 0 to 99 or 100% and yeah, this is the kind of stuff I do with D3 [LAUGH] And so the idea is like and I had way too much fun making a cut out of their faces.
[00:02:58] But the idea is that each of these are a interview and these are the talk show hosts and as I scroll down, like I think you guys have seen like this thing called like scrollytelling, right? Like as the data visualization changes as you scroll down.
>> Shirley Wu: And then as I scroll down like the links come down and these are like kind of just like, now this is over time.
[00:03:29] So each of these interviews are played over time and you can just hover and see all of the different talk show hosts. And then as you scroll down, these are all of the YouTube videos. And then these are all of the YouTube videos that had captions, and thus I could get data about every time somebody talked.
[00:03:51] And, this is, these are the videos that you can see, and you can just, So what I found out from this is that Jimmy smiles a lot and Obama just has that, he's unamused all the time.
>> Speaker 2: [LAUGH]
>> Shirley Wu: [LAUGH] Very rarely does Mr Obama have a smiley face on him.
[00:04:28] But the whole point of showing you this is to show you like first of all that whole thing about object consincy, about like you know all of these videos and these like interviews, in going up and down the screen so like. So then hopefully you drives home that like these are the same things that we're talking about from section to section.
[00:04:47] And this is actually using, not d3.transition, but using a part of d3 transition called interpolate, d3 interpolate. And like various other things that all together makes up a d3 transition and I'm using that under the hood to figure out where these things should be moving as you scroll down the screen.
[00:05:11] So this is the kind of things that you could do with d3 transitions. Unfortunately I don't have enough time to go into all the details of how the transition works but I'm also fascinating to kind of looking into it and figure out cuz once you understand how it works, you can do stuff like this.
[00:05:27] All though recently I learned GreenSock for animation, I've learned that that's so much easier for just like Scrollytelling and all of that. If you really want to do this kind of thing GreenSock could also be a way to go, not d3. There's things that you can do with d3 transitions.
[00:05:45] Let's get right into it. Transitions are one of those things that I feel like there is three different ways to do the same exact Motion and like they all work and they all work in almost similar ways. So I would tell you my favourite way and then you guys can go read d3 transmissions like all the docs and figure out all the different ways to do it.
[00:06:08] So the way that I usually do it is I actually just define a d3.transition all the way up top. I usually give it a duration because d3 transition defaults to 250 milliseconds which is a little bit fast, so I give it a duration of 1000 milliseconds, or a second.
[00:06:28] And if you define this up top, and then you use it, and anywhere that you then use it, it syncs the animations across. So the way that I'm using it is I am transitioning the exit selection, the height down to 0, and I'm also transitioning the enter and update selection so that the height goes to the right place.
[00:06:59] And so if I define it up top, it just makes sure that the timer for both of those animations I think start at exactly the same time and they're synced across the board. And whereas I think some of the, don't quote me on this because it's been a while since I've read the docs, but I think for some of the other options, it doesn't get synced and it just starts whenever that piece of code executes.
[00:07:25] So, I like using it this way for that whole syncing. And then what I'm doing is, I set this earlier, so for the exit selection. And the way that you call the transition, is you say .transition, then you pass in the transition you've already defined. So .transition t is what's happening here.
[00:07:46] The t that I defined up here, and then I pass it in here. And then, I just say, I want you to transition all of the bars, height down to 0, which is what's happening here for the exit selection. And then I say, animate the remaining rects on the screen to their next state down here, and that's all you have to do.
[00:08:14] It's super straightforward. I feel like my I feel like my, what's the word, summary for the day is d3 just makes your life easier. That's it. So the thing that I do want to kind of emphasise a little bit is, when we think of transitions it's essentially we're animating from a certain state A.
[00:08:40] And we're animating to a certain state B, right? So if you actually notice, you might be like, hey, when you did this, actually I think I have this in the slide. So, you might be like hey, I noticed you only specified the attributes to transition to and you didn't specify what should be transitioned from, right?
[00:09:09] So, when you call .transition(t) on a selection, everything that comes after it is the state b that you want to transition to. So keep that in mind because there's a reason why. For example, the x and the fill is above the transition for me because those are things that I don't want to transition.
[00:09:29] Those are the things that I don't want to animate the attribute for. Like I don't want the colors so like interplay between the first and the second stay. Maybe you do, but for my purpose, I didn't. Although I do wonder why I didn't want to transition the x.
[00:09:48] I could transition the x attribute, and that makes sense. But notice that the y and the height attributes that I transitioned to,doesn't, yeah, actually, let me pause here and ask if thus far, this makes sense. And a question.
>> Speaker 3: This question was from your previous work on the scrolling telling.
[00:10:17]
>> Shirley Wu: Okay.
>> Speaker 3: On a very high level, how was that architected? Did you have a canvas that was full screen on the back, that was actually performing your animations, and then on the front you had a scroll?
>> Shirley Wu: Yeah.
>> Speaker 3: Okay.
>> Shirley Wu: Yeah. So it's basically starting here, I think I have an SVG in the background.
[00:10:33] And then the text is divs on top of that and then I use react a lot in my work, and so I think i had react kind of keep a state of where we had scrolled to. And I had react be like this is the data that needs to be rendered right now and I used d3 to render.
[00:10:52] So yeah that's what's happening underneath the hood. This might relate to the like state change or state a to be. So cuz I feel like I guess I was interpreting the state you were coming from as the exit attributes up there. Is that wrong or is that not quite how to think about it?
[00:11:16] So the exit attributes, okay, good point.
>> Speaker 4: Well, and also maybe related, why is the exit first?
>> Shirley Wu: No particular reason, I think we're just used to thinking of it that way because I'm just used to thinking of it I don't know how many people I speak for, but I feel like I speak for a lot of people when I say, I'm used to thinking about the order going from one state to the next.
[00:11:45] I first-
>> Speaker 4: Reset the palette?
>> Shirley Wu: I don't reset because I only remove what should be removed, right? So the remaining update selection is still on the screen. So I think of it as I get rid of what's extraneous, and then I add what I need, and then I operate on everything that's remaining on the screen.
[00:12:16] You could do it in any order and it will work exactly the same way. But it logically just the way I think about it is like the step by step, that's how I think about it. But yeah if you reorder this, because the selections are self contained like you're only removing the excess selection, you're only entering the, well actually I think the only thing that you need to make sure is to make the enter selection before you do the enter plus update or else your enter isn't there.
[00:12:41] But, yeah, you can put the exit like below everything and it will work fine. So, in that same sense I think your question was like is this, is the Why in height on the exit selection is that the state a that we're transitioning from. And the answer is no, for two reasons.
[00:13:03] One because this exit selection is not the same as this enter plus update selection. So there are two different things that are animating. So that's why it's not the from state. And second part is actually, because this is after the .transition, these y and height are actually the state b, the two transition.
[00:13:30]
>> Speaker 4: For bars, when you're doing an exit, are you just adding attributes to the transition? So when exit is called, when there's a switch it runs whatever is in there? Is that what that's doing?
>> Shirley Wu: Yeah.
>> Speaker 4: Okay.
>> Shirley Wu: Yeah, yeah. So yeah if I-
>> Speaker 4: So you're just passing in parameters to exit on what to do on transit when it gets called it's not getting called when it's made?
[00:13:53]
>> Shirley Wu: Wait hold on. I think I missed something crucial at the beginning of your question.
>> Speaker 4: So you're doing vars.exit.transition.
>> Shirley Wu: Uh-huh.
>> Speaker 4: And basically what you're doing is passing in this is what I want you to do when you x Is that correct?
>> Shirley Wu: Yeah. So I'm saying right before I exit, I want you to do these things and then remove.
[00:14:17]
>> Speaker 4: Okay. And bar is just the object that can hold x and has all those in it, and d3 knows when to call that when there's a change with the update?
>> Shirley Wu: When the data changes, so actually I'll show the code in a little bit. D3 doesn't know to call to execute all of this when the data changes.
[00:14:41] We have to tell it. To re-execute this data, every time the data changes. Yeah, so usually what I do, If we had done the play with Coe section, then we would have been able to see what actually happens is the starting from the bars, this part is wrapped around in a function.
[00:15:00] I wrap it in a function and call it update or something like that. And then every time the data changes I call update.
>> Speaker 4: Okay, that makes sense.
>> Shirley Wu: Okay.
>> Speaker 4: Yeah.
>> Shirley Wu: Yeah, okay, cool. Thanks for asking that. I didn't even think of that as, yeah. Cool.
[00:15:16] Yeah, so it only gets executed when we call it again. The part that I wanted to get at is when, so the question of where is d3 getting the state A to transition from and the answer is anytime you set it before you call that transition that's how it knows what to transition from.
[00:15:45] And if you don't set anything, if you don't set any attributes, if the attribute is not specified for state A to transition from, d3 kind of just extrapolates that from the default. So for example, the default for height is 0, the default for y is 0, the default is fill is black, etc.
[00:16:05] So d3 is like, this is my default. So this is what I'm going to transition from. So we'll transition from that to what we've specified after the .transition, the state B. And then after that, if you think about it when we are transitioning, you know the update selection, that already exists on the screen, so then like maybe, it already has the y attribute is already 50.
[00:16:29] So that's the transition from and then a translation, it translates Transitions to the new state B. So, most of the time people only specify the transition to and doesn't really specify like that transition from. But sometimes, like you don't want to transition from like you know black to your colors or something like that, right?
[00:16:52] And that's why you can set that your initial like from your initial, like what you want it to like animate from in your enter selection.
>> Shirley Wu: And then here is that code.
>> Shirley Wu: And again I'm using set interval, so make sure to exit out of it after awhile.
[00:17:19] [LAUGH] But yeah, this is the function update bars that I wrap everything around in, and I just call it every time I want my data to change. And so now you can see things are coming in and out. Actually let me also just,
>> Shirley Wu: Transition the x and see what happens.
[00:17:44]
>> Shirley Wu: Cool, yeah.
>> Shirley Wu: Yeah, so this is enter, update, exit and transitions.