bokeh Adding Some Interactivity Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

16:52:06 Hi! Everybody! Welcome back in this video. We're gonna see how to make our plots a little bit less.
16:52:11 Static by adding in some slight interactivity with Boca plots.
16:52:18 So in this video we'll learn a little bit about a little bit of interactivity like hovering and clicks and talk a little bit about tool tips.
16:52:26 So one of the first ways we can add interactivity to our Boca plots is by adding hover effects.
16:52:32 So these are effects that will do something when we hover over a particular glyph.
16:52:39 So we're gonna do an example where we see how we can change the glyphs appearance.
16:52:43 1, one, we're hovering. So in order to do this, we need to add a hover tool to the plot so the first thing we'll need to do is import Hubble Hover tool documentation link here from Boca models tool so tools.
16:52:58 The tools. Module of the models, module of Boca have a variety of different tools for interactivity, so check it out on your own time.
16:53:07 If you'd like. So what we can do to add interactivity to our plots is by through hovering is to add arguments like hover under score, fill color, hover, hover, underscore line color hover underscore line width.
16:53:25 So if I do hover underscore, fill color, and set that equal to yellow.
16:53:32 Hover, underscore line underscore caller, equal to green and then hover.
16:53:41 Underscore line underscore width equal to 5
16:53:50 This will go ahead, and when I hover over these circles it's going to change.
16:53:56 Them to be yellow green, and have a much wider edge.
16:54:00 So, if one difference between what we've been doing before on Boca and what we're doing now is that we also have to store this glyph.
16:54:08 If we want to add it to a hover tool, we have to store it in a variable.
16:54:12 C, okay, and now we're going to go ahead and add the hover tool.
16:54:17 So you call P. Dot, add underscore tools, and you type in the word.
16:54:23 Well the command or class, hover tool. Okay? And then we're gonna go ahead and add our parentheses here.
16:54:32 The first thing we need to do is I'm going to set something called tool tip equal to none.
16:54:37 So I'm gonna do this, it'll become apparent later in this notebook.
16:54:41 But if we don't set it equal to none, it's going to give us some sort of weird tool tip, and we'll see like what that means.
16:54:48 Once, we actually talk about 2 tips in a little bit.
16:54:51 The next thing we have to do is set our renderers.
16:54:54 So these are the things that actually have the hovering effects.
16:54:58 Added to them. We have to set our renderers equal to a list, so it's possible to have more than one.
16:55:03 Item, we'll see that as well in a little bit.
16:55:06 So this list is gonna have all the glyphs that you would like to have hover interactivity.
16:55:10 So for us. It's just the C. And what did we do wrong?
16:55:21 Sorry it's not tool tip. It's tool tips. There we go.
16:55:25 So now, why don't we go ahead and show this off here?
16:55:28 You can see I'm hovering over a circle, and it went from blue with a thin black outline to yellow with a wide green outline, and once I take my mouse off that hovering effect goes away, and this works on all 4 of the circles we've plotted
16:55:45 So, for hovering to work the things that we can change are the fill color, the line color, and the line width.
16:55:53 These are some of the things we can change. So all you have to do to change these from the typical one, like the typical fill color, is to put the word hover with an underscore in front of the argument.
16:56:04 Note that not every attribute can easily be changed this way.
16:56:08 For example, the size of the circles cannot be cheaper with a hovering effect so we'll see.
16:56:15 Maybe I don't know that there's a way to easily change them with just like cover size, or hover radius but in the next notebook we'll see a way that you could change them with a little bit more work and some Javascript.
16:56:28 So this might not be worth your while until after you learn a little bit of Javascript.
16:56:33 If you're if you're unfamiliar with Javascript.
16:56:37 So finally what we have to do. I also mentioned. We have to use add tools.
16:56:41 So I think I covered everything I'm saying in this little paragraph here.
16:56:43 So it's possible to give 2 different types of glyphs 2 different types of hovering impacts.
16:56:51 So this first one is the circles that we saw before the turn yellow and green, and have a wider edge.
16:56:57 The next one we'll see. I'm adding some squares, and then when I hover over the squares, the fill color will be red, the edge color will be pink, and then the size of the edge will also be increased to 5 so now the difference is when I want to have multiple
16:57:14 Glyphs added to my hover tool. I just put them into the list.
16:57:17 So the first is C, which was what I stored my circle glyphs in, and the next thing is sq.
16:57:24 Which is what I stored the square glyph in.
16:57:27 So now you can see when I hover over my circle they turn into yellow on the inside, wider green on the edge.
16:57:35 When I hover over my square it's red on the inside.
16:57:39 Thick pink outline on the edge. Okay, so these are 2 different hovering effects, and we can see well what would happen if I forgot to include one of them, like, maybe I forget my square.
16:57:49 Well, the squares are still added to the plot, but now you can see when you hover over them.
16:57:54 They're no longer changing in appearance, so make sure whatever glyph you'd like to have a hovering effect you include in the renderers list.
16:58:05 So I mentioned that we would talk about these, this tool tips argument, and why we had to set it equal to none.
16:58:12 So the tool tips, arguments, positives up when it is not set equal to none.
16:58:16 It pops up a little information box about the glyph that you're hovering over so if you're not doing this, if you just don't set it equal to none.
16:58:26 So here, maybe I'll go ahead and get rid of this part, for now
16:58:34 We can see that what pops up is sort of like, not useful for us.
16:58:39 It's sort of telling us stuff that maybe we don't quite understand, and we'll talk about in a second.
16:58:45 So when it's not setting equal to none by default.
16:58:48 It has sort of this weird thing that maybe isn't useful for the data.
16:58:52 But what we can do is customize what shows up on this box.
16:58:55 So, instead of index, one data Xy screen Xy, we can tell it what we want to display by providing a tuple where the first thing is a string of the display name, and then the second thing is what we want displayed so as a silly example I'm gonna put in a
16:59:12 Tuple, where my first thing is the world item, so that will be the display name.
16:59:18 So for instance, here my 3 display names are index data X, y, and screen X, y.
16:59:25 Now for me my display. Name for this will be item, and then what I wanted to display is just the string, too.
16:59:33 So now when I hover the tool, tip will pop up, and it will just say, item 2.
16:59:38 So in order to get useful information, that isn't just a string.
16:59:44 That's the same for every point. We have to use some special characters.
16:59:48 So one way to do the 2 special characters we're going to use are the dollar symbol and the at symbol.
16:59:53 So these go. In the second argument, the thing we would like to display a dollar symbol tells the tells Boka that what we want to display is a special field.
17:00:06 So one example of a special feature are the cursors, current positions, using a its own tuple of dollar sign x dollar sign y.
17:00:17 So here is an example where we use that. So I specify that I want my label to be Xy, and then I specify that I want to display the Xy position of the cursor.
17:00:27 And so when I hover over the circle, we can see that it shows us the Xy position of the cursor in terms of the data space.
17:00:36 So 4.0 whatever comma 0 point 907. Okay?
17:00:41 So this isn't as useful as we might want it to be, because perhaps we'd rather know.
17:00:46 Want to know what the Xy position, the plot is, instead of the Xy position of the cursor.
17:00:54 So that's where the second symbol comes in the at special symbol will specify that we want to use a value of some column from our data source.
17:01:04 So, for instance, here, if we change this from dollar signs to at, we can see that the 4.5 doesn't change regardless of where I am on the point, whereas because the Y still has the dollar symbol on it, that does change okay, so to see another example, let's go back to our
17:01:24 Auto, npg, data set to remind you what this is.
17:01:27 Here's the first row, so I can go ahead and make a plot of the weight.
17:01:31 By the the miles per gallon by the weight, and then I'm going to go ahead and when I hover over something I'm going to display the name as the make and model of the car.
17:01:41 So I call at, and then the column name I want used is the name, and so now, when I make this plot and hover over an individual automobile, it will say the name of the automobile.
17:01:53 So this is the Cadillac El Dorado.
17:01:58 In addition to hover tools, you can make things happen when you click on a particular point.
17:02:03 So this you're going to have to add, the tools equals tap argument.
17:02:09 When you create our figure so you can see here in this example, we're gonna show when we create our figure in order to enable selections or clicking, you call the argument tools equals tap.
17:02:21 And then the other things that the things that we can do are provided here so just like with hover, fill color.
17:02:28 And hover, line, color. There are things like selection, color, selection, fill color and sort of.
17:02:34 Now you'll also see that there are things like non selection color, non selection, fill color.
17:02:39 So with clicking, you can make it so that the item that got clicked changes as well as the items that did not get clicked so let's go ahead and provide this example.
17:02:50 Where, when I click on the circle, I'm gonna call select Bill.
17:02:57 Color is equal to pink. And let's just double check that I should be selection, not select.
17:03:02 So selection, fill color, selection, or sorry non selection.
17:03:10 Non selection, Phil. Color. And you might be wondering why I knew it was supposed to be non-section.
17:03:17 I'm just reading the comment I made to myself. 9 selections fill color.
17:03:20 I'm going to make white. And then the non selection, a line, not edge line color is going to be Eco, or a line width is going to be equal to.
17:03:33 Let's say 2.5, and then you can notice that for the squares I made the exact same argument.
17:03:39 So that's why we're not going over that.
17:03:42 Okay, so here is my grid, and we can see what happens when I click on a circle.
17:03:47 That circle has a pink interior, and then the other non selected circles go slightly, see through with an a white interior. Right?
17:04:01 Okay. So you might also now be wondering why I clicked on this circle.
17:04:05 But I didn't click on the squares. Why aren't those impacted?
17:04:08 So that is because the squares were added as their own unique glyph with their own unique selection thing.
17:04:17 And so because we clicked on the circle, that is the selection tool that we enabled.
17:04:23 Now when we click, for instance, maybe a good question is, how do I go back?
17:04:28 If I click the background, the circles will go back or, for instance, if I were to click on the squares, the circles would go back.
17:04:35 But now the square selection would be enabled.
17:04:38 So basically what we're saying is these selections are independent of one another.
17:04:43 When I'm adding glyphs one at a time.
17:04:47 If I wanted both the squares and the circles to be.
17:04:52 If I want to. Both the squares and the circles to be, take this select effect simultaneously, I would have to add them to the plot with the same command, and it addition one once you click on something that is not one of your glyphs that has that effect they will go back to their
17:05:11 Normal appearance.
17:05:14 Alright! So that's gonna be it! For this brief interaction with interactivity.
17:05:21 And Voka. So we saw about how to add hovering effects to our plots as well as how to add clicking effects to our plots, and the next notebook we'll talk about some more advanced interactivity where we can will use some javascript to make our