Skip main navigation

Linking plots together

Learn how to link plots together

Plots can be linked together to provide a wholesome experience. In cases where we have to compare plots, we can show multiple plots together in rows or columns to make comparison easy.

Consider this example: When showing different facets of the same data across different plots, linking plots together can help by using the same range for each of their axes.

Graphic shows linking plots example. There are 3 charts stacked on top of each other. They share the same x-axis. From left to right it reads: Jul 31, Aug 07, Aug 14, Aug 21, Aug 28. Chart 1: y-axis from bottom to top reads: 10, 20. There are three plot lines: Green, Blue and Red. Chart 2: y-axis from bottom to top reads: 0.0, 2.5, 5.0, 7.5, 10.0. There are three plot lines: Green, Blue and Red. Chart 3: y-axis from bottom to top reads: 0, 250, 500, 750. There are three plot lines: Green, Blue and Red.Click to enlarge

To link the plots, begin with a normal figure and then reference the linked figure ranges from the original to achieve multiple plots together.

In this step, we will link different plots together with the help of demonstration on Jupyter Notebook using Bokeh. We will use three figures for this demonstration.

Demonstration: Linking plots together

Step 1

Link the axes. The first two axes will have their x-axes linked, so panning one will update the x-axis of the other. The second two will be linked on y-axes, so panning one updates the y-axis of the other.

Code:

x = [1, 2, 3, 4]
y0 = [10, 8, 6, 2]
y1 = [2, 9, 4, 7]
y2 = [3, 6, 1, 5]

scatter_plot = figure(plot_width=figure_width, plot_height=figure_height)
scatter_plot.scatter(x, y0, color="red")

Step 2

Next, the second figure will be linked on the x-axis only. We supply the x_range keyword argument when creating the figure, passing in the first plot’s x_range attribute.

Code:

line_plot = figure(plot_width=figure_width, plot_height=figure_height, x_range=scatter_plot.x_range)
line_plot.line(x, y0, color="blue")

Step 3

Finally the third figure will link on the y-axis by sharing the y_range with the second figure:

Code:

circle_plot = figure(plot_width=figure_width, plot_height=figure_height, y_range=line_plot.y_range)
circle_plot.circle(x, y2, color="green", size=20)

Step 4

Now, plot the figures in a row.

Code:

show(row(scatter_plot, line_plot, circle_plot))

Output:

Screenshot from Jupyter Notebook that shows linking of multiple plots together. We see 3 different plot charts next to each other. The all have the same x-axis and y-axis formatting. The first has small plot points. The second is a line that connects those plot points. The third has 4 green dots. On the top right of each chart there is the edit section where their 4-way arrows are highlighted.Click to enlarge

Learn more about linking multiple plots by reading the following:

Read: Linking plots [1]

What do you observe?

Looking at the outputs, what do you think of the plot now? Is it much easier to understand the comparison among the three figures? Would you still prefer these plots shown as separate figures?

Share your thoughts in the comment section below.

References

  1. Linking Behavior [Document]. Bokeh; [date unknown]. Available from: https://docs.bokeh.org/en/latest/docs/user_guide/interaction/linking.html
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