bokeh: Adjusting Non-Graphical Elements Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

16:21:45 Hi! Everybody! Welcome back in this notebook. We're going to continue to learn about planning and Boca by talking about how you can adjust the non graphical elements of your Boko plots.
16:21:56 And so let's go ahead and move over to the Jupiter notebook so we can get started.
16:22:02 So particular. We're gonna learn how to change things like the title.
16:22:06 Your axis labels, your tick marks, your grid lines, your background, etc.
16:22:11 We'll see how you can put text directly on your plot, and then also learn about legends and color bars.
16:22:19 So the first thing we're gonna learn about is the title and access labels.
16:22:24 So we've seen some examples of this in previous plots, just like in previous notebooks.
16:22:28 We'll be using this auto Npg data set.
16:22:31 So again these are different observations of various variables related with automobiles.
16:22:38 So one way to add a title to your figure is to just put a title argument.
16:22:43 When you create your figure object. So here title equals automobile weight lowers fuel economy will add a title.
16:22:50 But one critique you may have of doing this is that the title is left aligned.
16:22:57 Has a pretty small font. Maybe you want to increase the font or change the alignment of the title.
16:23:04 So one way we can do that is, by directly accessing the title, attribute of the figure.
16:23:10 So here's a P dot title, and as we can see, there's the title of our figure that we stored in P earlier.
16:23:18 So there are various things that we can change about this. So, for instance, we can increase the font size of the text by adding P.
16:23:26 Dot title, text, underscore font underscore size, and we can change the alignment from left to maybe center.
16:23:34 If we prefer that with title dot align. So let's do those 2 examples here.
16:23:39 So we're going to call P. Dot title dot text font size.
16:23:47 And then we're gonna set that equal to 16 points.
16:23:51 And we need to put this so for Boco, you need to put it in as a string.
16:23:55 And now for the alignment, we'll do P.
16:23:57 Dot title dot line is equal to center. Okay? So now we have a larger title that's over the center of our plot.
16:24:07 We can also find other things that can be changed about the titles.
16:24:12 Appearance like this by going to the text properties, documentation page.
16:24:19 So, for instance, we've got text font signs, text, fonts, style, etc.
16:24:24 In addition, there are 2, not an edition, but there are 2 changes from what you find in this documentation page.
16:24:31 So instead of text align titles just have an align attribute, and instead of text baseline, which you can find on this page, titles have the office attribute.
16:24:43 So those are 2 changes from regular text in Boca to the title.
16:24:48 The next thing we might wanna do is provide some access labels for our figures.
16:24:54 So, in order to do this, we just have to call X axis label is equal to.
16:25:03 Let's say what was on the horizontal again was the weight.
16:25:08 So wait in pounds, and then for our y-axis label you call y underscore axis underscore label is equal to, let's say, fuel economy.
16:25:24 Mpg
16:25:28 So one thing you'll notice is that by default the access labels are italicized and relatively small.
16:25:34 So we may want to change both the font size and then change it from italics to normal.
16:25:41 That's my preference. So just like with changing features of the title, we can change features of the access labels by adding them directly.
16:25:52 So you can do this with P. Dot, for instance, for the horizontal axis, P.
16:25:56 Dot X axis, and so here we can see this is a linear axis or P.
16:26:00 Dot y access. Okay? And so then when we come to do that, we can do, for instance, the label of the text.
16:26:11 So this is a bit of a mouthful. But in Boca you do p dot X axis label text font style separated with are separated with underscores. And so for to change it from italics to normal, you're just gonna put in the string normal.
16:26:36 The same thing for the y-axis axis underscore label, underscore text, underscore, font, underscore style is equal to normal.
16:26:45 And now, if I want to increase the text, font, size, I'm going to do P.
16:26:49 Dot X axis dot axis, underscore label underscore text underscore front underscore size and why don't we set this to be 14 point?
16:27:00 Remembering again that text font sizes in Boca have to be entered as a string with the number followed by Pt.
16:27:07 So then we're going to do the same thing for the y-axis. So P.
16:27:10 Dot y-axis axis label, underscore text underscore font underscore size is equal to 14 point
16:27:20 Okay. So now, we have slightly larger access labels, and they are not italic, italicized anymore.
16:27:28 So here are the different arguments that I'm currently highlighting in blue.
16:27:33 These are the different arguments that you can change by calling P.
16:27:36 X-axis, or P. Dot y axis. So, for instance, we could change the style of the fonts, the outline of the fonts color, the the font, the color of the font, etc.
16:27:48 So, in addition to giving the axes different labels, we can just straight up, change their appearance the way they look.
16:27:54 So one way to do this is, we can change the range and the length of the axes.
16:28:00 So the range meaning currently in this figure that I'm showing right now the range on the horizontal axis goes from 1,500 to 5,000.
16:28:12 So 51,500 to 5,000. So that is the range of the access.
16:28:19 So we can access that with P dot, X range. Okay? Or we can access, for instance, the vertical access with P access with P.
16:28:28 Dot y range with underscores between y and range, and so we can just this.
16:28:35 Unfortunately, you can't just input a list or a tuple like you could with Matt plot, live or C-born. So you're gonna have to do make what's known as a range on D object.
16:28:46 So in order to do this, we're gonna first import from Boca dot models import range on D, and now that we have range one d@thebottomherewecanseethatwecancallp.x range is equal to range one D, and then the input of this is just going to be whatever we
16:29:08 want, the minimum value to be so we can make it 0.
16:29:11 And then whatever we want, the maximum value to be so, why don't we go ahead and make that 20,000 or yeah, let's do 20,000.
16:29:21 And then the same thing for the Y range. So why don't we go ahead and make that go from 0 all the way up to a 100?
16:29:32 And so now you can see we've altered the range of our 2 axes
16:29:39 So in addition, you can see these lines that are drawn.
16:29:43 So remember in that plot lab we called these the Spines of the Axis we can go ahead and change how long that these lines are drawn from, where to where, by doing P.
16:29:53 Dot X-axis dot bounds. So, for instance, P.
16:29:58 Dot X-axis dot bounds okay? And so you can see, they're currently set to be auto, meaning that whatever data we input Bok is gonna infer the bounds for us.
16:30:10 So, for instance, the current horizontal bounds go from about 0 to 20,000, so we can change them if we would like to sort of remember the example from Matt Potlib where we changed it.
16:30:23 So the bounds only went from the minimum value of the data to the maximum value of the data drawn we can do the same thing here where I'm not gonna type it out. But down here.
16:30:32 We can see. You know. P. X. Access stop bounds is equal to the auto.
16:30:37 Mpg, dot min. So going from the minimum value to the maximum value of the weight.
16:30:43 And this is, it. We don't need a range object for this.
16:30:45 We just need to input a list that goes from the minimum to the maximum.
16:30:51 And so when we run this new adjusted code, we can look at our lines and see.
16:30:54 Now they're only drawn from the minimum to the maximum value.
16:30:58 So while the grid marks are drawn, turned on.
16:31:03 If we go ahead and scroll, we can see that once we limit the bounds, the grid marks are no longer drawn outside of the bounds, so we've only once we limit our bounds like we just did the grid marks are only drawn where the bounds.
16:31:19 Exist. Okay.
16:31:21 So we may also want to change our tick marks. That's another part of the access that we can change.
16:31:28 So in order to change our tick marks, we call whatever access you're interested in.
16:31:33 So X-axis, and then dot ticker so here's an example.
16:31:36 P. Dot x-axis dot ticker
16:31:41 Okay. And so we can see that the default is the basic ticker.
16:31:45 So you can change, for instance, the number of ticks you might like.
16:31:50 So, if you do, desired number of ticks, and you put in a number Boko will do its best to come as close to that number as possible.
16:31:57 Sometimes it's not possible. Given the inputs to the data, you can also turn on minor ticks or turn off minor ticks by doing the number of minor checks.
16:32:09 So the exact same thing is desired. Num ticks. But now it's the number of minor ticks.
16:32:14 So in this example, down here, we can go down and see.
16:32:17 Well, now I'm setting the X-axis ticker to only have 4 ticks, or as close to 4 as it can do.
16:32:22 The one-axis ticker to have only 6 ticks, or as close to 6 as it can do, and then the other 2.
16:32:30 I'm turning off the number of minor ticks I'm setting it to be 0, which means that there will be no minor tick marks.
16:32:37 Okay, so that's different ways that you can impact the ticks if you're interested in learning more, you can always go to the documentation for and then find the sort of ticker post in the documentation.
16:32:52 So let's talk about the plot background. So currently, our plot has a white background with a light group grid lines. So let's see how we can change some of that so we can alter the grid lines by doing P dot grid and then changing different arguments.
16:33:11 So for instance, the alpha of the grid line, the color of the grid line the dash pattern of the grid line, and the width of the grid line.
16:33:19 And so one example we might be interested in is maybe we don't want gridlines at all, so we can do that by control, that by setting the grid line color equal to none.
16:33:27 And just before we go and demonstrate that we can see what happens when we call P.
16:33:32 Dot grid you can see that we receive a list of various grid objects.
16:33:38 So in the bottom if we want to turn that off, we call P.
16:33:41 Dot grid got grid line color equal to none
16:33:49 So that turns off the grid lines for both axes.
16:33:53 But maybe we just want to turn off the grid line for a single axis or a single axis.
16:33:59 So if you want to do that, you first call instead of P.
16:34:02 Dot grid you'll call P. Dot X grid, or P.
16:34:06 Dot y grid. Okay? And so there you'll do p dot y grid, for instance, if we want to turn off the vertical grid lines, P.
16:34:18 Dot y grid vertical access grid lines.
16:34:21 P dot y grid grid line color equals none. Okay.
16:34:26 So now, after doing that, you can see we only have grid lines that correspond to the values on the horizontal axis.
16:34:32 You can change the background color. So currently, it's white.
16:34:36 So you can do this with P dot background. Phil. Alpha and P.
16:34:40 Dot back, background, fill color. So in this example I make some changes here at the bottom that go ahead and change the color of the grid lines in the color of the background, so that it mimics seborns dark grid style.
16:34:55 So now our background looks like Seborn's dark grid background.
16:35:01 We can also just like with Matt Potlib, we can add texts directly to the plot.
16:35:07 So one way you do this, or the way that you do this is you call label the label object.
16:35:13 So we're gonna go ahead and repeat that sign and cosine example from Matt plot web.
16:35:19 So first I'm gonna make the data. And if I want to add a label to the chart, the easiest way to do that is to import label first.
16:35:26 So from Boca, and if we look at the documentation like, we can see that it's in the answerations module of the models module.
16:35:34 So Boca dot models dot annotations. And then we're gonna import label.
16:35:43 So once you have a label, you can go ahead.
16:35:48 And first create the label object, which I did right here, and to save time, I've already done it.
16:35:55 I'm not gonna code it up. Live. So with a label, object in Boca, you first specify the horizontal position with an X argument, vertical position.
16:36:04 And again, these are of the bottom left of the text, just like with Matt Plot lib.
16:36:09 And then the actual text, so unlike with Matt pot, Matt, plot lib dollar signs do not enable math symbols.
16:36:16 So there are a way to make it so you can make your text look mathematical.
16:36:20 But I'm going to leave that to you to explore the documentation on your own to see how to do that.
16:36:24 So this will create a label object, and then, after you create a label object, you have to add it to the layout of your plot.
16:36:32 So you'll do. P. Dot add underscore layout input the label object, and then it will be on the plot.
16:36:40 Okay. So now we've recreated our plot from the map plot, dip, mat, plot, lib notebooks, another thing.
16:36:47 You might be interested in doing is maybe, instead of labeling the plot directly you'd rather use a legend for whatever reason you have so if you want to use a legend when you're creating and adding the Glyph you just add a label, or an argument, called the
16:37:02 legend label. So in this example, when I add my sign, plot, glyph, I go ahead, and I call an argument legend, underscore label equals to sine of X, okay, and then this shouldn't be there.
16:37:17 I'm gonna delete that that shouldn't be in this piece of code.
16:37:20 Just sorry about that. And now you can see just by calling a legend label.
16:37:26 The legend gets added to my plot automatically in situations where we want the legend to denote what various colored glyphs mean.
16:37:35 You can use the legend Field Argument. So for this to work, you need to set legend field equal to column name.
16:37:42 So let's remind ourselves of when we colored our automobile sketter markers by the number of cylinders the engine had.
16:37:51 So when we did that, we at we showed how to add a factor.
16:37:54 C map to the plot. So if I wanted to add a legend along with that, when I call the scatter, I just have to add legend, field is equal to the column.
16:38:04 That produced the factor amount. Okay.
16:38:09 So we can also not just go with what the default aesthetics of the grid are, so we can go ahead and change different aesthetic options of the grid by calling P.
16:38:19 Dot legend, not the grid, but the legend.
16:38:23 Sorry about that. So if we call P. Dot legend, it gives us access directly to our legend, and so then we can change things like the position of the legend.
16:38:31 The title on our legend, the location on the Legend, etc.
16:38:37 So as a quick note, we're gonna change the location.
16:38:41 But when we change the location of the legend, the position that we're gonna put in, which is a list of X comma y.
16:38:49 The position is with respect to the figure. So, for instance, if we put in 0 comma 0, which is what we're gonna do, the 0 is going to be 0 on the X, which is all the way to the left and 0 on the Y, which I believe is all the way to the top, and we can go ahead, and
16:39:05 see that. So here we go ahead, and we set the legend to be 10 comma, 3 10.
16:39:11 So actually, I think 0 starts at the bottom which makes sense in a later no, a later lecture in a later in the section, not with Python, but in a later section you'll see why it's confusing as to where the 0 is so in Boca the 0 I believe refers to
16:39:27 this bottom left-hand corner of the figure. And so then, when I put in like 10 in this example, 10 comma, 3, 10.
16:39:35 This is telling Boka put my legend, 10 pixels to the right, and 310 pixels up. And then here you can see I'm setting my title of the legend to be the number of cylinders and then setting the font style okay
16:39:53 Another thing you can do, so we know how to add a legend now.
16:39:56 So what about a color bar? So we've also learned how to add colors to our plots.
16:40:02 With linear Cmap, where I colored. I believe the plot plot points by the miles per gallon.
16:40:10 I believe so if we wanna add a color bar, we have to import a couple of things.
16:40:16 So we first have to import the linear color mapper, which goes ahead and makes that color bar mapping like we showed within Matt plot lib.
16:40:25 And then we have to go ahead and import color bar as well, and then, finally, we need to use add layout, which we've already imported up above.
16:40:34 When we added the text label directly to the plot.
16:40:38 So here I am importing the linear Cmap transform for making the plot and then importing linear color, mapper and color bar.
16:40:47 So this part should look familiar. We made this in the last notebook, and so, if I just commented out the rest of this
16:40:58 First I should run the code that imports what I need.
16:41:01 If I run the rest of this, this should look familiar from the last notebook.
16:41:05 And now I'm going to uncommon this, and so the first thing we're gonna do is make the linear color map or object.
16:41:14 So this linear color map or object is the same thing. Doing the same thing as linear C map here.
16:41:21 So it's creating the C map that takes the smallest value and maps it.
16:41:25 I believe, dark purple, and then the highest value, and maps it to bright yellow.
16:41:31 Maybe that's what kind of looks like here. Maybe bright tan.
16:41:35 And then the color bar needs to take in that color mapper for the color mapper argument.
16:41:41 So this tells it like, what is the color mapping the location?
16:41:45 Tells tells Boka where to plot it in relation to the figure, and then the title just gives the color bar a title, and then here I am specifying different aesthetic options of the title like we've done before in this notebook and then finally after you've created
16:42:04 A color bar. You just have to add it to the layout of the figure by calling first, add layout.
16:42:10 In the first arguments, the color bar, and then you can specify if you want it on the left or the right of the figure.
16:42:16 Okay, so now I've got this color bar that helps explain what the different colors mean.
16:42:20 So these automobiles have, like a fuel economy of less than 10, whereas these automobiles over here have a fuel economy of more than 45.
16:42:30 So if you're someone who's trying to save money on gas, you might want to try and drive these cars.
16:42:35 You can find more a aesthetic arguments for the color bar by using the color bar documentation that's provided up here.
16:42:44 So we've learned a lot. In this video, we learned how to add titles, labels both for axes and directly onto the plot we saw how to add legends.
16:42:55 We saw it add color bars and change various aesthetic prices of our axes, and a bunch of other non graphical elements.
16:43:05 So with that we've seen a lot of how to make really good static plots in Boca. And then.
16:43:12 Next notebook. We're gonna see how to start adding a little bit of interactivity back in or not back into.
16:43:18 But into these plots, so they're no longer static.
16:43:20 So I hope you enjoyed watching this video, and I hope to see you in the next video.