Thu 09 June 2016
Column Layouts
by Sarah Bird
from bokeh import __version__
__version__
from bokeh.io import output_notebook, show
output_notebook()
When using the new layout Row & Column it's important that all responsive modes in a given layout are the same.
First we set-up a simple function to make a plot that we can re-use.
from bokeh.plotting import figure
def make_plot(responsive=False):
p = figure(responsive=responsive, width=400, height=100)
p.scatter(x=[1, 2], y=[3, 4], size=20)
return p
Let's set-up a Column with two plots in it, all with responsive=True
from bokeh.models import Column
RESPONSIVE = True
show(
Column(
make_plot(RESPONSIVE),
make_plot(RESPONSIVE),
responsive=RESPONSIVE
)
)
If you resize the notebook window, you'll see the plots resizing - but maintaining their aspect ratio.
Let's see what happens if we forget to set the responsive mode of the Column
RESPONSIVE = True
show(
Column(
make_plot(RESPONSIVE),
make_plot(RESPONSIVE),
)
)
In this case we see nothing! The Column is there but because of a strange interaction with the notebook output cell we can't actually see it.
Hopefully this highlights the importance of using the same mode.
Using layout function to save us some typing¶
The layout function automatically goes through and makes sure that everything has the same mode, saving us a bunch of time.
The layout column accepts a list of lists. We will also be adding row
and column
functions before 0.12 is released.
from bokeh.layouts import layout
show(layout([[make_plot()], [make_plot()]], responsive='width_ar'))
I had to use responsive='width_ar'
because responsive=True
isn't currently a valid value for the layout function - I've opened an issue for this (https://github.com/bokeh/bokeh/issues/4469). (Note that's we're also in the process of renaming the responsive modes - I'll update this post, when that's ready).