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

12:13:08 Hi! Everybody! Welcome back in this video, we continue to learn about how we can make our D 3 Js plots interactive with D, 3 dot Js Updates, so upates happen when you include an on function and the chain when you're appending an Svg, element, so this will run a function when a
12:13:29 user interacts with an elements in a certain way. So what does that mean?
12:13:34 So. For instance, if the user hovers over it, mouse is over something and then leaves it.
12:13:38 Those are 2 instances of an interaction. If a user clicks on something, or if the user changes something, these are both instances of interaction.
12:13:49 So these can be used. These updates, these ons are used to update the graph and a number of ways given user input so one of the first ones we'll see is mouse over.
12:13:59 So think of this as hovering so once the user moves their mouse over the elements, the function will run.
12:14:07 So whatever the function is, will run so you can either do a lot. What a lot of people will do is they'll write functions at the bottom of their Javascript code and then provide the name of the function here or you can just write the function out so in the examples that will look at we write the function
12:14:20 out here!
12:14:23 Once you mount like, move the cursor off of that.
12:14:27 Whatever element it is, so say it's a circle.
12:14:30 Once you move the cursor off of the circle, you will then run this function whenever you mouse out.
12:14:36 So this is often paired with the mouse over to make sure that the plot goes back to whatever the original configuration of the plot was.
12:14:46 After someone has moved. So maybe when you hover over something you want to change the thing, you're hovering over to make it easier to see or to display some data, and then once you leave that, you want everything to go back to the way it was the last one we'll see in this in these examples.
12:15:02 are click. So this is provide runs a function that you provide when the element is clicked by the user.
12:15:10 So let's go ahead and let's see.
12:15:14 Yeah, so let's talk about this before going to the code.
12:15:18 So one thing that happens is when you, these things are run.
12:15:22 D 3 dot Js will have the selected or the interacted with element in mind.
12:15:29 And so when you write your functions, it will be useful. So one thing that you might want to do is have this element, and maybe this element has something in it like the X or the wide position that you're interested in displaying then you can select that particular element, that's being interacted with by D
12:15:47 3. Select this. So this is a Javascript keyword that we've refers to the selected elements.
12:15:54 Selecting this allows you to update those attributes with or without a transition.
12:16:01 So typically I will. I'll do it without a transition.
12:16:04 But you can also write functions with transitions if you want them to look a nice way of a clicked or mouseed-over element.
12:16:11 So this is often used in the function portion of an on statement.
12:16:16 So with that being said, I think it would make sense to look at the code and see what we're talking about.
12:16:22 So once again, we're dealing with this scatter point data that we've been dealing with the past few videos.
12:16:28 And I'm just gonna scroll down to the part with the on.
12:16:31 So here are 3 online functions, 3 updates. The first will run whenever you hover over a point. And so what's it going to do?
12:16:43 Your function is going to select the element that's being med over.
12:16:47 Change, the fil of the elements as well as the R. So this is, you might be wondering.
12:16:53 Well, why wouldn't we just use the hover effect so the simple hover effect that we learned in an earlier lecture does not allow you to change the size of your circle.
12:17:01 But this does so, this will not only change the colour, but it will also enlarge the circle to make it abundantly clear which the circle to make it abundantly clear which one the users hovering over, then once we are done with that the like let's say your user mouse is
12:17:17 off we have the mouse out update. So this will take whatever the object is that was previously mouseed over, and then change it back to its original color and radius.
12:17:28 Finally, when we have a click, what's gonna happen is we select the element that has been clicked.
12:17:35 And just as a simple, update, we're going to make the stroke width size 10, which is much larger.
12:17:43 And then we have a delayed transition that will return it to its original stroke with after 6 s okay, so let's open up the code and look at it.
12:17:53 Okay, so, first, we'll do our mouse over. And now you can see that the radius is larger.
12:17:59 And this is the color. And then, when I mouse, off it goes back.
12:18:02 Mouse out. Mouse over. Okay? And now we can also click on one, and we can see how the stroke with increased.
12:18:14 And then, after 6 s, it goes back to normal. Okay?
12:18:22 So these are some simple updates. This is a really simple example, but I think it's just to really get you in the zone of what can an update do?
12:18:30 And how do I implement them? As I said, if you have a really complicated function of like an elaborate transition, or something like that, what's typical is you would write your function name down here?
12:18:41 So, for instance, I wanted to try this off the dome.
12:18:46 Let's see if it works mouse over. Function.
12:18:55 And then I'm just gonna copy and paste this.
12:19:07 And then, instead of having function there, I will put mouse over function.
12:19:18 Now let's see if this works.
12:19:23 So I'm not sure if I need to have it with the parentheses or not.
12:19:26 So let's try it without the parentheses.
12:19:28 First, okay, Yup, so we can see that by doing it that way, the mouse over function gets called on mouse over. Okay.
12:19:35 So this is if you have a really complicated one, you'll do something like this, and then just call the function up above.
12:19:42 But with these less complicated ones I find it's just quicker for me to write it here.
12:19:48 So let's go back to what it was.
12:19:54 And once we're done making the adjustments to go back to what it was will be done with this video.
12:20:01 Okay. So now you know how to make updates to your D 3 appended elements, or really any elements that D 3 can act upon, you can make an update with.
12:20:14 So now you know how to do that. The simple ones a mouse over, mouse out and click. There are other ones.
12:20:20 You might be interested in. So if there's like an interaction that you might be interested in doing with your d.
12:20:25 3 Js. Figures just do a web search and somebody out there probably has the relevant code that you need.