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

11:55:13 Hi! Everybody! Welcome back in this video we learn a little bit about interactivity with D, 3 dot js, with some simple hover effects.
11:55:23 So one quick way to change the make, some interactivity is to allow your Svg elements to change color on the hover so the quickest way to do this is to add a hover argument in the style element of your head.
11:55:40 So this will allow you to change the appearance of certain types of elements when you hover over them.
11:55:46 Maybe you'd like to change elements that are only of a certain class when you hover over them, or certain id when you hover over them, so this can. Oh, if you're doing this, for instance, with the scatter chart, you could use this to help your audience identify what point they're
11:56:00 hovering over by providing, maybe some highlight colors.
11:56:05 So let's look at the code here. So simple. Hover, this is in Lecture 27 folder within the web browser, content and when we go to bed visual studio, you'll see right here at the top, we set it so that our circles have their
11:56:21 hover, so circle called, and hover, have their hover sets, that when we hover over them the fill and the stroke colors are set to this same hexagon color, which is a highlighter yellow. So if we go in and look at the simple simple huver
11:56:38 file. We can see that as we hover over them they point turned to a highlight or yellow color, which is maybe a little bit difficult to see.
11:56:48 In this white bike background we could always change it to a different color.
11:56:52 For instance, we could change both of these to red.
11:56:58 And now the hovering is red but I'm gonna go ahead and change it back.
11:57:05 So your files the same as mine as we go through.
11:57:07 Now, before we dive into the next one, I want to take a look at this data.
11:57:12 So this data is the same one. We use in our color map video and they have the color, the X and the Y, but then also this point column, which is going to come up in our next hover effect.
11:57:24 So, in addition to changing the color of your Svg elements, you can append a very simple tool tip by using Svg dot our colon title.
11:57:35 So after you make all of your adjustments to the eleventh itself, so to the circle, you'll do dot append, Svg.
11:57:43 Colon title, and this will allow you to have a nice little tool tip that pops up as you hover over it, and then you can set what the tool tip says by doing dot text, and then, whatever your text is so this has to come after setting all of the other element attributes and then I also believe that we
11:57:59 could change the appearance of the text. I just haven't done it in this example, and we can always play around with the HTML code and see what we can do so let's dive into our code.
11:58:09 So what we're gonna do is we're gonna make it so that the tool tip tells you what point number it is.
11:58:15 Maybe this is a replicating, some sort of signific study where you're interested in knowing each subjects.
11:58:22 Number. So at the very end of appending all the circle stuff and setting the attributes, we append Svg.
11:58:29 Colon title. This will place the tool tip upon hover, and then after that you set the text, and so for us it's going to be the point number, so we can go look at it as it is.
11:58:41 And so for us, it's gonna be the point number. So we can go look at it as it is.
11:58:43 And so here I'm hovering over, and now we can see point number 4 huver zooming in doesn't make it any more apparent apparent.
11:58:48 But here's point number 17 point number 18, and we can keep going.
11:58:54 So why don't we go ahead and try out, though, if we can set things like the font size?
11:58:58 So maybe we want the font size of the tool tip to be a little larger.
11:59:03 So maybe I don't know. 18 pixels.
11:59:14 Okay. So it didn't look like it did anything. Maybe it's because when I try this instead, see if that worked.
11:59:27 Maybe so. It has to be a style. That's why.
11:59:31 Okay. So maybe if this doesn't work, then then we're not able to set the font style.
11:59:43 Yeah, so it looks like, we're unable to set the font style of our tool tips.
11:59:47 But that's okay.
11:59:51 Yeah, so that's okay. So it turns out, there, simple tool tips.
11:59:55 We can't change the style, or if we can, I was doing it the wrong way.
11:59:58 You're always welcome to do a quick web search of how to change the style of a of an Svg.
12:00:04 Title, with d. 3 dot Js, and if you figure it out, then good for you.
12:00:08 Okay, so that's it for this video on adding some simple hover effects.
12:00:13 And the next video will start learning some additional cool things we can do with D, 3 dot, J.