Skip main navigation

Introduction to layouts

Learn more about layouts

Download your Notebook

Before you start this activity, download your accompanying Jupyter Notebook containing explanations and codes in cells that you can run to receive outputs.

The Notebook contains only the code snippets that you can run to get an immersive and interactive experience as well as instant results of the codes alongside the explanations.

Make the best use of this opportunity to familiarise yourself with using the Notebook.

Download: Layouts Interactions and Annotations

At the end of this step, you will find an interesting activity to check your knowledge!

What are layouts?

The layout provides meaning to your design and makes it look noticeably appealing. It helps to maintain balance from page to page. Grids are an essential component of the layout design, as they support all layouts, infographics, and presentations incredibly well. Layout design comprises one grid or a group of grids, depending on the requirements.

Graphic shows examples of different 1 grid layouts. There are 20 templates. These templates are New screen, 1 column, 2 cloumns, 3 columns, 4 columns, 2 rows, 3 rows, 4 rows, 5 rows, 6 rows, Large grid, Small grid, Mosaic 1, Mosaic 2, Mosaic 3, Mosaic 4, Mosaic 5, Mosaic 6, Mosaic 7, Mosaic 8.Click to enlarge

So far, we have only shown one figure at a time with Bokeh. However, we can use custom layouts to group them into rows and / or columns.

Previously in Matplotlib, you generated the number of rows and columns when you first drew the figure and axes. However, with Bokeh, you start with plots and then choose how they are to be laid out when displayed. In this step, we will use Bokeh in Python and see examples as demonstrations of how to layout plots using rows and columns.

Creating rows and columns

To start with, let us try laying out plots in a single row with multiple columns, using the row function. This is imported from bokeh.layouts.

Demonstration: Single row with multiple columns

Step 1

Import figure from Bokeh layouts.

Code:

from bokeh.plotting import figure, output_notebook, show
from bokeh.layouts import row
output_notebook()
figure_width = 300
figure_height = 400

Output:

BokehJS 2.2.3 successfully loaded

Step 2

Select multiple arguments (one or more plots or other layouts) to arrange into a row.

Code:

square_plot = figure(plot_width=figure_width, plot_height=figure_height)
circle_plot = figure(plot_width=figure_width, plot_height=figure_height)
triangle_plot = figure(plot_width=figure_width, plot_height=figure_height)

square_plot.square([0], [0], size=20)
circle_plot.circle([1], [1], size=30)
triangle_plot.triangle([2], [2], size=30)

Step 3

Arrange them into a single row using the row function.

Code:

r1 = row(square_plot, circle_plot, triangle_plot)
show(r1)

Output:

Screenshot from Jupyter Notebook that shows plots in a single row and multiple columns. There are three plots. On the top right of all the plots, there is an edit section where there is a 4-way arrow that is highlighted. Plot 1: X-axis from left to right reads: -1, -0.5, 0, 0.5, 1. Y-axis from bottom to top reads: -1, -0.5, 0.5, 1. There is one blue square on the cross section of 0(y) and 0(x). Plot 2: X-axis from left to right reads: 0, 0.5, 1, 1.5, 2. Y-axis from bottom to top reads: 0, 0.5, 1, 1.5, 2.. There is one blue circle on the cross section of 1(y) and 1(x). Plot 3: X-axis from left to right reads: 1, 1.5, 2, 2.5, 3. Y-axis from bottom to top reads: 1, 1.5, 2, 2.5, 3.. There is one blue triangle on the cross section of 2(y) and 2(x).Click to enlarge

Like rows, there are also columns, which are created the same way but which lay out the data in a single column with multiple rows.

Demonstration: Single column with multiple rows

Step 1

Import figure from Bokeh layouts.

Code:

from bokeh.layouts import column

Arrange them into a single column using the column function.

Code:

c1 = column(square_plot, circle_plot, triangle_plot)
show(c1)

Output:

Did you get an output where multiple rows are seen, one below the other, in a single column?

Demonstration: Single two-column layout with two rows

Since we already have a plot ready, just arrange them into a single two-column layout with two rows.

Code:

c2 = column(row(square_plot, circle_plot), row(circle_plot, triangle_plot))
show(c2)

Output:

Screenshot from Jupyter Notebook that shows plots in a Single two-column layout with two rows. There are four plots. On the top right of all the plots, there is an edit section where there is a 4-way arrow that is highlighted. On the top row are plots 1 and 2. Plot 1: X-axis from left to right reads: -1, -0.5, 0, 0.5, 1. Y-axis from bottom to top reads: -1, -0.5, 0.5, 1. There is one blue square on the cross section of 0(y) and 0(x). Plot 2: X-axis from left to right reads: 0, 0.5, 1, 1.5, 2. Y-axis from bottom to top reads: 0, 0.5, 1, 1.5, 2.There is one blue circle on the cross section of 1(y) and 1(x). On the bottom row are plots 3 and 4. Plot 3: X-axis from left to right reads: 0, 0.5, 1, 1.5, 2. Y-axis from bottom to top reads: 0, 0.5, 1, 1.5, 2.There is one blue circle on the cross section of 1(y) and 1(x). Plot 4: X-axis from left to right reads: 1, 1.5, 2, 2.5, 3. Y-axis from bottom to top reads: 1, 1.5, 2, 2.5, 3. There is one blue triangle on the cross section of 2(y) and 2(x).Click to enlarge

Gridplot layout

An alternative method to making grid plots is to use the gridplot layout function. In the previous operations, row and column used the sizes of the individual plots whereas the gridplot function allows overriding of these sizes with the use of the plot_width and plot_height keyword arguments, applying the sizes to each of the plots.

Demonstration: Gridplot layout

Step 1

Import gridplot from Bokeh layouts.

Code:

~~ python
from bokeh.layouts import gridplot
~~~

Step 2

Draw the plots into a two-by-two grid, fixing each plot’s size to 400 by 400. Leave a space in the bottom right plot.

Code:

g1 = gridplot([
[square_plot, circle_plot],
[None, triangle_plot]
],
plot_width=400,
plot_height=400
)
show(g1)

Output:

Screenshot from Jupyter Notebook that shows plots in grid style. The are three plots located on quadrants 1, 2, and 4. On the top of the chart there is an edit section where there is a 4-way arrow that is highlighted. Plot 1 is located on quadrant 2. Plot 1: X-axis from left to right reads: -1, -0.5, 0, 0.5, 1. Y-axis from bottom to top reads: -1, -0.5, 0.5, 1. There is one blue square on the cross section of 0(y) and 0(x). Plot 2 is located on quadrant 1. Plot 2: X-axis from left to right reads: 0, 0.5, 1, 1.5, 2. Y-axis from bottom to top reads: 0, 0.5, 1, 1.5, 2. There is one blue circle on the cross section of 1(y) and 1(x). Plot 3 is located on quadrant 4. Plot 3: X-axis from left to right reads: 1, 1.5, 2, 2.5, 3. Y-axis from bottom to top reads: 1, 1.5, 2, 2.5, 3. There is one blue triangle on the cross section of 2(y) and 2(x).Click to enlarge

Moving on, we will explore some attractive advanced layouts and sizing options. To learn more about layouts in Bokeh, read the resource provided below.

Read: Creating Layouts [1]

Did you notice?

Interpretation of layouts can vary. Which layout did you find the most meaningful and useful? Tell us why.

Share your thoughts in the comments section below.

References

  1. Creating Layouts [Document]. Bokeh; [date unknown]. Available from: https://docs.bokeh.org/en/latest/docs/user_guide/layout.html#userguide-layout
This article is from the free online

Data Visualisation with Python: Bokeh and Advanced Layouts

Created by
FutureLearn - Learning For Life

Reach your personal and professional goals

Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.

Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.

Start Learning now