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

15:40:34 Hi! Everybody! Welcome back in this video, we can continue to learn about Plotley by learning how we can customize the hover effects on our plot, lead charts.
15:40:43 So let's go ahead and get started. So the first thing we're gonna learn about the various types of settings that we can change in aesthetic, options.
15:40:52 We can change in our hovering is the hover mode.
15:40:56 So let's first go ahead and make this plots of our on the our go to plot or go to line chart of the apple.
15:41:03 And Microsoft stock from 2018 to 2019. So one thing we can see here is where we learning about with hover mode is, how is the hover displayed in our plot?
15:41:15 Lee chart. So currently the mode is hover. Mode equals closest.
15:41:20 This is the default, and so, when you have the default, hover, mode equals closest, enabled, you're point your cursor is going to go over whatever your graph object is, and then it's going to hover over the closest data, object, and then give you the information related to that
15:41:37 Data, object that is enabled by the hovering.
15:41:40 So in our example here because our cursor is currently over this position on the Microsoft stock data, what we see is the information presented by the chart which is which variable.
15:41:50 It is our date value as well as our value of the closing price as a multiple of the initial data.
15:41:59 So this is closest. Another option you can do is setting hover mode to be x or hover mode to be y.
15:42:08 So when you do this, you, after your vertical variable, you go ahead actually sorry we want to do it with update layout.
15:42:14 Sorry about that after we've made our initial line trace gliff.
15:42:21 I can't remember anymore. After we've added our initial lines to this.
15:42:24 When you call fig dot upate layout inside of update layout, you're going to put hover mode is equal to X or hover mode is equal to y.
15:42:33 So here's an example where hover mode is equal to X.
15:42:36 And what happens when you do this? Now your hover is updated as you move your cursor along horizontally, and then, whatever value you're on horizontally, it's going to highlight the appropriate values for whatever plot type, you're seeing so for us for the line plot
15:42:58 the horizontal values are the days. So we're going to see the various closing price information on whatever day we're hovering over alternatively, we could see what would happen if we set the hover mode equal to Y and the same behavior except instead of the horizontal axis now it's
15:43:15 the vertical axis. So here you can imagine what's going on is that our plot is having a horizontal line drawn across it, and then, wherever the plot elements, the graph elements that are cut through by that horizontal line have their hover boxes illustrated it doesn't make as
15:43:35 much sense for this particular chart. So for me, I would say, if we wanted to do something like this, I would specify hover mode as equal to X, because it makes more sense to wanna see compare the stock prices on different days as opposed to wanting to compare the days for different stock
15:43:55 values. So another example, so is the X unified.
15:44:00 So what happened here was, you can see for each graph element.
15:44:03 I had a unique, a unique hover box, but you can make it so that by graph elements have their information contained within a single hover box.
15:44:14 By setting the unified option. So we'll have hover mode equals X.
15:44:18 Space, Utility.
15:44:21 And now you can see 2 differences, the first difference being that all of our information is now came, contained within a single hover box, and then, on top of that there's this nice edition of the vertical dotted line which gives us a better sense of where we are along the
15:44:39 horizontal axis, and then you could get a similar behavior if you did.
15:44:43 Why unified, now it's a vert horizontal line.
15:44:47 And again, the thing that's we're seeing the value of here is the closing price.
15:44:52 And then we're shown what days each of these, what days each of these stocks reach that closing price.
15:44:59 Which isn't as useful. So once again, I'm gonna go back to X unified.
15:45:05 So that was sort of our different hover modes. So we've got closest.
15:45:09 X or y, and then x unif, or y unified.
15:45:14 Another thing we might want to change is the hover label appearance.
15:45:18 So here the appearance was the default's going to be black.
15:45:20 Text with a white box. Here the default is whatever background color is the color of the element, and then the text is black or white, depending on the color of the background.
15:45:33 So what if you wanted to be able to set all of these things on your own?
15:45:36 Well, you can do that with the hover label argument.
15:45:40 So you input hover label into update layout and then within hover label, you're going to feed in a dictionary of a set of options.
15:45:48 So these options include things like the background color, which is bg, color.
15:45:53 The border color, which is border color. The font which is font, font size with font underscore size fonts, family with font, underscore family, and more that you can find at this documentation link so here we're gonna go ahead and change our hover
15:46:11 Label. So again I here I've set it to X, not X unified, but x so I'm gonna set the background color.
15:46:17 So, bg color as a key, followed by, and here I'm saying I want it to be white.
15:46:23 And now I want to set the font to be size 16.
15:46:28 So font size as a key font underscore size, and then I'll put a 16, and I want the font to be black.
15:46:36 So I'm going to put
15:46:39 Font
15:46:41 And then color
15:46:45 Black, and then finally, I'm going to want the border, I'm saying I want it to be gray.
15:46:52 So I put border color
15:46:57 As great. And then let's see if this works. Okay.
15:47:01 So here we can see what did everything I specified here.
15:47:05 Came true. So my font size was increased, my font color was set to be black.
15:47:11 My border color was set to be gray, which is a little bit difficult to see.
15:47:15 But maybe if we zoom in, you can see the difference.
15:47:17 Maybe to make it more clear, we could change it to be a cyan that's a little easier to see.
15:47:25 But let's go back to Gray just to make sure I'm consistent with my comments.
15:47:30 So that's how you can change the appearance of your hover box.
15:47:33 Notice that again we have the 2 hover boxes instead of the single one. Why is that?
15:47:37 Because we set it the hover mode to be X.
15:47:40 Not X. Unified.
15:47:43 Okay, so hover text, we can also change the text that's displayed within our hover box.
15:47:51 So the first thing we can do is, as you notice here, we don't have like a unified name on the top of the hover box, so we can give a a name to our hover box with the hover name argument, and so we can do that we're gonna use the auto Mpg example.
15:48:07 So remember, here's that data set. Each row is an automobile with various stats on that automobile.
15:48:14 And so for us, remember, we're gonna plot. Let's go ahead and show you what the plot is.
15:48:19 We're gonna plot our miles per gallon against our weight, and when we hover over it's going to show us those values for various automobiles.
15:48:28 So a natural question might be, well, what car or what auto mobile is that so for our hovered name, we're gonna set it to be equal to the name column.
15:48:36 And now, when we run that when we hover over one, we can see at the very top the name of the automobile shows up at the top of the hover box.
15:48:46 So that's the name of the hover box. So another thing we can do if we wanted to, we can get even more specific and include additional data.
15:48:57 So currently in this version of the plot we see the weights in the Npg.
15:49:02 Which is maybe helpful to get the specific numbers as opposed to just trying to eyeball it from the chart.
15:49:07 But we can include information sort of a real power of a hover box or a hover effect is to provide information to the audio that is not already conveyed just by the chart.
15:49:17 Meaning the axes and the the placement of the graph objects.
15:49:22 So you can add additional data to the Huver rocks with the hover data argument.
15:49:28 And I'm going to input a column name. So hover data takes in a list as one example of an argument.
15:49:35 And then within that list you can add additional columns that you'd like to be plotted.
15:49:39 So, for instance, I'm going to put the Cyl, which stands for the number of cylinders in my hover data list.
15:49:45 And now, when I hover in addition to the weight and the Npg, I also get the number of cylinders
15:49:52 In addition to using a list, you can get even more specific, and for every single column within your data, frame, you can specify whether or not or whether you want it to be present in the hover box.
15:50:08 And so to do this, you provide a dictionary which I'm now highlighting, and then the keys of the dictionary are the names of the columns you'd like to specify, and and then, after each call if you want it to appear in the hover box you place, to true.
15:50:21 And if you don't want it to appear in the hover box, you place of false.
15:50:25 So here I go ahead and say, in addition to making the name, name, I'm going to display the Eur of the automobile, the miles per gallon and the weight
15:50:35 Okay. So now, when I plot that here you can see I go from weight Mpg, in year, and I have that name up at the top.
15:50:43 An additional thing we can change is maybe so. All of these automobiles were built in 1,009 hundred's in the in addition, like, there's some things about this that maybe I don't like the aesthetics of the text itself.
15:50:58 So, maybe, like, what are the units on the weight? What are the units on Mpg, maybe I'd like to change the display so it's instead of using the variable names it uses.
15:51:08 The nicer name. That is more readable to people, so we can specify all of that with, by specifying a hover, template so why don't we go ahead and show you the hover template?
15:51:19 Well, the hover template is contained within fig data, so you can see here, however, template.
15:51:25 And then I can get that even further by doing fig dot data that hover, template
15:51:36 Sorry data at 0,
15:51:40 And so this hover template here looks pretty weird.
15:51:44 So what's going on here after? If you were to come back to this later, after our next section of the mini-course, you'll recognize that this is H.
15:51:54 Tml code. And so, in order to change the HTML code to change the template, we have to write our own custom.
15:52:02 HTML code. So why don't we go ahead and parse what's going on here?
15:52:06 So at first we're given this part, which specifies the name, the Wait, which is specified.
15:52:15 So the percent with the brackets specifies that the what should be displayed after weight equals is the horizontal value.
15:52:25 Then we have the Mpg equals percent brackets.
15:52:29 Why, that specifies that after Npg equals we should subm display the vertical value.
15:52:35 And then we have year y, R equals percent custom data of 0 within brackets.
15:52:41 And so what this is saying is after year equals. Go ahead and display the value contained in custom data at 0.
15:52:49 So custom data is specified by this hover data, dictionary.
15:52:54 And because year was the 0 entry of our data of our keys.
15:52:59 The first key. It's in the 0 entry, and maybe we can also check to make sure I'm being correct.
15:53:07 Let's look at the head of the data frame. Yes, so like year is not the 0 column of the data frame, but it is the zeroth key that I used using python indexing.
15:53:18 So we can go ahead and change that if we wanted to look more to to look nicer.
15:53:24 So, for instance, instead of weight equals, I'm gonna change it to be.
15:53:29 Wait pounds, equals instead of Mpg equals. I'm going to be fuel.
15:53:34 Economy, Mpg. And then, instead of why, R. Equals, I'm going to choose.
15:53:41 Year equals 19 to specs that way. It's clear that these were automobile man.
15:53:45 Ufactured in the 19 hundreds. So by changing the hover template, providing this string when I hover.
15:53:54 Now the box looks a little bit nicer, and if you wanted to, you could even go ahead and include spaces.
15:54:01 So maybe you're someone who likes to have a space between the equal signs.
15:54:06 And now, after doing this, we can see now the equals are not directly touching the the numbers or the labels.
15:54:15 So this is HTML code, and you'll learn a little bit more about that.
15:54:19 In the next section of the Mini course. So there are additional ways to change the aesthetic options of the hover box, and if you're interested in learning more, I encourage you to check out this documentation link but for now we're going to move on.
15:54:34 So we've learned how to change the hover effect in terms of like this.
15:54:40 The mode, so is it closest, or x, or x unified.
15:54:44 We also learned how to change the aesthetics of the box itself with hover, template, or with hover.
15:54:49 What was it? It can't think of the name.
15:54:52 Hover, label, and then we saw how to change what variables are included with things like hover templates and hover data.
15:55:01 So we now know a lot about styling the hovering of our plots in the next notebook.
15:55:06 We're going to learn how to change some of the appearances of the non graphical elements.
15:55:14 So things like axes and background color and grid lines, etc.
15:55:18 I hope you enjoyed watching this video. I enjoyed having you here to watch this video.