Great. Now you know what Bokeh is,
because I explained that in the previous
lecture. And in this lecture, I'll show you
how to build a very basic invoking
graph. And yeah, so we'll start from
scratch as the bus, I will improve that graph.
[No audio]
Yeah, let's say this is your first Bokeh graph,
or maybe you have built Boken graphs
before. So before, taking this course,
and you know of few things already,
still, I would suggest you start from
here, because I'll show you the correct
logic towards building graphs step by
step. And now let's go ahead and do
this, I'll be using some times I will be
using Jupyter Notebook to write Python
code and in other times, I'll be using
the Atom editor. So the Jupyter Notebook
is a good place to start actually,
because it will allow us to write some
interactive code, we can just write a
single line of code and see what it
does. So that's great for, starting of
with a library. So you can explore
the library by testing small pieces of
code, and yeah. With Shift and Right Click
on Windows over folder, you can go over
here, Open a command window here. And
this will open a command prompt in the
current folder. So on a Mac or Linux,
you can maybe do something like open
terminal here, or you can open a
terminal normally, and then you can cd
to the path, to your working path. So
I'll be writing the code in these
directory. And to install Jupyter,
you would say pip install
jupyter notebook. And this is a requirement
already satisfied, because I've already
installed Jupyter Notebook. If you
haven't, you can just go ahead and do
this and, you know, it will be
installed for you. And now to start
Jupyter Notebooks you'd say
[No audio]
jupyter notebook, just like that. And that will
open a Jupyter Notebook on localhost. So
it's like a service based notebook. And
yeah, if you create now you create a
Python 3 notebook
[No audio]
and name it Basic graph, and just like that.
[No audio]
In the demo folder, you will have this Basic graph.ipynb
which stands for IPython Notebook, but now the
IPython Notebook is renamed to Jupyter
Notebook, but the extension still
stays the same. And you also have this
checkpoints, which are false
automatically produced when Jupyter
saves your sessions. Now you should keep
your command prompt open. And then this
is where you write your code. And if you
don't prefer to use Jupyter Notebooks,
you can use your favorite editor. So
that should be Atom, or Vim, or the
default Python IDE, and so on, it
doesn't matter much. And I'll be using
commands to command my code, and that
will help you read and understand my
code easier. Because you know, I'll be
writing some code here, and some code
and later on like that. And I'll be
explaining the code, so as I type it in,
but sometimes you forget what I typed
here and you're struggling to understand
it. But if I have some commands here,
let's say, plotting the x and y values.
And if I write this command here, Python
will not read it as code. So it will
ignore it, but you can read it. And you
will assume that I'm writing this
command for the next block. So I write
the command, I leave no space, and I
type the code there. And then I leave a
space there, and I typed some other code
there, so it's another block that
doesn't have to do with this command. So
this command will be about this block of
code there. Sometimes I may want to
apply specific commands about specific
lines, for example, this one here,
in that case, I will write the command just there.
So let's say for the x values
here, or something like that. Great. And
the first command will usually be above
the script. So what we'll be doing is
making a basic Bokeh graph. This will
be a line graph, right. And I'll leave a
space there and here I start the code.
So, first of all, I'll be importing
[Author typing]
Bokeh. And I'll be explaining this
later, but Bokeh has a few interfaces.
[No audio]
The first interface is bokeh.plotting.
So it's called the bokeh.plotting interface.
And I'll be going through the interfaces later.
So for now let's focus on how a graph looks like
and how the code looks like to build a
Bokeh graph. So for, from bokeh.plotting
imports, import the figure object,
which is the most important object, and
Bokeh because this will contain like
the, like a container where you add
points, you add lines, and you add the
labels for the points, and you add grades
for the plot, and legends, and
everything. So you'll add everything
into this figure object. That's it. And
then you need to have some helpful tools
from Bokeh that comes from bokeh.io
interface. So from that you want to
import output_file and show, and that's
basically what we need, you'll see what
all these are in just a bit. And then we
need to create some data. So let's
create some fake data there.
[No audio]
Prepare some data, I'll be using lists.
[No audio]
Let's say 1, 2, 3, 4, and 5.
So that's for the x axis. So in
the plot, these values will be mapped
along the x axis. And then we have a y axis there.
Let's say 6, 7, 8, 9, 10. A note that
this list have to have the same length,
so in order to pull them in Bokeh.
Otherwise, Bokeh will throw an error,
it will say that, you know it, Bokeh will start
to take pairs of this list. It will
take 1 and 6 and it will map these
along the x and the y axis. So it will
create a point with coordinates 1 and
6, and then 2, and 7, and so on,
and goes through 5 and 10. And then if
you add a line number here, say 7,
or whatever, Python will say, I
didn't find a pair for 7 in the y axis. So
you'll get an error. Great. So we have the data
[No audio]
prepare the output file.
So here is where you use the
output_file function and there you pass
[No audio]
other name of the HTML file that
will be created. So where you can choose
every name you want. And then the next
thing to do is you want to create a figure
object instance. So you have figure
class there, you have imported it, and
you can use it now. Just like that, so
I'm storing that in the f variable.
[No audio]
Let me command this, create figure objects.
[No audio]
And finally, create line plot. The way
to create the line plot is by referring
to the figure object that you created.
And when you apply the line method if
you want to create a line. And the line
express from you to pass the x array
with data and the y array as well. So
know thats everything I'm passing here
are the minimum requirements to build a
plot. There's a lot of features that you
will be adding later here in the code so
that we arrange our plots with
features such as legends and labels, and
colors and transparency etc. But this is
the back bone, so to say. And what you
have created a line, all you have left to do is
use the Show methods to show your figure object.
[No audio]
And yet to execute that in Jupyter, I can just
press Ctrl and Enter. Wait a second
[No audio]
and I got an error there and put here.
It should be output_file. Sorry.
Execute again and here is a line graph.
[No audio]
And yeah. If you look at this, you see
that the first point of the line is at
coordinates one. So this is the x axis,
1 for the x, 6 for the y, if you
look here is a 1 and 6. And then you
have 2 and 7 as a one up to the
last point, which is 5 to 10.
[No audio]
5 and 10. Yeah. So now there's a graph. And
this is not an image graph, as you can
see, I can move this around and you
also have a couple of tools here. So
these are called tools. And what you can
do with these is, let's say, this is a
Pan, and if you see this vertical blue
line here, that means that the Pan tool
is already activated. 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 see that both Pan
and the Wheel Zoom are activated now. And I
can use the wheel of my mouse to zoom in
and out. And you know, remember that I
told you, Bokeh produces interactive
graphs. So here it is. However, this is
just a basic functionality of
interactivity. Because later, as I told
you earlier, I will be adding widgets
here that interacts very powerfully
with a graph. And here basically, you also
have this box zoom that you can
zoom in a certain area of your graph,
you also have this reset to there,
which actually resets the graph to each
default view. And so what's left, we
have this Help button, which brings you
to the Bokeh documentation. And I'll go
through the Bokeh documentation later,
which is very helpful for you to get
help from. And it's also a Save button
in here, which you can use to save your
plots in PNG graphs, or images. So if
you ever want to convert your graphs to
images, you can use that button. And
yeah, that's about building a basic graph. And
I'd like to give you some practice activity now.
[No audio]
You know, here I use a line graph.
But you can use other types of glyphs.
This is how these geometries are code in
Bokeh. And you can get an idea of what
a glyphs you can use, you can apply to
your figure by doing dir f, which is
object instance of your figure object.
[No audio]
You will see here, let's find a line.
[No audio]
Here is line. So that's the one you will
used. But I'd like to ask you to make
your other, your own graphs using
triangle first, and then a circle.
[No audio]
So that'd be very easy. Instead of line
just pass these things here and see what
you get. But try to make the graph from
scratch instead of copying mine. Let me
command this I forgot to command this.
[Author typing]
You can also play around with some other
data to see how that goes, and yeah, that will
make sure that you understand how to
create a very basic Bokeh plot. And in
the next lecture, I'll show you how to
use some more earlier on data. So we use
lists here but in the next lecture we
will be use CSV files, so plotting from a
CSV file. I will be creating the same
graph. See you there.