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

16:02:53 Hi! Everybody! Welcome back! We're gonna continue to learn about Plotley as we learn how to use Plotley to adjust the various figure layout options.
16:03:03 So in this notebook we'll talk about how to adjust various figure layout options, including the size of the figure, the title axis labels, all that good stuff that we've seen in the other python packages for non graphical element adjustment.
16:03:17 So the first one we're going to talk about is how to change the size of the figure through its height.
16:03:20 In its width. There's a few different ways depending on what kind of plot you're making and how you're making it.
16:03:26 So if you just make it a figure object directly you can set the layout equal to a dictionary with the width and the height set.
16:03:34 So you know the height in the width. I think we've seen a few times throughout the various notebooks, so I won't spend as much time going in depth on these.
16:03:42 If you're using a plot lea express function, you can just set a size and a width argument.
16:03:48 Like we do here today to get a pixel or a figure that is 500 pixels wide and 250 pixels high.
16:03:57 You can also use the update layout function from the figure object itself.
16:04:02 So you call fig dot update layout, and then again provide arguments like width and height.
16:04:08 Okay, so now that we have an idea of how to set the sizes, I figure, what's another thing, we might be interested, knowing how to do is, how do we set titles and acts?
16:04:19 These labels. So one way you can do it is just by setting a tight a title argument within layout of go figures.
16:04:29 So we had layout equals, width and height before, but now you can set a title, argument by title as a key and then here I've given it the title an empty figure, because that's what it is alternatively and plot lee express if you're using a
16:04:43 Plotley express function. You can just call title equals. As an argument.
16:04:46 So here is a an example of that where I have title equals a scatter plot
16:04:54 Similarly just like before. I could also just use fig uplaya update layouts title equals and then provide the arguments that I'd like.
16:05:06 So this title, the default appearance, is to set it off to the left, almost like you're writing on a sheet of paper following.
16:05:15 You know English writing rules going from left to right, top to bottom, but maybe you'd rather see something like putting it over the middle of the plot and having it centered.
16:05:24 That's a steady desire when making a figure. So, to change the title appearance, there's a couple different arguments.
16:05:32 You might be interested in, like the X which sets the horizontal position of the X anchor, the Y which sets the vertical position of the anchor, the font which takes in a dictionary with various font options that we've seen a number of times the X
16:05:49 Anchor, which shows us how to align the text horizontally, and the Y anchor, which shows us how to align the text vertically.
16:05:56 So we think of the anchor as like if we're hammering up our title to hang on our wall.
16:06:01 The anchor would be where the nail goes in.
16:06:04 So let's go ahead and see an example. So I'm going to make my scatter plot again, and I'm going to do fig, dot update layout.
16:06:12 And so for the X argument, if I wanted in the middle, the X and Y arguments are in fraction of the width and the height of your figure.
16:06:23 So if I want my anchor set in the middle, I would set this equal to 0 point 5 if I wanted to set my Y still near the top, I might do something like 0 point 8 font.
16:06:34 It takes in a dictionary. So I'm gonna go ahead and change my size to be, let's say, 20 x anchor takes in text arguments.
16:06:46 So, for instance, if I want the anchor to be in the middle of the horizontally in the middle of the text, I'll put X anchor at center, and for the vertical, if I want it to be in the middle vertically of the text, I put in middle
16:07:03 Okay. And then we can see, for instance, what if, instead of point 8, I put point 5 for?
16:07:09 Why, now it's in the vertical myth of the figure object.
16:07:13 So typically if you want at the top, you'll put something like point 8, or even maybe 0 point 9.
16:07:18 But personally I like it a little bit closer to my plot, so I'll stick with point 8 after you have a title the next step is to label your axes.
16:07:28 So labeling the vertical and horizontal axes.
16:07:32 How do I do that so it's basically the same as of adding a title with the update layout changing the establishment appearances there.
16:07:40 But now, instead of update layout, you use update X axes for the horizontal axis label and update y axes for the vertical label.
16:07:49 So we can see here. I can do update axes, and then I put in a title.
16:07:54 Argument. Like, I would with just the layout. So here's the example where I exchange the title appearance and update layout.
16:08:01 When I have a title and update X-axis or update y-axis, it changes the X axis or the w-axis label.
16:08:10 Accordingly. So here now I have a plot that has that has both an a horizontal and a vertical axis label
16:08:21 So what are additional axes, aesthetics? So how do I change?
16:08:27 For instance, things like tick marks or access lines. So again, you're going to use update X axes.
16:08:34 And this first thing that I'm going to learn is how to draw my horizontal or my vertical axis.
16:08:40 I'm gonna do that with show line equals true, and then adding a line color.
16:08:46 So if I set show line equal to true, and then, after you do that, you have to set a line color.
16:08:52 So for me I'm just going to put it in as black and then I'll set a line width.
16:08:57 So show line will now draw the access lines. So as an example.
16:09:03 Here's what it looks like when it's false, which is the default
16:09:08 So when it's false it doesn't draw the access line, but when it is true
16:09:14 It does, and so now I have access lines. On my vertical and horizontal axis.
16:09:19 It can also be desirable to have, instead of lines on the axis themselves, sort of like the spines from that plot.
16:09:28 Lib. Remember those you may want to draw 0 lines so lines that go along where X and y equals 0.
16:09:35 So if you want a 0 line, you can set 0 line.
16:09:38 That argument here you set that equal to true and then, if you only want the 0 line, you have to set show line equal to false.
16:09:47 So setting it equal to false, will turn off this line.
16:09:50 But setting 0 line equal to true, will turn on the the the horizontal line where y equals 0, and then you can also set the 0 line color again.
16:09:58 I'm going to set it equal to black. So now you can see the we've drawn a line on there.
16:10:05 Where y is equal to 0. But you might be wondering, where's my line?
16:10:09 Where x is equal to 0. Well, as we can see by looking at the range on our horizontal axis, the line where X equals 0 is just not in the range.
16:10:18 So how can I change the range that is displayed?
16:10:23 Well, I can do that with a negative one, comma 6.
16:10:27 So there's a range argument within update X axes and update Y axes.
16:10:33 So all you have to do is input a tuple, a list or an array with the bounds that you want.
16:10:39 And this should be a comma, not a period so now that I've updated my range to go from negative one to 6, we can see that line where X equals 0.
16:10:50 Because remember here in my update, y axes, my 0 line is still set to true.
16:10:56 So another thing you might want to change about your axes themselves are to include tick marks or to change the appearance of tick marks once they're included.
16:11:07 So your go ahead and you do this, and inside of X-axis you include a ticks label.
16:11:13 So ticks can take airtics. Argument. So ticks can take in inside as a string or outside as a string.
16:11:20 So if it's set to outside the ticks are drawn outside of the plug, like the axis, the gray area.
16:11:27 So outside meaning they would come down. If it's on the horizontal, if you had it set equal to inside, they would go inside of the the plot area.
16:11:36 Then ticks, tries to set the number of major tick marks that are drawn.
16:11:41 So, for instance, if I set this equal to 3, it would attempt to draw 3, or what?
16:11:44 However close it can get, you can change the color with tick color, the the size of them horizontally.
16:11:50 Or tick width the length of them with tick, length.
16:11:54 Whatever fonts you want for these labels as tick font, and then you can have minor ticks drawn as well by setting a minor ticks.
16:12:04 Argument. So for us, we're just gonna show adding ticks to the horizontal axis.
16:12:11 So I'll add these outside of the plotting area.
16:12:14 I'm gonna try. Tell it to try and draw 10 of them, and then why don't I increase the length of the tick?
16:12:19 Marks, just to demonstrate how tick length works. Okay?
16:12:24 So now I have these 1010 tick marks, and they're pretty long.
16:12:32 So we can also change the background color of our figure with the update layout option.
16:12:37 So going back here, after I've set my title, I didn't can include this argument plot.
16:12:44 Bg, color, and I can set this equal to. For instance, black.
16:12:48 And now my plot has a a black background
16:12:54 Then there are other ways I can change the appearance so we've changed the background.
16:12:58 We've changed tick marks, etc. What else is there to change?
16:13:01 Well, what about these grid lines? So you can go ahead and turn off, for instance, gridlines by in our update axes.
16:13:10 Functions. So you do this with the show grid argument.
16:13:15 So if you don't want any grid lines, you'll set this equal to false and then, as a note, if you don't want any gridlines at all, you also have to set the 0 line equal to false.
16:13:26 Okay. So now I have a plot with no 0 lines.
16:13:30 What happens when the 0 line is stuck at true
16:13:34 That was the wrong one, I think this is where I would want it to be true.
16:13:39 You can see that it's still drawn there. So if I had, if I want absolutely 0, if I want absolutely no grid at all, no 0 line at all.
16:13:48 Both need to be set to false, and then you can change things like the color of the grid and the width of the grid, with arguments like grid color and grid width.
16:13:57 So here I will have a red, wide grid. Okay, you can set it as wide or as thin as you'd like.
16:14:04 So here's a really wide grid and then here's like a really thin grid, or even thinner.
16:14:11 Maybe, and hard to tell the difference
16:14:15 Okay. So let's go back to 2. So another thing you might be interested in changing is the legend.
16:14:23 So we can configure various aesthetic options of the legend as well.
16:14:28 So we're gonna be doing all but one of the aesthetic just to learn them.
16:14:31 So, for instance, we can set the position of the legend with X.
16:14:35 Y X. Anchor and y anchor just like what would title.
16:14:38 So these get taken in as a dictionary. So X, if I want to set it to be on the left, I would do like 0 point 1.
16:14:46 And then why, if I wanted to set it be in the top, I do something like 0 point 7 5, maybe, and we can always adjust after we see what it looks like.
16:14:55 X. Anchor for this
16:14:58 I'm gonna set it to be. So my anchors up in the left hand corner upper left corner. So X anchor set to left, and then my Y anchor set to the top
16:15:13 Okay. So now we see, maybe I'm not far enough left, and not far, far, far enough to the to the top, so I can do like point.
16:15:21 Oh, 2, and then maybe point 9 and maybe I want to go a little bit further, so why don't I do point 9 6?
16:15:32 Okay.
16:15:34 So I can also change the inside of the legend to be a different color.
16:15:38 Both the font, the name and the background. So the background color is just set also with bg, color.
16:15:47 So maybe I want to set this to be black. Maybe I want to change my title so that it isn't lowercase.
16:15:54 It's city. And then here, just using what we've learned about fonts and changing it to be white.
16:16:00 Okay, so here, we can see, this is a black legend with a a different name, and then white Font.
16:16:09 We can. Also, you know, here this is known as a vertical.
16:16:13 This is a vertical legend, because the values are listed vertically.
16:16:18 If you wanted to to be like Los Angeles, Space, Boston.
16:16:22 So from left to right you can change the orientation of your legend with an orientation argument
16:16:30 Here it is all you have to do for horizontal is to specify as nh, so now I have a horizontal legend.
16:16:38 So it goes from left to right instead of up to down.
16:16:41 Finally, you can go ahead and actually turn the legend off.
16:16:45 So maybe you're drawing a plot, and you don't want a legend to show at all, so you can do this with the show legend equals false and update layout.
16:16:55 So if you set a show legend equals false argument and update layout, you can go ahead and turn the legend off altogether.
16:24:33 Finally, the last thing we'll learn about is how to add text annotations directly to the plot, so you can add text annotations to your plot by adding a scanner graph. Object.
16:24:44 So you make your figure first, and then you'll do fig dot, add trace, and then go dot, scatter, you specify the horizontal and vertical positions with an X and a Y argument
16:24:59 An x and a Y argument resp., and then with the text that you would like to place, you'll input as a text argument.
16:25:06 And then the last key is you have to put in this argument most equal to text.
16:25:14 So this tells scatter that you don't want to add points, markers or straight lines between your points.
16:25:21 You just want to add the text from the text argument. So here we can see we've added text at these positions.
16:25:27 Text, one and text 2. You may also want to shot off the hovering if you don't want this information to to exist.
16:25:37 So you we've seen that in the preview notebook the hosts notebook on how to do that.
16:25:43 If you want to change the appearance of your text, so maybe you wanted to make it larger.
16:25:48 You can do that with the update traces function.
16:25:52 And then for this particular example of increasing the font size, we use the text font size argument.
16:25:58 So here we've added that. And now our text font is larger
16:26:05 Let's see, how do we do that? Reset axes?
16:26:09 Our text font is larger now, and that was done with the upate traces.
16:26:14 Argument. So you can see additional text annotation, options at this documentation link.
16:26:19 Here, where you can learn more, and actually let me fix this.
16:26:23 I think I forgot. Here we go. So now that's fixed.
16:26:27 You can see more text annotation options here at this link.
16:26:32 So in this notebook we covered a plethora of ways to alter the non graphical audio of our plot.
16:26:42 So if you want to explore more, I've provided additional documentation links that you can do explore on your own time.
16:26:50 But now I think it's time that we learn to move on by seeing how we can.
16:26:55 You know, learn more how once we created a great figures I was trying to read while also talking, now that we know how to make these great static figures with some hover capabilities as well as you know, making these different figure non graph aesthetic alterations, we might want to be
16:27:14 Able to save those figures which we're going to learn how to do in our next notebook.
16:27:19 All right, so I hope you enjoyed watching this notebook.