1
00:00:00,400 --> 00:00:03,156
We've made a lot of progress
with of our data visualization,

2
00:00:03,156 --> 00:00:04,801
from looking at a flat spreadsheet.

3
00:00:04,801 --> 00:00:08,998
And, I've been able to produce a nice
looking scatter plot based on our data,

4
00:00:08,998 --> 00:00:11,940
with continent specific colors and
a useful legend.

5
00:00:13,210 --> 00:00:17,130
We've also been able to add some
meaningful data, with our hover tool tips,

6
00:00:17,130 --> 00:00:19,780
to be able to gather
insights on each data point

7
00:00:19,780 --> 00:00:22,300
on our population versus
life expectancy chart.

8
00:00:23,510 --> 00:00:27,400
Our data set includes some other
potentially interesting data as well,

9
00:00:27,400 --> 00:00:33,080
like birth and death rates, land area and
amount of coastline a country has, if any.

10
00:00:33,080 --> 00:00:36,916
We can certainly alter our current plot to
utilize some of the other data points and

11
00:00:36,916 --> 00:00:38,370
plot them on a different page.

12
00:00:38,370 --> 00:00:42,004
However, what if we want to
see multiple charts together,

13
00:00:42,004 --> 00:00:43,681
all based on the same data.

14
00:00:43,681 --> 00:00:48,611
Bokeh provides a way to do that as well,
and since we are using column data source

15
00:00:48,611 --> 00:00:53,469
as our data type, our charts can be linked
together to allow for exploration in

16
00:00:53,469 --> 00:00:58,130
one chart, and have that simultaneously
update the other charts as well.

17
00:00:59,600 --> 00:01:02,480
We can have our charts displayed in rows,
columns, or

18
00:01:02,480 --> 00:01:04,890
even in separate tabs
depending on the use case for

19
00:01:04,890 --> 00:01:08,410
the data reporting or the sheer quantity
of charts needing to be displayed.

20
00:01:09,510 --> 00:01:13,000
In this video then, let's tap into
some of the other bits of data

21
00:01:13,000 --> 00:01:18,600
that we have in our county pops CSV file,
and show multiple charts on the same page.

22
00:01:18,600 --> 00:01:19,680
Let's head off to out editor,

23
00:01:19,680 --> 00:01:24,360
and take a look at how easy Bokeh
makes it to accomplish these tasks.

24
00:01:24,360 --> 00:01:26,120
In order to display additional charts,

25
00:01:26,120 --> 00:01:28,670
we need to think about how
they will be displayed.

26
00:01:28,670 --> 00:01:33,450
Bokeh allows us to display multiple
charts in rows with the row method,

27
00:01:33,450 --> 00:01:36,820
columns with the columns method,
or a combination of the two.

28
00:01:36,820 --> 00:01:40,660
We can bring that capability
in by importing column and

29
00:01:40,660 --> 00:01:43,730
or row from bokeh.layouts.

30
00:01:43,730 --> 00:01:44,730
And we'll bring both of them in.

31
00:01:46,440 --> 00:01:50,260
Now, we need to define our
additional figure objects.

32
00:01:50,260 --> 00:01:53,569
How about we generate one that looks
at population versus birth rate.

33
00:02:00,712 --> 00:02:05,086
Plot birth_rate, and

34
00:02:05,086 --> 00:02:12,540
the figure object (x_axis label),
and will be population.

35
00:02:17,254 --> 00:02:22,800
y_axis_label,

36
00:02:22,800 --> 00:02:27,159
Birth Rate.

37
00:02:27,159 --> 00:02:33,516
We'll give this one a title
of Population vs Birth Rate.

38
00:02:38,357 --> 00:02:40,337
And we want those tools again.

39
00:02:42,417 --> 00:02:48,997
pan, wheel_zoom, box_zoom,

40
00:02:48,997 --> 00:02:54,065
reset, hover, save.

41
00:02:54,065 --> 00:02:55,575
How about we create one as well?

42
00:02:58,309 --> 00:02:59,828
For population versus death rate.

43
00:03:10,343 --> 00:03:12,296
Again, the x-axis will be population.

44
00:03:20,127 --> 00:03:24,850
Death Rate title here will
be Population vs Death Rate.

45
00:03:33,150 --> 00:03:38,755
And we want this tool again,

46
00:03:38,755 --> 00:03:42,960
box_zoom, reset,

47
00:03:42,960 --> 00:03:46,710
hover, and save.

48
00:03:46,710 --> 00:03:50,580
And we need to assign the correct
data sources to each.

49
00:03:50,580 --> 00:03:52,315
Further, let's use some different glyphs.

50
00:03:54,680 --> 00:03:59,340
For plot_birth_rate, let's use circle,
x will be Population.

51
00:04:03,755 --> 00:04:04,657
Y is Birthrate.

52
00:04:08,494 --> 00:04:11,421
Our source is still the same
source from our country data.

53
00:04:13,872 --> 00:04:21,444
We'll make this size 10, Our color is
gonna be our same dict that we had before.

54
00:04:31,928 --> 00:04:33,324
And we'll use the same color mapper.

55
00:04:37,349 --> 00:04:42,480
And our legend here, will be Continent.

56
00:04:46,580 --> 00:04:47,644
And mapper has two p's.

57
00:04:52,302 --> 00:04:59,598
All right, for death_rate,
let's make that a triangle.

58
00:05:09,317 --> 00:05:10,580
And we want that to be Death Rate.

59
00:05:12,720 --> 00:05:15,696
Our source again is our country data.

60
00:05:19,499 --> 00:05:24,743
And now it looks like I forgot a closing,
There.

61
00:05:29,650 --> 00:05:30,936
Size again will be 10.

62
00:05:38,830 --> 00:05:48,300
And the color is the same, color_mapper.

63
00:05:48,300 --> 00:05:52,358
And for our legend, is Continent.

64
00:05:52,358 --> 00:05:56,360
Okay, I see one thing here that we
can do to improve our code a bit.

65
00:05:56,360 --> 00:05:59,450
Notice the same tools
are being used in this chart.

66
00:05:59,450 --> 00:06:02,074
Let's re-factor that out to make
it cleaner and more maintainable.

67
00:06:03,757 --> 00:06:04,654
Let's go back up here.

68
00:06:09,727 --> 00:06:10,707
And make it TOOLTIPS.

69
00:06:14,708 --> 00:06:16,288
And just cut that whole thing.

70
00:06:18,346 --> 00:06:19,282
Paste it in there.

71
00:06:24,755 --> 00:06:28,910
Now we can use that for all of our tools.

72
00:06:36,520 --> 00:06:37,230
There!

73
00:06:37,230 --> 00:06:38,710
That's much cleaner.

74
00:06:38,710 --> 00:06:41,320
And now when we call our show
method to display our charts,

75
00:06:41,320 --> 00:06:45,103
we can use the features of bokeh.layouts
and display our charts in rows, columns,

76
00:06:45,103 --> 00:06:46,760
or a combination.

77
00:06:46,760 --> 00:06:48,380
Let's do rows here.

78
00:06:48,380 --> 00:06:53,070
So row(plot, plot_birth_rate,

79
00:06:53,070 --> 00:06:56,150
plot_death_rate).

80
00:06:59,719 --> 00:07:00,970
Now we run our script.

81
00:07:03,428 --> 00:07:06,088
It looks like I made a typo someplace,
let's go take a look.

82
00:07:12,882 --> 00:07:18,823
All right, and let's start on
here again and there we have it.

83
00:07:18,823 --> 00:07:23,160
Well, we do have some horizontal
scrolling but it's all there.

84
00:07:24,320 --> 00:07:28,358
Let's change what we are passing into our
show method, so that we have a row that

85
00:07:28,358 --> 00:07:32,667
includes a column of two of the plots, so
that everything fits nicely on the screen.

86
00:07:39,337 --> 00:07:43,122
So we'll have a column with plot and
birth rate.

87
00:07:50,708 --> 00:07:53,337
And a column of our death rate.

88
00:07:58,439 --> 00:07:59,670
And we'll try running it again.

89
00:08:01,910 --> 00:08:03,800
There, that looks much better.

90
00:08:03,800 --> 00:08:05,590
No more horizontal scrolling.

91
00:08:05,590 --> 00:08:08,552
Now as we look at our data here
in our life expectancy chart,

92
00:08:08,552 --> 00:08:12,860
when we start looking around again,
we see that, wait a minute.

93
00:08:12,860 --> 00:08:14,840
Our data isn't connected to each other.

94
00:08:14,840 --> 00:08:16,550
Yes, well, that makes sense.

95
00:08:16,550 --> 00:08:19,120
We haven't associated
the plots with each other yet.

96
00:08:19,120 --> 00:08:22,290
Since we are looking at these
charts all based on population, and

97
00:08:22,290 --> 00:08:24,060
all of those values are the same for

98
00:08:24,060 --> 00:08:28,700
each data point, let's associate our
graphs together, along the x axis here.

99
00:08:28,700 --> 00:08:33,420
We do that by tapping into our
figure objects x range value, and

100
00:08:33,420 --> 00:08:34,850
equating them all to each other.

101
00:08:37,810 --> 00:08:44,904
So plot_birth_rate, and
we want the x_range.

102
00:08:46,630 --> 00:08:54,080
We want that to be the same
as the plot range.

103
00:08:56,584 --> 00:08:59,141
And the plot_death_rate.x_range.

104
00:09:04,115 --> 00:09:08,793
And actually, while we're here, let's make

105
00:09:08,793 --> 00:09:13,543
just the plot a little
bit more meaningful, and

106
00:09:13,543 --> 00:09:17,121
rename that plot_life_expect.

107
00:09:30,324 --> 00:09:31,917
We'll update that everywhere.

108
00:09:49,839 --> 00:09:56,005
Great, now all of our data is connected to
each other through the population values.

109
00:09:56,005 --> 00:10:00,806
And when we run our script again and
zoom in on data in one of our charts,

110
00:10:04,761 --> 00:10:07,850
Awesome, they all respond together,
that's great.

111
00:10:09,580 --> 00:10:12,960
You'll notice that our hover tools
aren't providing great information

112
00:10:12,960 --> 00:10:14,850
in the birth rate or death rate graphs.

113
00:10:16,050 --> 00:10:18,550
I'll leave those tasks
up to you to implement.

114
00:10:18,550 --> 00:10:23,389
As it is just a matter of defining those
tool tips like we did previously for

115
00:10:23,389 --> 00:10:24,648
life expectancy.

116
00:10:24,648 --> 00:10:26,820
Wow, this is great.

117
00:10:26,820 --> 00:10:29,770
You've taken some data, stored it in
a spreadsheet and have added a lot of

118
00:10:29,770 --> 00:10:35,690
capabilities to visualize the data in a
scatterplot, add color to your glyphs, and

119
00:10:35,690 --> 00:10:41,000
add meaningful text and context to
the data with legends and hover tool tips.

120
00:10:41,000 --> 00:10:44,430
Then, to go even further,
we've connected our plots

121
00:10:44,430 --> 00:10:48,570
by using the same data to generate
multiple charts and link them together.

122
00:10:48,570 --> 00:10:51,840
This is a huge step towards
visualizing our data and

123
00:10:51,840 --> 00:10:55,610
been able to report our findings in a
visually, interesting and meaningful way.

124
00:10:56,620 --> 00:11:00,730
We're able to quickly and
easily see multiple aspects of our data on

125
00:11:00,730 --> 00:11:04,120
the same screen,
in an interactive and quick way.

126
00:11:04,120 --> 00:11:09,572
All by writing some Python code and
using Bokeh to build our graphs for

127
00:11:09,572 --> 00:11:14,374
us, and generate the necessary HTML,
CSS and JavaScript.

128
00:11:14,374 --> 00:11:17,829
For our next step, I want you to
think about a different way in which

129
00:11:17,829 --> 00:11:21,967
we can present our data using some of the
plotting features available in in Bokeh

130
00:11:21,967 --> 00:11:25,390
and integrating that with
geospatial coordinate information.

131
00:11:26,390 --> 00:11:29,120
This will take a little bit
of work in Python itself, but

132
00:11:29,120 --> 00:11:31,930
don't worry, we'll walk through
the key points of the process.

133
00:11:33,280 --> 00:11:36,460
So, let's take a break, and
when we get back together,

134
00:11:36,460 --> 00:11:40,060
let's have a look at how we can take
our visualization even further.