Skip main navigation

Advanced layouts

Learn more about advanced layouts

Now that we know how to create a layout using a different combination of rows and columns, let’s move on to understanding how to interact with the plot. Let’s explore the advanced features of the layout, such as widgets, size, and stretch.

Widgets

Widgets equip you with easy access to information without requiring you to open the page that administers this information. If you wish to create an interactive plot, you might want to add widgets to a graph (for instance: sliders, select menus, and buttons, etc.).

Consider this example: The weather widget, which provides you with a quick view of the temperature throughout the day without opening the weather application.

Image shows a mobile phone with widgets sitting on the home screen.

Sizing

Sometimes we don’t know the size of the plot that we would require in pixels. It can be useful to have properties that expand to fill up the horizontal and / or the vertical space available to it. In such cases, we can specify a sizing mode instead of specifying a width / height when creating the figure using the sizing_mode keyword argument.

Here, we will not use the gridplot function since it cannot be laid out as a plot. Instead, we will use the layout function, which supports mixing widgets and plots.

Let’s create a figure using sizing_mode to stretch_width

Demonstration: Sizing the layout

Step 1

Import layout from ‘bokeh.layouts’.

Code:

from bokeh.layouts import layout

Step 2

Set the sizing of the plot using ‘sizing_mode’.

Code:

wide_square_plot = figure(sizing_mode="stretch_width", plot_height=figure_height)
wide_square_plot.square([0], [0], size=20)

Step 3

Next, plot it in a grid on its own at the top, and two smaller plots underneath.

Code:

l = layout([
[wide_square_plot],
[circle_plot, triangle_plot]
])
show(l)

Stretch

The ‘sizing_mode’ keyword argument can also be used with the layout function to stretch or size the entire layout.

Consider this example: A sizing mode of ‘stretch_both’ to resize the whole layout as the browser window resizes.

Code:

l = layout([
[wide_square_plot],
[circle_plot, triangle_plot]
], sizing_mode="stretch_both")

Notice the layout is stretched to fit.

What do you observe?

When you used the sizing and stretching programs to change the layout of your visualisation on Bokeh on your Jupyter Notebook, what changes did you observe in your output?

Share your thoughts in the comments section below.

This article is from the free online

Data Visualisation with Python: Bokeh and Advanced Layouts

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education