Skip main navigation

An introduction to layouts using Python

In this article, we introduce using layouts using Python, and explain how to make your designs noticeably appealing.

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]

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