1 00:00:00,660 --> 00:00:06,990 Great, now you know what Bokeh is because I explained that in a previous lecture and this lecture I'll 2 00:00:06,990 --> 00:00:11,050 show you how to build a very basic Bokeh graph. 3 00:00:11,370 --> 00:00:18,750 So we all start from scratch and start by saying we will improve the graph and let's say this is your 4 00:00:18,750 --> 00:00:24,830 first Bokeh graph or maybe you have built Bokeh graphs before. 5 00:00:25,500 --> 00:00:29,320 So before taking this course and you know a few things already. 6 00:00:29,430 --> 00:00:31,360 I suggest you start from here. 7 00:00:31,390 --> 00:00:37,400 Because I'll show you the correct logic towards building graphs step by step. 8 00:00:37,750 --> 00:00:46,800 Yeah, let's go ahead and do this. I'll be using, sometimes I'll be using Jupiter a notebook to write Python 9 00:00:46,800 --> 00:00:47,290 code. 10 00:00:47,350 --> 00:00:50,650 And in other times I'll be using the Atom editor. 11 00:00:50,910 --> 00:00:57,780 So the Jupiter notebook is a good place to start actually because it will allow us to write some 12 00:00:57,780 --> 00:00:59,130 interactive code. 13 00:00:59,130 --> 00:01:02,910 We can just write a single line of code and see what it does. 14 00:01:02,970 --> 00:01:08,080 So that's great for starting off with a library so you can explore the library. 15 00:01:08,220 --> 00:01:19,550 By tasting small pieces of code. And yeah, with shift and right click on windows over a folder you can go over 16 00:01:19,550 --> 00:01:20,290 here. 17 00:01:20,360 --> 00:01:24,660 Comand window here and this will open a command prompt. 18 00:01:24,770 --> 00:01:26,450 The current folder. 19 00:01:26,880 --> 00:01:35,410 So on a Mac or Linux you can maybe do something like open terminal here or you can open a terminal normally 20 00:01:35,540 --> 00:01:40,170 and you can CD to the path to your working path. 21 00:01:40,400 --> 00:01:47,040 So I'll be writing the code in this directory and to install Jupiter 22 00:01:47,070 --> 00:01:52,650 you would say pip install Jupiter notebook. 23 00:01:53,440 --> 00:01:58,940 And this is says requirement already satisfied because I've already installed Jupiter notebook, if you 24 00:01:58,940 --> 00:01:59,550 haven't 25 00:01:59,630 --> 00:02:06,730 you're going to just go ahead and do this once you know it will be installed, and then to start Jupiter 26 00:02:06,870 --> 00:02:16,590 notebook you'd say Jupiter notebook just like that, and that will open a Jupiter notebook on localhost. 27 00:02:16,610 --> 00:02:20,860 So it's like a service based notebook. 28 00:02:21,280 --> 00:02:30,930 And yeah, if you create now, you create a Python 3 notebook and name it Basic Graph 29 00:02:32,580 --> 00:02:33,970 just like that. 30 00:02:34,740 --> 00:02:37,100 In the demo folder you'll 31 00:02:37,100 --> 00:02:43,280 have this basic graph .ipynb which stands for iPython notebook. 32 00:02:43,280 --> 00:02:49,870 But now iPython notebook is renamed to Jupiter notebook but that extension still stays the same. 33 00:02:49,870 --> 00:02:56,090 And you also have these checkpoints which are files automatically produced when Jupiter saves your 34 00:02:56,090 --> 00:02:57,530 sessions. 35 00:02:57,540 --> 00:03:05,150 Now you should keep your command prompt open and then this is where you write the code. 36 00:03:05,390 --> 00:03:11,610 If you don't prefer to use Jupiter Notebook you can use your favorite editor. 37 00:03:12,050 --> 00:03:20,360 So that would be atom or vim or all the default python ide. 38 00:03:20,360 --> 00:03:21,900 It doesn't matter much. 39 00:03:22,790 --> 00:03:29,810 And I'll be using comments to comment my code to help you read and understand my code easier because 40 00:03:29,810 --> 00:03:37,670 you know you'll be writing some code here and some code and later on like that and I'll be explaining 41 00:03:37,670 --> 00:03:38,170 the code 42 00:03:38,190 --> 00:03:39,790 as I type it in. 43 00:03:40,250 --> 00:03:46,670 But sometimes you forget what I typed here how you're struggling to understand it but if I have some 44 00:03:46,670 --> 00:03:53,430 comments here let's say plotting the x and y values. 45 00:03:53,930 --> 00:03:59,270 And if I write this comment here Python will not read it as code so it will ignore it. 46 00:03:59,300 --> 00:04:09,170 But you can read it and you will assume that I'm writing this comment for the next block so I'll write 47 00:04:09,170 --> 00:04:09,640 the code. 48 00:04:09,680 --> 00:04:16,670 I'll leave no space and I type the code there and then I'll leave a space there and I typed some other 49 00:04:16,700 --> 00:04:17,250 code there. 50 00:04:17,270 --> 00:04:20,620 So it's another block that doesn't have to do with these comments. 51 00:04:20,630 --> 00:04:23,910 So this comment will be about this block of code there. 52 00:04:24,320 --> 00:04:29,830 Sometimes I may want to apply specific comments about specific lines. 53 00:04:29,840 --> 00:04:31,240 For example this one here. 54 00:04:31,490 --> 00:04:34,730 And in that case I'll the comment just there. 55 00:04:34,760 --> 00:04:40,690 So let's say for the x values here or something like that. 56 00:04:41,010 --> 00:04:42,330 Great! 57 00:04:42,660 --> 00:04:47,000 And the first comment will usually be about the script. 58 00:04:47,000 --> 00:04:50,030 So what we'll be doing is making a basic 59 00:04:50,610 --> 00:04:51,860 Bokeh graph. 60 00:04:52,870 --> 00:04:55,390 This would be a line graph. 61 00:04:55,620 --> 00:04:59,700 And I'll leave a space there and here I start the code. 62 00:05:00,050 --> 00:05:02,030 So first of all I'll be importing 63 00:05:04,860 --> 00:05:11,470 Bokeh and I'll explain this later. 64 00:05:11,480 --> 00:05:16,630 But Bokeh has a few interfaces. 65 00:05:16,880 --> 00:05:21,120 The first interface is bokeh.plotting, so 66 00:05:21,170 --> 00:05:23,790 it's called the bokeh.plotting interface. 67 00:05:23,950 --> 00:05:25,990 I'll be going through the interfaces later. 68 00:05:26,000 --> 00:05:34,600 So for now let's focus on how a graph looks like and how the code looks like to build a Bokeh graph. 69 00:05:34,790 --> 00:05:42,760 So from plotting import, you import the figure object which is the most important object in Bokeh 70 00:05:42,800 --> 00:05:50,630 because this will contain like a container where you add pouring to add lines and you add 71 00:05:50,630 --> 00:05:57,630 labels for the points and you add grids for the plot, legends and everything. 72 00:05:57,650 --> 00:06:01,980 So you'll add everything into this figure object. 73 00:06:02,290 --> 00:06:03,150 That's it. 74 00:06:03,470 --> 00:06:13,350 And then you need to have some helpful tools from Bokeh that comes from bokeh.io interface. 75 00:06:14,160 --> 00:06:23,060 So from that you want to import output, file and show. And yeah, that's basically what we need. 76 00:06:23,070 --> 00:06:29,270 You'll see what all these are in just a bit, and that we need to create some data. 77 00:06:29,310 --> 00:06:30,990 So let's create some fake data there. 78 00:06:33,940 --> 00:06:35,310 Prepare some data. 79 00:06:35,650 --> 00:06:40,150 I'll be using lists. 80 00:06:40,610 --> 00:06:44,110 Let's say one two three four and five. 81 00:06:44,130 --> 00:06:46,770 So that's for the x axis. 82 00:06:46,830 --> 00:06:54,600 So in the plot these values will be mapped along the x axis and then we have the Y axis there. Let's say 83 00:06:54,800 --> 00:06:58,310 6 7 8 9 10. 84 00:06:58,320 --> 00:07:02,850 Note that these lists have to have the same length. 85 00:07:02,850 --> 00:07:08,590 So in order to plot them in Bokeh, otherwise Bokeh will throw an error. 86 00:07:08,680 --> 00:07:16,590 It will say that you know Bokeh will start to take pairs of these lists, so it will take 1 and 6 and it'll 87 00:07:16,640 --> 00:07:19,710 map for these along the x and the y axis. 88 00:07:19,890 --> 00:07:28,410 So it will create a point with coordinates 1 and 6, and then 2 and 7 and so on, and it goes through 5 and 10. 89 00:07:28,500 --> 00:07:39,130 If you add a line number here say 7 or whatever Python will say oh I didn't find a pair for 7 90 00:07:39,180 --> 00:07:41,500 and the y axis so you'll get an error. 91 00:07:42,020 --> 00:07:42,850 Great. 92 00:07:42,960 --> 00:07:44,100 So we have the data. 93 00:07:47,460 --> 00:07:53,250 Prepared the output file. 94 00:07:53,370 --> 00:08:05,310 So here is where you use the output file function and there you pass the name of the HTML file that will 95 00:08:05,310 --> 00:08:06,670 be created. 96 00:08:06,710 --> 00:08:09,530 So you can choose everything you want. 97 00:08:09,530 --> 00:08:13,960 And the next thing to do is you want to create a figure object instance. 98 00:08:14,220 --> 00:08:22,310 So you have the figure class there, you have imported it and you can use it now just like that. 99 00:08:22,320 --> 00:08:26,710 So I'm storing that in the F variable. 100 00:08:26,820 --> 00:08:27,480 Let me comment this. 101 00:08:27,470 --> 00:08:34,860 Creates figure object. 102 00:08:36,190 --> 00:08:46,770 And finally create line plot. The way to create the line plot is by referring to the figure object 103 00:08:46,800 --> 00:08:48,150 that you created. 104 00:08:48,150 --> 00:08:54,570 And then you apply the line method if you want to create a line, and the line expects from you to pass 105 00:08:55,140 --> 00:08:59,860 the x array with the data on the y array as well. 106 00:08:59,940 --> 00:09:07,460 So note that everything I'm passing here are the minimum requirements to build a plot. 107 00:09:07,520 --> 00:09:14,510 There's a lot of features that we'll be adding later here in the code as we enrich our plot 108 00:09:14,510 --> 00:09:20,500 with features such as legends and labels and colors and transparency et cetera. 109 00:09:21,210 --> 00:09:24,520 But this is the back bone so to say. 110 00:09:24,820 --> 00:09:32,220 And once you have created the line all you have left to do is use the show methods to show your figure 111 00:09:32,280 --> 00:09:32,730 object. 112 00:09:35,850 --> 00:09:38,840 And to execute that in Jupiter 113 00:09:39,300 --> 00:09:45,220 you can just press control and enter, wait a second. 114 00:09:48,610 --> 00:09:49,650 I got an error. 115 00:09:49,930 --> 00:09:52,840 It should be output file, sorry. 116 00:09:52,870 --> 00:09:54,870 Execute again. 117 00:09:54,880 --> 00:09:59,520 And here is the line graph. 118 00:09:59,670 --> 00:10:05,080 If you look at this you see that's the first point of the line is at coordinates 1. 119 00:10:05,080 --> 00:10:09,520 So this is the x axis 1 for the x 6 for the y. 120 00:10:09,520 --> 00:10:17,260 If you look here it's a 1 and 6 and then you have 2 and 7 and so on up to the last point which is 121 00:10:17,350 --> 00:10:22,640 5 to 10. 5 and 10. 122 00:10:23,080 --> 00:10:27,650 So now there's the graph and this is not an image graph. 123 00:10:27,650 --> 00:10:32,130 As you can see I can move this around and you also have a couple of tools here. 124 00:10:32,210 --> 00:10:41,090 So these are called tools and what you can do with this is let's say this is append and if you see this vertical 125 00:10:41,090 --> 00:10:46,520 blue line here that means that the append tool is already activated. 126 00:10:46,730 --> 00:10:55,730 And if I move my cursor like that, I'll pan around the graph. If you click let's say the wheel zoom, you'll 127 00:10:55,730 --> 00:10:59,470 see that both pan and the wheel zoom are activated now. 128 00:10:59,690 --> 00:11:05,240 And I can use the wheel of my mouse to zoom in and out. 129 00:11:05,280 --> 00:11:07,260 Remember that I told you 130 00:11:07,490 --> 00:11:08,060 Bokeh 131 00:11:08,070 --> 00:11:11,090 produces interactive graphs. 132 00:11:11,150 --> 00:11:12,630 So here it is. 133 00:11:12,650 --> 00:11:19,340 However this is just the basic functionality of interactivity because later as I told you earlier I will 134 00:11:19,340 --> 00:11:27,140 be adding widgets here that interacts very powerfully with a graph and basically you also have this 135 00:11:27,530 --> 00:11:32,470 box zoom that you can zoom in a certain area of your graph. 136 00:11:32,510 --> 00:11:41,680 You also have this resets tool there which actually resets the graph to its default view. 137 00:11:41,750 --> 00:11:42,770 So what's left? 138 00:11:42,800 --> 00:11:50,090 We have this help button which brings you to the Bokeh documentation and I'll go through the Bokeh documentation 139 00:11:50,090 --> 00:11:57,210 later which is very helpful for you to get help from. 140 00:11:57,890 --> 00:12:06,110 It's also a save button in here which you can use to save your plot in png graphs, images. 141 00:12:06,110 --> 00:12:12,280 So if you ever want to convert your graphs to images you can use that button. 142 00:12:12,330 --> 00:12:20,300 And yeah, that's about building a basic graph and I'd like to give you some practice activity now. You 143 00:12:20,300 --> 00:12:27,960 know here I used a line graph box you can use other types of glyphs. 144 00:12:28,000 --> 00:12:33,320 This is how these geometries are called in Bokeh. 145 00:12:33,970 --> 00:12:40,700 And you can get an idea of what glyphs you can use you can apply to your figure but doing dir(f) 146 00:12:40,880 --> 00:12:45,050 which is the object instance of your figure object. 147 00:12:45,160 --> 00:12:46,500 You will see here. 148 00:12:46,580 --> 00:12:50,080 Let's find line. 149 00:12:50,160 --> 00:12:51,550 Here is line. 150 00:12:51,910 --> 00:12:53,990 So that's the one you used. 151 00:12:54,500 --> 00:13:01,640 But I'd like to ask you to make your own graphs using triangle 152 00:13:01,700 --> 00:13:08,350 first and than a circle, so that would be very easy. 153 00:13:08,450 --> 00:13:15,920 Instead of line just pass these things here and see what you get but try to make the graph from scratch 154 00:13:15,920 --> 00:13:17,570 instead of copying mine. 155 00:13:18,480 --> 00:13:24,720 I have to comment this, I forgot to comment this. 156 00:13:26,930 --> 00:13:30,960 You can also play around with some other data to see how that goes. 157 00:13:30,970 --> 00:13:37,570 And yeah, that to make sure that you understand how to create a very basic Bokeh plot and in the 158 00:13:37,570 --> 00:13:41,550 next lecture I'll show you how to use some more real data. 159 00:13:41,920 --> 00:13:43,220 So we used lists here, 160 00:13:43,310 --> 00:13:46,540 but in the next lecture we will use csv files. 161 00:13:46,670 --> 00:13:51,380 So plotting from a csv file, and we will be creating the same graph. 162 00:13:51,400 --> 00:13:51,850 See you there!