Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Hint: You can set your subtitle preferences in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please refer to our video player troubleshooting guide for assistance.

Multiple Visualizations Using Column Layout

Christopher Bailey
Interactive Data Visualization in Python With Bokeh Christopher Bailey 07:59
Recommended Tutorial Course Slides (PDF) Ask a Question

In this lesson you start by creating a companion visualization to the WestConfTop2.py visualization named EastConfTop2.py. Now that you have multiple visualizations created, you will combine them into a single script and a single visualization using layouts. You will try out Bokeh’s column and row methods from the bokeh.layouts.

Check out Bokeh’s User Guide for more information on layouts.

File: EastConfTop2.py

Python 
# Bokeh libraries
from bokeh.io import output_file
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CDSView, GroupFilter

# Import the data
from read_nba_data import standings

# Output to static HTML file
output_file('east_top_2_standings_race.html',
            title='Eastern Conference Top 2 Teams Wins Race')

# Create a ColumnDataSource
standings_cds = ColumnDataSource(standings)

# Create view for each team
celtics_view = CDSView(source=standings_cds,
                       filters=[GroupFilter(column_name='teamAbbr', group='BOS')])
raptors_view = CDSView(source=standings_cds,
                        filters=[GroupFilter(column_name='teamAbbr', group='TOR')])

# Create and configure the figure
east_fig = figure(x_axis_type='datetime',
                  plot_height=300, plot_width=600,
                  title='Eastern Conference Top 2 Teams Wins Race, 2017-18',
                  x_axis_label='Date', y_axis_label='Wins',
                  toolbar_location=None)

# Render the race as step lines
east_fig.step('stDate', 'gameWon',
              source=standings_cds, view=celtics_view,
              color='#007A33', legend='Celtics')
east_fig.step('stDate', 'gameWon',
              source=standings_cds, view=raptors_view,
              color='#CE1141', legend='Raptors')

# Move the legend to the upper left corner
east_fig.legend.location = 'top_left'

# Show the plot
show(east_fig)

File: EastWestTop2.py

Python 
# Bokeh libraries
from bokeh.io import output_file
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CDSView, GroupFilter
from bokeh.layouts import column, row

# Import the data
from read_nba_data import standings

# Output to static HTML file
output_file('east__west_top_2_standings_race.html',
            title='Conference Top 2 Teams Wins Race')

# Create a ColumnDataSource
standings_cds = ColumnDataSource(standings)

# Create view for each team
celtics_view = CDSView(source=standings_cds,
                       filters=[GroupFilter(column_name='teamAbbr', group='BOS')])
raptors_view = CDSView(source=standings_cds,
                        filters=[GroupFilter(column_name='teamAbbr', group='TOR')])
rockets_view = CDSView(source=standings_cds,
                        filters=[GroupFilter(column_name='teamAbbr', group='HOU')])
warriors_view = CDSView(source=standings_cds,
                        filters=[GroupFilter(column_name='teamAbbr', group='GS')])

# Create and configure the figure
east_fig = figure(x_axis_type='datetime',
                  plot_height=300,
                  x_axis_label='Date', 
                  y_axis_label='Wins',
                  toolbar_location=None)

west_fig = figure(x_axis_type='datetime',
                  plot_height=300,
                  x_axis_label='Date', 
                  y_axis_label='Wins',
                  toolbar_location=None)

# Render the race as step lines
east_fig.step('stDate', 'gameWon',
              source=standings_cds, view=celtics_view,
              color='#007A33', legend='Celtics')
east_fig.step('stDate', 'gameWon',
              source=standings_cds, view=raptors_view,
              color='#CE1141', legend='Raptors')
west_fig.step('stDate', 'gameWon',
              source=standings_cds, view=rockets_view,
              color='#CE1141', legend='Rockets')
west_fig.step('stDate', 'gameWon',
              source=standings_cds, view=warriors_view,
              color='#006BB6', legend='Warriors')

# Move the legend to the upper left corner
east_fig.legend.location = 'top_left'
west_fig.legend.location = 'top_left'

# Show the plot
show(column(west_fig, east_fig))

00:01 It’s time to show multiple visualizations, and that will require practicing with layouts. I’m going to have you take the file that you’ve already created, WestConfTop2.py, and make a copy of it.

00:14 To do that, I’m going to copy it and paste it here. Here it renamed it WestConfTop3. Go ahead and rename it. It’s still the top 2, but it’ll be the Eastern Conference, so EastConfTop2. Now that it’s open, it’s going to have a lot of the similarity with WestConfTop2.

00:34 It starts out the same, so hence why we’re just using a copy of it. And then here, a couple of quick things. Put the east_top_2_standings, the new title 'Eastern Conference Top 2 Teams Win Race'. Here, you’re going to use a completely different DataFrame that you’re going to put into the ColumnDataSource. Instead of using the one that got created in the NBA data file, where you were doing filtering to create just that west_cds—instead, you’re going to go back to standings and create a standings_cds.

01:05 So if you remember, standings was all of the standings, all 5,000 or so rows of data inside of it. We’ll create that as our ColumnDataSource, this big fat DataFrame. And from that, you’ll create views inside there.

01:18 The two teams—the Celtics and the Raptors. So, to do the same thing here, we need to change this to standings_cds and then change it to column name abbreviations for… Oh, let me close this here.

01:39 The grouping for the Celtics is 'BOS', for Boston, and the one for the Raptors is 'TOR'. Great! You’ve got a celtics_view and a raptors_view, both of them pulling from standings_cds, which is a ColumnDataSource created out of standings. What’s different? Well, instead of a west_fig, you’ll make an east_fig. The figure is going to be basically the same with a change here to 'Eastern Conference Top 2', and then here again, changing east.

02:05 Okay. So, a couple other quick changes.

02:11 We have the 'Celtics' and the celtics_view, and then change the color. Enter in the hexadecimal code '#007A33'. raptors_view, the legend will be 'Raptors'.

02:27 And the color. Great! Columns will remain the same. Again, one other change here—the source is from standings_cds. Okay.

02:37 So let me make sure this is clear. You created an east_fig figure. It uses the same 'datetime' for the x-axis, same plot width, and height. You changed the title to 'Eastern Conference'. 'Date', 'Wins', and the toolbar is still None. east_fig.step(), again using a step line method.

02:54 And then you’re using these columns. The source is standings_cds with a view of celtics_view that you created here.

03:03 And then the same thing’s happening, the legend='Celtics', and then east_fig.step() creating one for the Raptors. Okay. You need to modify the east_fig.legend.location, and then you need to show it.

03:16 Okay. Let’s see this wins race. Save, and this time python3…

03:27 Okay. You can see the race between the Celtics here in green and the Raptors in red. Compare it to your visualization for the Western Conference. Nice! Now, these are two different tabs on two separate HTML files that you can see up here.

03:45 Now that you’ve built two visualizations, it’s time to put them together. The functionality is similar to Matplotlib’s, subplot. Bokeh offers the column, row, and gridplot functions in its bokeh.layouts module.

03:58 These functions can be generally classified as layouts. The usage is very straightforward. If you want to put two visualizations in a vertical configuration, you would use column. Let’s try that out. To do that, I’m going to go ahead and have you copy EastConfTop2

04:17 and paste it in this file. I’ll have you rename and will be the EastWestTop2. It’s going to start out very similarly. You’ll need to add one more import from Bokeh, and that’s bokeh.layouts, and import column.

04:32 And I think it might be useful to show you row as another alternative to that too. In this first example, though, I’ll have you use column.

04:39 You’re still importing the same NBA data, and you’re still using the same ColumnDataSource that you were using before. And in this case, it’s going to be called 'east__west_top_2_standings_race.html'.

04:48 That’ll be the static HTML file that you’re going to create. And in this case, it will be the 'Conference Top 2 Teams Win Race'. That’ll be the title. Okay.

04:58 You need to create two more views for the two other teams, Rockets and Warriors view. So for the rockets_view, it basically uses the same information here,

05:14 except it’s going to be grabbing the abbreviation of Houston. Let me hide this here.

05:20 And for the warriors_view, the grouping abbreviation is 'GS'. So now you’ve grabbed four different CDSViews, creating celtics_view, raptors_view, rockets_view, and warriors_view. You have an Eastern figure.

05:35 In fact, I’ll have you modify it a little bit. Remove the plot_width. For this example, you don’t need a title. Don’t forget the comma here. And the rest looks good, but you need another figure that has all the same stuff, but this will be the west_fig.

05:52 So create another figure with the same set of parameters going into it here. So, you’ve created this new instance of figure(), x_axis_type, same plot_height, and the rest of the parameters you keep the same. Okay.

06:05 So then you’re doing kind of a similar step lines thing here. You’ve got the two step lines happening for the Celtics and the Raptors, and now you need to create two more step lines,

06:17 but they’ll be for west_fig. The first one will be rockets_view with a legend='Rockets', and a color of the same.

06:31 And now you need the other west_fig.step().

06:38 For this one, it will be warriors_view, the legend will be 'Warriors', and a color='#006BB6'.

06:46 So here’s your two step line glyphs that you’re adding to east_fig, and then west_fig, you’re adding these two step lines with the 'Rockets' and the 'Warriors'.

06:56 And the last thing to do is you need another legend, but this one would be for the west_fig. Oh, I’ve got an extra dot here. Okay, that all looks good! To show the plot, this is where you’re going to use the new tool of using the column. column() takes arguments into it. In this case, it will be the two figures. So east_fig or west_fig, whichever one you want first.

07:19 So let’s do west_fig and east_fig. So this column() is combining these two with show() calling column() inside of it.

07:27 Great. Save your script. And down here in the terminal, you’ll run the script.

07:34 And now you see the single column with the two different visualizations together. Nice! And you can kind of compare and contrast them. So, this is a column.

07:42 If you wanted them together in a single row, that’s an easy change. You would just call this here, changing it from column() to row().

07:51 And if you save again, let’s try it. And that puts them side-by-side. Okay. Let’s look at the grid layout next.

Become a Member to join the conversation.