GridPlot Layout

Interactive Data Visualization With Bokeh and Python Christopher Bailey 05:23

In this video you will explore Bokeh’s gridplot layout. Instead of using column or row you may want to use gridplot instead. One key difference of gridplot is that it will automatically consolidate the toolbar across all of its children figures.

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

File: EastWestGridplot.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 gridplot

# Import the data
from read_nba_data import standings

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

# Reduce the width of both figures
east_fig.plot_width = west_fig.plot_width = 300

# Edit the titles
east_fig.title.text = 'Eastern Conference'
west_fig.title.text = 'Western Conference'

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

# Configure the gridplot
east_west_gridplot = gridplot([[west_fig, east_fig]],
                              toolbar_location='right')

# Plot the two visualizations in a horizontal configuration
show(east_west_gridplot)

00:00 Instead of using column or row, you may just want to use gridplot instead. One key difference of gridplot is that it will automatically consolidate the toolbar across all of the children figures.

00:11 The last several visualizations haven’t had a toolbar, but if they did, each figure would have its own unique toolbar. That can be a little confusing with column or row. So in this case, we can have a single toolbar location, and then have it set to the right.

00:27 Let’s see what this looks like. Copy EastWestTop2.py, and paste,

00:36 and rename it EastWestGridplot. Okay. EastWestGridplot is still going to use a lot of the same stuff that you’ve used up to this point in the Bokeh libraries.

00:50 It’s still going to output to a file, and you’re still going to use figure() and show(), but from bokeh.layouts, instead of using column or row, as you did in the last examples, you’re going to import gridplot instead.

01:02 You’re still bringing in the same data, and the output file is going to get renamed now to 'east_west_top_2_gridplot.html'. And the title can say the same.

01:14 Okay. You’re still creating a ColumnDataSource from standings, and you’re still needing to create the celtics_view, raptors_view, rockets_view, and warriors_view, creating those column data source views using the GroupFilter as you’ve done in the previous couple examples.

01:31 You’re still going to need create the east_fig and the west_fig, so that’s already been done, and then you still need to render the race with the step lines. This all looks good, but you’re going to make a single change to the figures here. For east_fig, change the plot_width and the west_fig plot_width to both be equal to 300.

02:00 And then the other thing you need to do for these figures is add a title.

02:22 And you’re still rendering the race using the same east_fig.step() on both of those for the 'Celtics' and the 'Raptors'.

02:30 And then the same for the west_fig, creating the two step lines for the 'Rockets' and the 'Warriors'. And then the .legend will remain the same.

02:37 But the last thing you’re going to do, the last change you’re going to make, is make a new object east_west_gridplot. It will be equal to a gridplot() object,

02:50 and inside of that, you’re going to have west_fig and east_fig. And then the other thing you need to set up here… This time you’ll have a toolbar_location, which you’ll set to 'right'.

03:02 So instead of showing the rows of the columns here, you’re simply going to show east_west_gridplot. Okay. So, the changes you’ve made—not that different. Again, you’re importing the gridplot.

03:14 You changed the name of the output file and the title slightly. Actually, you didn’t change the title, you just changed the output file to be 'gridplot'.

03:21 This stayed the same, all the CDS information, east_fig and west_fig stayed the same, except for you added a standardized plot_width for both of them to be 300, and then you’ve set the .title.text to 'Eastern Conference' for the east_fig and 'Western Conference'—uh, a mistake—for the west_fig. Okay, caught that. And then you get your step lines for both East and West, and here you have your .legend for both.

03:51 Here you’re configuring the gridplot.

03:58 And right now, the matrix that’s been set up here is simply the two of these in a single row together, west_fig and east_fig. Okay. With that saved, you can run this script.

04:13 And here you go. You’ve got Western Conference and Eastern Conference and you have your shared toolbar on the side here. Nice!

04:22 Compared to this, get it all together in one grid. So one of the things that you could do is gridplot() allows you to pass a None value, which would be interpreted as a blank subplot.

04:35 So if you wanted to leave a placeholder for additional plots, then you could do something like this, where you could set up the first pair to be [west_fig, None], and then have a second pair that will say [None, east_fig], which would be kind of interesting. So, what would that look like? Well, you’ll have west_fig and None on this top row, and then on the second row you would have—I could show it like this, I guess—you would have no image and then east_fig. Okay.

05:05 So, save that and see what that looks like instead. Run the same script. So, it’s leaving these two gaps here. It looks better the other way, but just to show you conceptually things that you can do with a gridplot.

05:17 Next up, you’ll get to try a tabbed layout with panels.

Pygator on Aug. 18, 2019

How come in the filters kwarg you have to put everything in [ ] first. and how come we need [ [ ] ] for gridplot? Seems like code redundancy.

Chris Bailey RP Team on Aug. 19, 2019

Hi Pygator, The Filter method is expecting a list, even though you are giving it a list with a single item. If you were to remove the [ ] you will raise a ValueError exception ValueError: expected an element of List(Instance(Filter)) Link to Filter in the bokeh documentation

The gridplot is expecting a nested list to indicate the positions for your plots. The first example is only using the first row, with both plots as a list nested together. Link to layouts in bokeh docs

Pygator on Aug. 19, 2019

Thanks for the help with that notation. I guess it makes more sense if you think about applying multiple filters with the list.

toigopaul on Aug. 26, 2024

I had to change

east_fig.plot_width = west_fig.plot_width = 300

east_fig.frame_width = west_fig.frame_width = 300

Become a Member to join the conversation.