Locked learning resources

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

Unlock This Lesson

Locked learning resources

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

Unlock This Lesson

Tabbed Layout With Panels

Christopher Bailey
Interactive Data Visualization With Bokeh and Python Christopher Bailey 04:10
Recommended Tutorial Course Slides (PDF) Ask a Question

In this video you will allow your users to toggle between both visualizations at their full size without having to squash them down to fit next to or on top of each other, using a tabbed layout.

A tabbed layout consists of two Bokeh widget functions: Tab() and Panel() from the bokeh.models.widgets sub-module. Like using gridplot(), making a tabbed layout is pretty straightforward.

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

File: EastWestTabbed.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.models.widgets import Tabs, Panel

# Import the data
from read_nba_data import standings

# Output to static HTML file
output_file('east_west_top_2_tabbed_layout.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)

# Increase the plot widths
east_fig.plot_width = west_fig.plot_width = 800

# 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'

# Create two panels, one for each conference
east_panel = Panel(child=east_fig, title='Eastern Conference')
west_panel = Panel(child=west_fig, title='Western Conference')

# Assign the panels to Tabs
tabs = Tabs(tabs=[west_panel, east_panel])

# Show the tabbed layout
show(tabs)

00:00 If you’d rather toggle between both visualizations at their full size without having to squash them down to fit next to or on top of each other, a good option is a tabbed layout. Tabbed layouts consists of two functions.

00:11 You’re going to import, from models.widgets, Tabs and Panel. Then you create instances of Panel, like in this example where I’ve created two.

00:20 The two panels accept a child of a figure, along with a title, and then they’re gathered together into an instance of Tabs.

00:27 The Tabs() then has arguments for the panels that are inside of it. And last, you show them. Let’s try it out. In an example, to start the process, you do something familiar—make a copy of EastWestGridplot, and paste, and then rename it EastWestTabbed.

00:48 The beginning of the file starts out very similarly. The changes you’re going to make—you’re still going to output to a file, you’re going to use the plotting for figure() and show().

00:56 You’re going to keep using all of the ColumnDataSource, CDSView, and GroupFilter. But from here, under layouts, you’re going to import something completely different. From models.widgets you’re going to import Tabs and a Panel.

01:13 Okay. Again, you’re importing the data, output_file() here is going to be 'tabbed_layout' is the change, so 'east_west_top_2_tabbed_layout.html', title staying the same.

01:25 You’re still having the standings_cds and all the views that you have created in all the previous ones. Here you’ve created your east_fig and west_fig.

01:34 That still is fine. Here, I’m going to have you change the .plot_width. You might remember combining these together and changing them to be a smaller object.

01:41 This time, you want a full-size width, so set it to 800. And then from here, remove this set of titles, and you’re still going to keep the step lines showing the race, and the same .legend from can stay. The difference is going to be here.

01:57 Instead of configuring a gridplot,

02:02 you’re going to create two panels. So an east_panel, which will be a Panel(). The child for the Panel() will be east_fig. Its title will be 'Eastern Conference'.

02:17 west_panel looks very similar, so copy and paste that line. Just change the word east to west in both these spots. Great.

02:27 So from here, the next step is to make the set of tabs. So make an object tabs that will be Tabs(). You’re creating a panel widget, and then the tabs inside that will be equal to the west_panel and the east_panel.

02:45 So, the tabs object is an instance of Tabs. Its arguments are tabs= this list with the two panels, [west_panel, east_panel].

02:55 Great! So then to show, you’re going to show(tabs).

03:06 We’re going to change one other thing.

03:10 You’re increasing the plot widths.

03:15 Changes you’ve made. You’re importing Tabs and Panel From models.widgets library. You changed the name of the output file HTML.

03:24 All this other data stays the same, up until where you changed the plot widths to 800. The figures stay the same, legends stay the same. Then you’re creating the two panels—one for east_fig, one for west_fig, with their two titles.

03:41 You’re creating a set of Tabs with these two panels inside, and then you’re showing. So, this all looks good. Okay. Run this script.

03:54 Here you go! It starts out with the Western Conference tab first, and then you simply tap on the tab to switch between the two. And depending on how many panels you want, you could create a large list of tabs. All right!

04:06 Fantastic. Now it’s time for a review of all the stuff that you’ve covered in Section 2.

Avatar image for rbtmaldonado

rbtmaldonado on June 13, 2023

Seems that now we need to use TabPanel and import only from models:

from bokeh.models import Tabs, TabPanel

Become a Member to join the conversation.