Getting Your Figure Ready for Data

Interactive Data Visualization With Bokeh and Python Christopher Bailey 04:46

In this video you learn how to get you figure ready for data. The figure() object is not only the foundation of your data visualization but also the object that unlocks all of Bokeh’s available tools for visualizing data.

The code below explores just a few of the cusomization options available.

Here are some other helpful links on this topic:

The Bokeh Plot Class is the superclass of the figure() object, from which figures inherit a lot of their attributes.
The Figure Class documentation is a good place to find more detail about the arguments of the figure() object.

Here are a few specific customization options worth checking out:

Text Properties covers all the attributes related to changing font styles, sizes, colors, and so forth.
TickFormatters are built-in objects specifically for formatting your axes using Python-like string formatting syntax.

File: FirstFigure.py

Python
      
    
# Bokeh Libraries
from bokeh.io import output_file
from bokeh.plotting import figure, show

# The figure will be rendered in a static HTML file
# called output_file_test.html
output_file('output_file_test.html', 
            title='Empty Bokeh Figure')

# Example figure
fig = figure(background_fill_color='gray',
             background_fill_alpha=0.5,
             border_fill_color='blue',
             border_fill_alpha=0.25,
             plot_height=300,
             plot_width=500,
             # h_symmetry=True, This parameter has been deprecated
             x_axis_label='X Label',
             x_axis_type='datetime',
             x_axis_location='above',
             x_range=('2018-01-01', '2018-06-30'),
             y_axis_label='Y Label',
             y_axis_type='linear',
             y_axis_location='left',
             y_range=(0, 100),
             title='Example Figure',
             title_location='right',
             toolbar_location='below',
             tools='save')

# Remove the gridlines from the figure() object
fig.grid.grid_line_color = None

# See what it looks like
show(fig)

00:01 In this video, I’ll show you how to get your figure ready for data. The figure object will be the foundation of many of your scripts, but that figure object also unlocks many of Bokeh’s available tools for visualizing data. The Figure is a subclass of the Bokeh Plot object, which provides parameters for customizing the aesthetics of your figure. To give you a glimpse of what’s available for customization, I’ll have you create a new figure. Back inside Visual Studio Code, you can use your FirstFigure file, and inside of it, instead of typing all these lines, I’m going to paste this code in and then go over it line by line with you.

00:40 You’re welcome to type it in, or you can paste it in from the text just below this video. I’m pasting it over lines 9 and 10 here and you can follow along with me.

00:49 So, it’s instantiating the figure() again as fig. First off, you’re going to set up a background fill. That background fill color is going to be 'gray'.

00:59 And then you’re setting an alpha. An alpha is basically the level of transparency. It goes from 1.0 down to 0.0 as a float. Think of it as percentages.

01:08 So this is a 50% alpha, making it somewhat transparent. You’re setting a border fill color to be 'blue', and then the border fill alpha to be 0.25, 25%.

01:22 You’re setting up a plot height of 300 and a plot width of 500. Next, you’re setting the symmetry for horizontally to be True.

01:30 What this will do is set up the padding on both sides of the plot to make them to be equal. Then you’re setting up an x-axis label, just 'X Label', and then the type, which is 'datetime'.

01:42 The location for the x-axis is actually not going to be on the bottom of the figure, but actually above it. And then a range, which this is the first half of 2018.

01:51 Then setting up a y-axis label of 'Y Label', and then y-axis type of 'linear'. Its location is going to be on the left as opposed to the right.

02:02 This is typically the normal location for a y-axis. And then the y range will be from 0 to a 100, following a linear style. The title will be just generically 'Example Figure'.

02:12 And it’s going to be set on the right side, as opposed to, say, on the top.

02:17 And then the toolbar location—the toolbar, which we covered at the end of a previous video, will be below our image, which is kind of cool that you can set it on any of the sides that you’d like.

02:27 And then with the tools parameter, you can choose how many of the tools you would like to show. In this case, we’re only showing 'save'.

02:36 This will give you an idea of some of the things that you can possibly do inside of Bokeh, just to prepare before even putting data into it. Okay. I’m going to save. Here in the terminal after saving, run your script again. Here’s a new figure.

02:55 Again, you can see the X Label on the top, the Y Label on the left, the title on the right, and the toolbar on the bottom with the save menu.

03:04 And as we go through all these different options here, you can see a fill color of gray, you can see the border being blue, plot height and width, the X Label, setting it above as opposed to below—all these different things that you’ve set up inside of here.

03:22 Great! What if you want to customize some of it? Well, that’s possible. Even after the fact of creating that figure here and defining all of these elements inside of it, you can call individual items out.

03:35 Such as, let’s say, you don’t like these grid lines. They kind of bother you. Okay, great.

03:44 You can do that. To remove the grid lines from the object,

03:49 you start with the object fig and then .grid for the grid’s parameters.

03:56 You want to change the .grid_line_color, and set it to have no color, which is None. With that done, if you call the script again,

04:07 you’ll see that the grid lines now have disappeared.

04:10 There are so many different parameters that you can cover inside of all these things. You can see just for the y-axis, not only is it the label, the type, the location—there’s font, there’s sizes, there’s colors, and the Bokeh documentation goes into a lot of detail in all of those things.

04:28 This is just giving you an idea of some of the things that you can kind of dive into. The article that this tutorial is based upon goes in and gives links for the Bokeh Plot class, the Figure class, the text properties, and things like formatters for the different texts that we’re going to work with.

04:43 Let me have you start drawing some data in the next video.

Pygator on Aug. 18, 2019

you meant to import output_file in the example code. I’m already seeing a more recent version of the bokeh and how certain things have evolved like h_symmetry=True has been deprecated in my version of bokeh.

Chris Bailey RP Team on Aug. 21, 2019

Thanks for the note. I’m getting the output_file change made. Yes, it looks like they are moving along toward a version 2.

Ikones on Sept. 10, 2019

Thank you both. So what else should we use nowadays instead of h_symmetry=True for example, please?

Looking very much forward to the the update. (and aware it will take some time :-)

Ikones on Sept. 10, 2019

I am looking for the most efficient way to define a font-family for a whole figure or even plot (rather than doing it individually for the title etc. ) . Would you have any recommendations for me please?

Matteo Niccoli on Feb. 12, 2020

I am a bit confused. If x_range is set to 1/2 of the year 2018, how come the X label goes from 0 to 2000 microseconds? Is it because there’s no data plotted?

Chris Bailey RP Team on Feb. 13, 2020

Hi @Matteo Niccoli,

You are right, without data to plot it has put up microseconds.

Matteo Niccoli on Feb. 13, 2020

THanks Chris. Great tutorial so far

Simo on Nov. 18, 2020

The Code doesn’t work in Jupyter Notebook.

CSW on Jan. 27, 2021

So far this whole tutorial nothing works for me at all. Everything I follow, all the code is just wrong.

Chris Bailey RP Team on Jan. 27, 2021

Hi CSW,

Sorry you are having issues with the course.

Bokeh as a framework is a moving target. It looks like they have removed the h_symmetry figure parameter completely.

If you remove that line from the figure parameters, it should render to an html file. I have tested it just now with the most recent version of Bokeh. I will update the code in the description. I will also discuss with Dan about an update to the course.

ᛖᛁᚱᛁᚲ ᛏᚱᛁᛒᛒᛚᛖ on Dec. 21, 2023

height=300, # Use height instead of plot_height width=500, # Use width instead of plot_width

Ranga on April 7, 2024

Tested these parameters in Bokeh 3.4.0.

fig = figure(
    background_fill_color='gray',
    background_fill_alpha=0.5,
    border_fill_color='blue',
    border_fill_alpha=0.25,
    height=300,  # plot_height throws AttributeError
    width=500,  # plot_width throws AttributeError
    # h_symmetry=True, This parameter has been deprecated
    x_axis_label='X Label',
    x_axis_type='datetime',
    x_axis_location='above',
    x_range=('2018-01-01', '2018-06-30'),
    y_axis_label='Y Label',
    y_axis_type='linear',
    y_axis_location='left',
    y_range=(0, 100),
    title='Example Figure',
    title_location='right',
    toolbar_location='below',
    tools='save'
)

Become a Member to join the conversation.