Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
We often are interested in looking at multiple aspects of the same data. With Bokeh we can link charts together from the same data source and simultaneously explore the charts.
-
0:00
We've made a lot of progress with of our data visualization,
-
0:03
from looking at a flat spreadsheet.
-
0:04
And, I've been able to produce a nice looking scatter plot based on our data,
-
0:08
with continence specific colors and a useful legend.
-
0:13
We've also been able to add some meaningful data, with our hover tool tips,
-
0:17
to be able to gather insights on each data point
-
0:19
on our population versus life expectancy chart.
-
0:23
Our data set includes some other potentially interesting data as well,
-
0:27
like birth and death rates, land area and amount of coastline a country has, if any.
-
0:33
We can certainly alter our current plot to utilize some of the other data points and
-
0:36
plot them on a different page.
-
0:38
However, what if we want to see multiple charts together,
-
0:42
all based on the same data.
-
0:43
Bokeh provides a way to do that as well, and since we are using column data source
-
0:48
as our data type, our charts can be linked together to allow for exploration in
-
0:53
one chart, and have that simultaneously update the other charts as well.
-
0:59
We can have our charts displayed in rows, columns, or
-
1:02
even in separate tabs depending on the use case for
-
1:04
the data reporting or the sheer quantity of charts needing to be displayed.
-
1:09
In this video then, let's tap into some of the other bits of data
-
1:13
that we have in our county pops CSV file, and show multiple charts on the same page.
-
1:18
Let's head off to out editor,
-
1:19
and take a look at how easy Bokeh makes it to accomplish these tasks.
-
1:24
In order to display additional charts,
-
1:26
we need to think about how they will be displayed.
-
1:28
Bokeh allows us to display multiple charts in rows with the row method,
-
1:33
columns with the columns method, or a combination of the two.
-
1:36
We can bring that capability in by importing column and
-
1:40
or row from bokeh.layouts.
-
1:43
And we'll bring both of them in.
-
1:46
Now, we need to define our additional figure objects.
-
1:50
How about we generate one that looks at population versus birth rate.
-
2:00
Plot birth_rate, And
-
2:05
the figure object (x_axis label), and will be population.
-
2:17
Y_axis label,
-
2:22
Birth Rate.
-
2:27
We'll give this one a title of Population vs Birth Rate.
-
2:38
And we want those tools again.
-
2:42
And we'll zoom, box_zoom,
-
2:48
reset, hover, save.
-
2:54
How about we create one as well?
-
2:58
For population versus death rate.
-
3:10
Again, the x-axis will be population.
-
3:20
Death Rate title here will be Population vs Death Rate.
-
3:33
And we want this tool again,
-
3:38
box_zoom, reset,
-
3:42
hover, and save.
-
3:46
And we need to assign the correct data sources to each.
-
3:50
Further, let's use some different glyphs.
-
3:54
For plot_birth_rate, let's use circle, x will be Population.
-
4:03
Y is Birthrate.
-
4:08
Our source is still the same source from our country data.
-
4:13
We'll make this size 10, Our color is gonna be our same dict that we had before.
-
4:31
And we'll use the same color mapper.
-
4:37
And our legend here, will be Continent.
-
4:46
And mapper has two p's.
-
4:52
All right, for death_rate, let's make that a triangle.
-
5:09
And we want that to be Death Rate.
-
5:12
Our source again is our country data.
-
5:19
And now it looks like I forgot a closing, There.
-
5:29
Size again will be 10.
-
5:38
And the color is the same, Color mapper.
-
5:48
And for our legend, is Continent.
-
5:52
Okay, I see one thing here that we can do to improve our code a bit.
-
5:56
Notice the same tools are being used in this chart.
-
5:59
Let's re-factor that out to make it cleaner and more maintainable.
-
6:03
Let's go back up here.
-
6:09
And make it tool tips.
-
6:14
And just cut that whole thing.
-
6:18
Paste it in there.
-
6:24
Now we can use that for all of our tools.
-
6:36
There!
-
6:37
That's much cleaner.
-
6:38
And now when we call our show method to display our charts,
-
6:41
we can use the features of bokeh.layouts and display our charts in rows, columns,
-
6:45
or a combination.
-
6:46
Let's do rows here.
-
6:48
So row(plot, plot_birth_rate,
-
6:53
plot_death_rate).
-
6:59
Now we run our script.
-
7:03
It looks like I made a typo someplace, let's go take a look.
-
7:12
All right, and let's start on here again and there we have it.
-
7:18
Well, we do have some horizontal strolling but its all there.
-
7:24
Let's change what we are passing into our show method, so that we have a row that
-
7:28
includes a column of two of the plots, so that everything fits nicely on the screen.
-
7:39
So we'll have a column with plot and birth rate.
-
7:50
And a column of our death rate.
-
7:58
And we'll try running it again.
-
8:01
There, that looks much better.
-
8:03
No more horizontal scrolling.
-
8:05
Now as we look at our data here in our life expectancy chart,
-
8:08
when we start looking around again, we see that, wait a minute.
-
8:12
Our data isn't connected to each other.
-
8:14
Yes, well, that makes sense.
-
8:16
We haven't associated the plots with each other yet.
-
8:19
Since we are looking at these charts all based on population, and
-
8:22
all of those values are the same for
-
8:24
each data point, let's associate our graphs together, along the x axis here.
-
8:28
We do that by tapping in our figure objects x range value, and
-
8:33
equating them all to each other.
-
8:37
So plot_birth_rate, and we want the x_range.
-
8:46
We want that to be The same as the plot range.
-
8:56
And the plot_death_rate.x_range.
-
9:04
And actually, while we're here, Let's make
-
9:08
just the plot a little bit more meaningful, and
-
9:13
rename that plot_life_expect.
-
9:30
We'll update that everywhere.
-
9:49
Great, now all of our data is connected to each other through the population values.
-
9:56
And when we run our script again and zoom in on data in one of our charts,
-
10:04
Awesome, they all respond together, that's great.
-
10:09
You'll notice that our hover tools aren't providing great information
-
10:12
in the birth rate or death rate graphs.
-
10:16
I'll leave those tasks up to you to implement.
-
10:18
As it is just a matter of defining those tool tips like we did previously for
-
10:23
life expectancy.
-
10:24
Wow, this is great.
-
10:26
You've taken some data, stored it in a spreadsheet and have added a lot of
-
10:29
capabilities to visualize the data in a scatterplot, add color to your glyphs, and
-
10:35
add meaningful text and context to the data with legends and hover tool tips.
-
10:41
Then, to go even further, we've connected our plots
-
10:44
by using the same data to generate multiple charts and link them together.
-
10:48
This is a huge step towards visualizing our data and
-
10:51
been able to report our findings in a visually, interesting and meaningful way.
-
10:56
We're able to quickly and easily see multiple aspects of our data on
-
11:00
the same screen, in an interactive and quick way.
-
11:04
All by writing some Python code and using Bokeh to build our graphs for
-
11:09
us, and generate the necessary HTML, CSS and JavaScript.
-
11:14
For our next step, I want you to think about a different way in which
-
11:17
we can present our data using some of the plotting features available in in Bokeh
-
11:21
and integrating that with geospatial coordinate information.
-
11:26
This will take a little bit of work in Python itself, but
-
11:29
don't worry, we'll walk through the key points of the process.
-
11:33
So, let's take a break, and when we get back together,
-
11:36
let's have a look at how we can take our visualization even further.
You need to sign up for Treehouse in order to download course files.
Sign up