Building Charts in Bokeh
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:
1pip install Bokeh- conda Install: To install using
conda, open the terminal and run the following command:
1conda install -c bokeh bokeh- You can verify that Bokeh is installed on your system by running the below command
1bokeh --versionIf 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
1from bokeh.plotting import figure, output_file, show
2
3# creating a random data
4x= [1,2,6,8,5]
5y= [4,5,2,5,3]
6
7# output to a HTML file
8output_file('index.html')
9
10# create a new plot with a title and axis labels
11p= figure(
12 title='simple example',
13 x_axis_label= 'X Axis',
14 y_axis_label= 'Y Axis'
15)
16
17# adding a legend and line renderer with width
18p.line(x,y, legend='Graph', line_width = 4)
19
20# show result
21show(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
1from bokeh.plotting import figure, output_file, show
2
3output_file("patch.html")
4# x-y coordinate data
5x = [1.5, 2.5, 1,3]
6y = [2, 4, 6,3.8]
7
8# x-y coordinate data
9x1 = [1.5, 2.5, 1,3]
10y1 = [1, 1.8, 2.5,3.8]
11p = figure(plot_width=600, plot_height=600)
12
13p.multi_line(
14 [x, y], [x1, y1],
15 color=["Red", "navy"],
16 alpha=[0.8, 0.3],
17 line_width=4
18)
19#show result
20show(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
1# Import Bokeh Libraries
2from bokeh.plotting import figure, output_file, show
3
4# x-y coordinate data
5x = [1.5, 2.5, 1,3]
6y = [1, 1.8, 2.5,3.8]
7
8# Output File name.
9output_file('scatter.html', title='Circle Glyphs')
10
11# figure with no toolbar and axis ranges of [0,4]
12p = figure(
13 title='simple scatter plot',
14 plot_height=500, plot_width=600,
15 x_axis_label='X Axis', y_axis_label='Y Axis',
16 x_range =(0,4), y_range = (0,4),
17 toolbar_location=None
18)
19
20# Render Glyph
21p.circle(x,y,color='Red', size=10)
22
23# Show plot
24show(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
1from bokeh.plotting import figure, output_file, show
2output_file("size.html")
3
4p = figure(plot_width = 600,plot_height =600)
5# changing size of markers
6# rendering glyph
7
8p.circle(x=10, y=[3,5,6,15], size=[10,20,30,40])
9#show result
10show(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
1# import bokeh library
2from bokeh.plotting import figure, output_file, show
3# coordinates data
4x = [4,3,7,6,5]
5y = [4,6,2,7,3]
6p = figure()
7#render line glypd
8p.line(x, y, line_width=2,color='red')
9#render cirlce glyphs
10p.circle(x, y, fill_color='black', size=20)
11output_file('line.html')
12#show result
13show(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
1from bokeh.plotting import figure, output_file, show
2
3#data in list of lists
4x = [ [3,3,1.5,1.5], [6,6,3.5], [2.5,15,4.5,7.5] ]
5y = [ [2,5,5,2], [3,5,5], [2,3,4,2] ]
6
7#add plot
8p = figure(title='multipacthglyph',
9 plot_height=500, plot_width=600,
10 x_axis_label='X Axis', y_axis_label='Y Axis')
11
12#render patch glyph
13p.patches(x, y,fill_color = ['red', 'blue','green'],line_color = 'white')
14output_file('multipatches.html')
15show(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
1from bokeh.plotting import figure, output_file, show
2# importing numpy library
3import numpy as np
4# creating random data using numpy
5x = np.linspace(0, 15, 800)
6y = np.cos(x) + np.random.random(800) * 0.20
7p = figure()
8# render glyph
9p.line(x, y,color='Blue')
10output_file('Numplyplot.html')
11# show result
12show(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
1import numpy as np
2from bokeh.plotting import figure, output_file, show
3# importing gridplot function
4from bokeh.layouts import gridplot
5# prepare some data using numpy
6x = np.linspace(0, 15, 80)
7y = np.cos(x)
8y1 = np.sin(x)
9y2 = np.sin(x) + np.cos(x)
10
11# outputfile
12output_file("grid.html")
13
14# create a new plot
15a1 = figure(width=250, plot_height=250, title=None)
16a1.circle(x, y, size=10, color="yellow", alpha=0.5)
17
18# new plot with same range
19a2 = figure(width=250, height=250, x_range=a1.x_range, y_range=a1.y_range, title=None)
20a2.triangle(x, y1, size=10, color="Grey", alpha=0.5)
21
22# new plot with x axis same range
23a3 = figure(width=250, height=250, x_range=a1.x_range, title=None)
24a3.square(x, y2, size=10, color="green", alpha=0.5)
25
26# NEW: put the subplots in a gridplot
27p = gridplot([[a1, a2, a3]], toolbar_location=None)
28# show result
29show(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.
1# Flowers is a Pandas DataFrame
2from bokeh.sampledata.iris import flowers
3# see dataset
4print(flowers)output-:
1 sepal_length sepal_width petal_length petal_width species
20 5.1 3.5 1.4 0.2 setosa
31 4.9 3.0 1.4 0.2 setosa
42 4.7 3.2 1.3 0.2 setosa
53 4.6 3.1 1.5 0.2 setosa
64 5.0 3.6 1.4 0.2 setosa
75 5.4 3.9 1.7 0.4 setosa
86 4.6 3.4 1.4 0.3 setosa
97 5.0 3.4 1.5 0.2 setosa
108 4.4 2.9 1.4 0.2 setosa
119 4.9 3.1 1.5 0.1 setosa
1210 5.4 3.7 1.5 0.2 setosa
1311 4.8 3.4 1.6 0.2 setosa
1412 4.8 3.0 1.4 0.1 setosaAfter importing, we will plot the data frame using Pandas and Bokeh.
1from bokeh.plotting import figure, output_file, show
2# plot with x axis as petal length and y axis as sepal length
3p = figure(x_axis_label='petal length',y_axis_label='sepal length',)
4
5# render glyph
6p.circle(flowers['petal_length'],
7flowers['sepal_length'],size=10)
8
9# output file
10output_file('flowers.html')
11# show result
12show(p)
Plot 10: Color Mapping the Flowers Data Frame With the Help of Pandas
1# color mapping for a space or a range
2from bokeh.models import CategoricalColorMapper
3from bokeh.plotting import figure, output_file, show
4#class to import a object to store the data of bokeh graph.
5from bokeh.models import ColumnDataSource
6#imprting a dataframe
7from bokeh.sampledata.iris import flowers as df
8
9dataframe= ColumnDataSource(df)
10#mapping the color with the flowers
11mapper = CategoricalColorMapper(
12factors=['setosa', 'virginica',
13'versicolor'],
14palette=['pink', 'grey', 'olive'])
15# adding plot
16plot = figure(x_axis_label='petal length'
17,y_axis_label='sepal length')
18#rendering glyph
19plot.circle(
20 'petal_length',
21 'sepal_length',
22 size=10,
23 source=dataframe,
24 color = {
25 'field': 'species',
26 'transform': mapper #mapper maps categorical factor to other values.
27 }
28)
29output_file('colormapping.html')
30#show result
31show(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.