Building Charts in Bokeh
Bokeh is a Python library that enables us to easily and quickly build different methods to visualize data interactively and dynamically.
Jan 14, 2020 • 13 Minute Read
Introduction
Bokeh is a Python library that enables us to easily and quickly build interactive plots, charts, dashboards and data applications. That's why nowadays it is used more often than its counterparts, such as Maplotlib and Seaborn. In this guide, we will learn how to use Bokeh to apply different methods to visualize data interactively and dynamically.
What is Bokeh?
Bokeh is a newly introduced Python library similar to D3.js, which is used for interactive data visualization targeted to web browsers. It enables precise and elegant construction of versatile graphics with high interactivity and high performance over large and streaming datasets.
Advantages of Bokeh
-
Bokeh uses JavaScript to render visual graphics, which makes it a great option for building web-based dashboards and applications, unlike its counterparts Seaborn, Matplotlib, and ggplot.
-
Bokeh can be used to embed visualizations into Django and Flask app.
-
With Bokeh, we can build complex plots using simple command lines.
-
Bokeh provides output in various formats, including HTML, notebook, and server.
Installation of Bokeh
- pip install: To install using pip, open the terminal and run the following command:
pip install Bokeh
- conda Install: To install using conda, open the terminal and run the following command:
conda install -c bokeh bokeh
- You can verify that Bokeh is installed on your system by running the below command
bokeh --version
If the command runs successfully, it means Bokeh is installed on your system.
Modules of Bokeh
Bokeh provides powerful and flexible data visualization features that impart simplicity and highly advanced data customizations.
-
Bokeh.models: This is a low-level module that provides great flexibility to developers.
-
Bokeh.plotting: This is a high-level module used for scatter plots and creating visual glyphs simply.
Note: There were three modules when this library was introduced, including Bokeh.Charts. This was considered a high-level module and Bokeh.Plotting was considered a medium-level module. Bokeh.charts was deprecated quite a long time ago, and subsequently removed.
Creating Charts or Plots Using Bokeh
First, we will look at how to plot line, scatter, multiline, colored and grid plots using different glyphs.We will also look at the various properties of glyphs and different types of markers used in Bokeh. Finally, we will use Numpy and Pandas to plot a graph using a data frame.
Prerequisites
-
I assume that you have a basic knowledge of Python and its Pandas and Numpy libraries.
-
I assume you have installed Python 3 on your system and have a web browser.
Plot 1: A Simple Line Glyph
from bokeh.plotting import figure, output_file, show
# creating a random data
x= [1,2,6,8,5]
y= [4,5,2,5,3]
# output to a HTML file
output_file('index.html')
# create a new plot with a title and axis labels
p= figure(
title='simple example',
x_axis_label= 'X Axis',
y_axis_label= 'Y Axis'
)
# adding a legend and line renderer with width
p.line(x,y, legend='Graph', line_width = 4)
# show result
show(p)
This creates a file named index.html in your directory. Open that file in a browser to see the below results (if you are using Jupyter notebook or Spyder it will automatically open in your browser):
Plot 2: A Multi-line Plot
from bokeh.plotting import figure, output_file, show
output_file("patch.html")
# x-y coordinate data
x = [1.5, 2.5, 1,3]
y = [2, 4, 6,3.8]
# x-y coordinate data
x1 = [1.5, 2.5, 1,3]
y1 = [1, 1.8, 2.5,3.8]
p = figure(plot_width=600, plot_height=600)
p.multi_line(
[x, y], [x1, y1],
color=["Red", "navy"],
alpha=[0.8, 0.3],
line_width=4
)
#show result
show(p)
In the plot above, you can see the tools at the top (zoom, resize, reset, wheel zoom).These tools allow you to interact with the chart. We will also learn how to remove them in the next example.
Plot 3: Simple Scatter Glyph with No Toolbars
# Import Bokeh Libraries
from bokeh.plotting import figure, output_file, show
# x-y coordinate data
x = [1.5, 2.5, 1,3]
y = [1, 1.8, 2.5,3.8]
# Output File name.
output_file('scatter.html', title='Circle Glyphs')
# figure with no toolbar and axis ranges of [0,4]
p = figure(
title='simple scatter plot',
plot_height=500, plot_width=600,
x_axis_label='X Axis', y_axis_label='Y Axis',
x_range =(0,4), y_range = (0,4),
toolbar_location=None
)
# Render Glyph
p.circle(x,y,color='Red', size=10)
# Show plot
show(p)
In the above output, you can see there are no tools shown.
Using the Figure() function, we were able to provide titles to the x and y axes along with the legend and graph name. This helps us be more descriptive about the data we are plotting on our graph.
Glyphs in Bokeh
In Bokeh, the visual properties of shapes are called glyphs. This includes the following types and attributes of shapes:
-
Visual Shapes
-
Circles, triangles, squares
-
Rectangle lines, wedges
-
-
Properties attached to shapes
-
Coordinates(x,y)
-
Size, Color, Transparency
-
Plot 4: Changing Properties of Glyphs
from bokeh.plotting import figure, output_file, show
output_file("size.html")
p = figure(plot_width = 600,plot_height =600)
# changing size of markers
# rendering glyph
p.circle(x=10, y=[3,5,6,15], size=[10,20,30,40])
#show result
show(p)
Note: You can use different markers in Bokeh. Some of these include:
- asterisk()
- circle()
- circle_cross()
- circle_x()
- triangle()
- cross()
- diamond()
- diamond_cross()
- square_x()
- inverted_triangle()
- square()
- x()
- square_cross()
Plot 5: Line and Marker Together
# import bokeh library
from bokeh.plotting import figure, output_file, show
# coordinates data
x = [4,3,7,6,5]
y = [4,6,2,7,3]
p = figure()
#render line glypd
p.line(x, y, line_width=2,color='red')
#render cirlce glyphs
p.circle(x, y, fill_color='black', size=20)
output_file('line.html')
#show result
show(p)
Types of Glyphs
Bokeh offers different types of glyphs. Below is a list of some of the glyphs we can use in plotting.
- annulus()
- annular_wedge()
- wedge()
- rect()
- quad()
- vbar()
- hbar()
- image()
- image_rgba()
- image_url()
- patch()
- patches()
- line()
- multi_line()
- circle()
- oval()
- ellipse()
- arc()
- quadratic()
- bezier()
Plot 6: Multi-patches Glyph of Data Given in List of Lists
from bokeh.plotting import figure, output_file, show
#data in list of lists
x = [ [3,3,1.5,1.5], [6,6,3.5], [2.5,15,4.5,7.5] ]
y = [ [2,5,5,2], [3,5,5], [2,3,4,2] ]
#add plot
p = figure(title='multipacthglyph',
plot_height=500, plot_width=600,
x_axis_label='X Axis', y_axis_label='Y Axis')
#render patch glyph
p.patches(x, y,fill_color = ['red', 'blue','green'],line_color = 'white')
output_file('multipatches.html')
show(p)
Plots With the Help of Numpy and Pandas
Due to Bokeh's customizability, it's compatible with data structure libraries in Python such as Numpy and Pandas. Bokeh also has its own data structure,s columndatastructures, so we will look at how to implement Numpy, Pandas, and columndatastructure in Bokeh.
Plot 7: Simple Plot With the Help of Numpy
from bokeh.plotting import figure, output_file, show
# importing numpy library
import numpy as np
# creating random data using numpy
x = np.linspace(0, 15, 800)
y = np.cos(x) + np.random.random(800) * 0.20
p = figure()
# render glyph
p.line(x, y,color='Blue')
output_file('Numplyplot.html')
# show result
show(p)
We can also show a grid of plots using the gridplot() function in Bokeh. These types of plots are useful when we have to show the change in one parameter based on the other parameters. We will see this illustrated in the next example.
Plot 8: Multiple Plots in a Single Grid With the Help of Numpy
import numpy as np
from bokeh.plotting import figure, output_file, show
# importing gridplot function
from bokeh.layouts import gridplot
# prepare some data using numpy
x = np.linspace(0, 15, 80)
y = np.cos(x)
y1 = np.sin(x)
y2 = np.sin(x) + np.cos(x)
# outputfile
output_file("grid.html")
# create a new plot
a1 = figure(width=250, plot_height=250, title=None)
a1.circle(x, y, size=10, color="yellow", alpha=0.5)
# new plot with same range
a2 = figure(width=250, height=250, x_range=a1.x_range, y_range=a1.y_range, title=None)
a2.triangle(x, y1, size=10, color="Grey", alpha=0.5)
# new plot with x axis same range
a3 = figure(width=250, height=250, x_range=a1.x_range, title=None)
a3.square(x, y2, size=10, color="green", alpha=0.5)
# NEW: put the subplots in a gridplot
p = gridplot([[a1, a2, a3]], toolbar_location=None)
# show result
show(p)
Plot 9: Plotting With the Help of Pandas
We will use a sample data frame. I have imported the flowers iris dataset from the Bokeh library.
# Flowers is a Pandas DataFrame
from bokeh.sampledata.iris import flowers
# see dataset
print(flowers)
output-:
sepal_length sepal_width petal_length petal_width species
0 5.1 3.5 1.4 0.2 setosa
1 4.9 3.0 1.4 0.2 setosa
2 4.7 3.2 1.3 0.2 setosa
3 4.6 3.1 1.5 0.2 setosa
4 5.0 3.6 1.4 0.2 setosa
5 5.4 3.9 1.7 0.4 setosa
6 4.6 3.4 1.4 0.3 setosa
7 5.0 3.4 1.5 0.2 setosa
8 4.4 2.9 1.4 0.2 setosa
9 4.9 3.1 1.5 0.1 setosa
10 5.4 3.7 1.5 0.2 setosa
11 4.8 3.4 1.6 0.2 setosa
12 4.8 3.0 1.4 0.1 setosa
After importing, we will plot the data frame using Pandas and Bokeh.
from bokeh.plotting import figure, output_file, show
# plot with x axis as petal length and y axis as sepal length
p = figure(x_axis_label='petal length',y_axis_label='sepal length',)
# render glyph
p.circle(flowers['petal_length'],
flowers['sepal_length'],size=10)
# output file
output_file('flowers.html')
# show result
show(p)
Plot 10: Color Mapping the Flowers Data Frame With the Help of Pandas
# color mapping for a space or a range
from bokeh.models import CategoricalColorMapper
from bokeh.plotting import figure, output_file, show
#class to import a object to store the data of bokeh graph.
from bokeh.models import ColumnDataSource
#imprting a dataframe
from bokeh.sampledata.iris import flowers as df
dataframe= ColumnDataSource(df)
#mapping the color with the flowers
mapper = CategoricalColorMapper(
factors=['setosa', 'virginica',
'versicolor'],
palette=['pink', 'grey', 'olive'])
# adding plot
plot = figure(x_axis_label='petal length'
,y_axis_label='sepal length')
#rendering glyph
plot.circle(
'petal_length',
'sepal_length',
size=10,
source=dataframe,
color = {
'field': 'species',
'transform': mapper #mapper maps categorical factor to other values.
}
)
output_file('colormapping.html')
#show result
show(plot)
In this program, ColumnDataSource is necessary because ColumnDataSource is the object where the data of the Bokeh graph is stored. You can choose not to use ColumnDataSource and feed your graph directly with Python dictionaries, Pandas data frames, etc. But for certain features, such as having a pop-up window showing data information when the user hovers the mouse on glyphs, you are forced to use ColumnDataSource or the popup window will not be able to get the data.
Conclusion
In this guide, we used Bokeh library programs to plot resourceful, dynamic and interactive visualizations using different types of glyphs and data types. By looking at practical examples, we learned that Bokeh makes it easier to visualize large data types and create different graph plots. This guide has covered only the basics of the Bokeh library, and I hope it will encourage you to delve deeper into this library's application. If you have any queries regarding this guide, feel free to contact me at CodeAlphabet.
