d3.js Transitions Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

12:04:37 Hi! Everybody! Welcome back in this video, we learn about transitions.
12:04:41 And d 3 dot J. S. So a transition allows you to alter existing elements so you could change attributes like the color or the stroke color, the fill color, the I don't know if you can change font size, but probably font size the x and y positions or the
12:05:01 radius, all sorts of things can be changed, using in transition.
12:05:06 So the way a transition works is you're going to select the desired elements.
12:05:11 Then you'll do dot transition, and then change whatever attributes you'd like.
12:05:16 So, for example, we could do something like d 3 dot select circle, or if you had a particular circle in mind, or something like that dot transition dot attribute, fill red, will change the fill of the circles to red if they were not already red so you can control a bunch of different things about the transition so you
12:05:36 can control. How long the transition takes with a duration following the transition, so transition or duration takes in a time, as milliseconds.
12:05:49 So, for instance, you could make it so. Your trition lasts an entire second by providing 1,000 ms, is the argument you can delay how long your transition takes to happen again.
12:06:02 The argument here is in milliseconds. So here's an example where I delete the transition by 1 s.
12:06:08 You can also control the way in which the transition occurs, and meaning like, does it happen really fast?
12:06:16 Does it happen really slowly, at a steady rate? Does it happen at a slow rate?
12:06:20 But then that rate increases over time, so this can be done with the ease command.
12:06:25 So ease takes in an easing function which, for example, you could ease linear, which will just be one steady rate the entire time, or you can ease bounce, so it will be like bouncy.
12:06:37 So kind of going back and forth. So, as some examples here at the documentation, you can kind of imagine like, this is one of those examples of it starts off slowly, but then speeds up starts off fast.
12:06:51 But slows down. Another. More examples of this here is just going down to the bounce. One.
12:07:04 So here are some examples of elastic, so sort of like snapping, or rather rubber band, where it goes all the way.
12:07:11 Then comes back, or it goes a little bit too far, actually, then comes back like this.
12:07:16 So these are more for ones where the transition, the transition, is a positional one. So here's an example of the bounce where you move a little bit and then a lot, and we'll see some of these in the code.
12:07:34 Okay, so let's go ahead and talk about some ways that transitions are used before we see an example.
12:07:42 So they can be used to set an animation effect that runs in either a loop or at the beginning of the Graphic.
12:07:47 When the graphics initiated, you could also use it in to make more complicated interactions which will learn a little bit more about in the next notebook but you could make it so if your audience does something, then the bottom changes accordingly.
12:08:01 So maybe you're trying to make a dashboard where a person is able to select what the subsets of the data they're looking at.
12:08:10 We'll see an example like that in a later video or lecture.
12:08:14 So these are really useful, and they're kind of fun.
12:08:17 So on that note. Let's go ahead and look at.
12:08:22 The transition in code.
12:08:28 So here it's just gonna be that same scatter plot we've looked at in the same few the past few lectures.
12:08:35 But now at the bottom I'm going to start a transition, so as soon as the page loads, this transition will start, it's going to take all of our circles, and here's a nice part in addition to just doing a regular transition, you can also add some data to the transition, and
12:08:53 instead of enter you would put dot transition. So here I'm setting the transition.
12:08:59 Once it starts to last 3 whole seconds. I'm gonna tell it to to 3 whole seconds. I'm gonna tell it to wait 1 s before it starts.
12:09:06 I wanted to have a bounce ease, and what's going to happen is that the fill of the circles are going to turn to red, and the position of the X.
12:09:14 The Exposition will move 100 units to the right.
12:09:16 So let's go ahead and see this in action. So once I click the code, the transcription will wait a second and then start, okay.
12:09:26 And so now you can kinda see, you know, the bounce effect.
12:09:30 So it goes, goes back a little, and then we could do what was the one of the other ones we had?
12:09:40 We had the bounce, but maybe it's fun to see one of these guys.
12:09:44 So!
12:09:46 What is it elastic in? So ease? The last thing?
12:09:51 Let's try that. Actually, I think I might like elastic better.
12:09:53 So ease, elastic. So we'll do ease.
12:09:58 Elastic.
12:10:04 And so now we see what that one looks like. Okay, all right.
12:10:10 So that is how transitions work. Now, you know, and what's really nice about these, beyond just making these fun animations, is, it's gonna allow us to make a lot more interactive graphics with user input so that's what we're gonna talk more about in the next lecture.
12:10:31 So I hope to see you there, and I hope you had a great time in this video.