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