In the previous chapters we started to learn how to create single plots using differnet kinds of data. But we often want to plot more than one thing. Bokeh plots can be individually embedded in HTML documents, but it's often easier to combine multiple plots in one of Bokeh's built-in layouts. We will learn how to do that in this chapter.
from bokeh.io import output_notebook, show
from bokeh.plotting import figure
import numpy as np
#nbi:hide_out
# Make all outputs INLINE for default (why a hell this is needed !!!)
output_notebook()
The cell below defines a few data variables we will use in examples.
x = list(range(11))
y0, y1, y2 = x, [10-i for i in x], [abs(i-5) for i in x]
The bokeh.layouts modules provides the row and column functions to arrange plot objects in vertical or horizontal layouts. Below is an example of three plots arranged in a row.
from bokeh.layouts import row
# create a new plot
s1 = figure(
width=250,
plot_height=250
)
s1.circle(
x,
y0,
size=10,
color="navy",
alpha=0.5
)
# create a 2nd one
s2 = figure(
width=250,
plot_height=250
)
s2.triangle(
x,
y1,
size=10,
color="firebrick",
alpha=0.5
)
# create the 3rd one
s3 = figure(
width=250,
plot_height=250
)
s3.square(
x,
y2,
size=10,
color="olive",
alpha=0.5
)
# show the results in a row
show(
row(s1, s2, s3)
)
Bokeh also provides a gridplot layout in bokeh.layouts for arranging plots in a grid, as show in the example below.
from bokeh.layouts import gridplot
# create a new plot
s1 = figure(
width=250,
plot_height=250
)
s1.circle(
x,
y0,
size=10,
color="navy",
alpha=0.5
)
# # create a 2nd one
s2 = figure(
width=250,
plot_height=250
)
s2.triangle(
x,
y1,
size=10,
color="firebrick",
alpha=0.5
)
# create the 3rd one
s3 = figure(
width=250,
plot_height=250
)
s3.square(
x,
y2,
size=10,
color="olive",
alpha=0.5
)
# put all the plots in a gridplot
p = gridplot(
[
[s1, s2],
[s3, None]
],
toolbar_location=None
)
# show the results
show(p)