11/5/24, 3:30 PM Data Visualization with Bokeh
Install within Jupyter Notebook (uncomment the following lines)
In [1]: #!pip install bokeh
#!pip install Jinja2
#!pip install Six
#!pip install Requests
#!pip install Tornado
#!pip install PyYaml
Verify your installation
In [2]: from bokeh.io import output_notebook, show
output_notebook()
Loading BokehJS ...
Welcome to Glyphs
What are glyphs anyway? Glyphs are Bokeh's key building blocks that create plots. Every plot you build in Bokeh
has a glyph mechanism in it. For example, when you want to create a scatter plot, you may use a circle as a marker
to represent information. A line will represent information on a line plot.
These geometric shapes (lines or circles) are what we call glyphs in Bokeh. They convey visual information about
data. This tutorial will help you understand glyphs by showing you how to use glyphs to create various types of
plots. In summary, we are going to plot the following plots using glyphs:
Line plots: Line plots present movement of data points along the x and y-axes as a line. Line plots are
appropriate for plotting time series data.
Bar plots: Bar plots represent the count of each category as a column or field. Bar plots are appropriate for
categorizing data.
Patch plots: Patch plots show a region of points using a particular color. They are appropriate for distinguishing
groups within the same dataset.
Scatter plots: Scatter plots represent the relationship between two variables and the strength of correlation
between them.
How To Use Glyphs For Plotting The general steps for creating a plot in Bokeh are;
Create a plot using the figure() function to instruct Bokeh to create a diagram. Define title, x-axis, and y-axis labels.
Then add line() glyph to the figure to create a line plot and cross() glyph to mark intersections between the x and y
points.
Note:
Sometimes, when rendering multiple visualizations sequentially, you’ll see that past renders are not being cleared
with each execution. If you experience this, import and run the following between executions:
In [3]: # Import reset_output (only needed once)
#from bokeh.plotting import reset_output
# Use reset_output() between subsequent show() calls, as needed
#reset_output()
Creating Line Plots
The code shows you how to create a simple line plot in bokeh.
In [4]: #Import the required packages
from bokeh.io import output_notebook, output_file, show
from bokeh.plotting import figure
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 1/10
11/5/24, 3:30 PM Data Visualization with Bokeh
#Create two data arrays
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
# Create plot
plot = figure(width=400, height=400, title="Simple line plot", x_axis_label="x-axis", y_axis_label = 'y
plot.line(x,y, line_width=2, color='green')
#Show plot
output_file("line_plot1.html")
show(plot)
This example shows you how to create a single line glyph using a one-dimensional sequence of x and y data points
using the line() glyph. You can specify the width and length of the plot, title, and axes labels in the figure() function.
In the line() glyph, you can specify the line_width (thickness) using the line_width argument, and the color using the
color argument.
Creating bar plots
In [5]: #Import the
from bokeh.plotting import figure, show
animals = ['lion', 'leopard', 'elephant', 'rhino', 'buffalo']
weight_tonnes = [190, 90, 3000, 2300, 590]
p = figure(x_range=animals, height=350, title="Big Five weight", x_axis_label = "Animal", y_axis_label
toolbar_location=None, tools="")
p.vbar(x=animals, top=weight_tonnes, width=0.9)
p.xgrid.grid_line_color = None
p.y_range.start = 0
show(p)
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 2/10
11/5/24, 3:30 PM Data Visualization with Bokeh
Creating patch plots
A patch plot shades regions with color to show a group or region has similar characteristics. You can create a
simple patch plot, as follows:
In [6]: # Import required packages
from bokeh.io import output_file, show
from bokeh.plotting import figure
# Create the regions to chart
x_region = [[1,1,2], [2,3,3], [2,3,5,4]]
y_region = [[2,5,6], [3,6,7], [2,4,7,8]]
# Create plot
plot = figure()
plot.patches(x_region, y_region, fill_color = ['blue', 'yellow', 'green'], line_color = 'black')
show(plot)
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 3/10
11/5/24, 3:30 PM Data Visualization with Bokeh
There are three distinct regions: First is the [1,1,2] mapped to [2,5,6] on the y-axis. Second is the region of [2,2,3] on
the x-axis mapped to [3,6,7] on the y-axis, and third region [2,3,5,4] on the x-axis mapped to [2,4,7,8] on the y-axis.
The patches glyph use different colors to build the patches for each region. The _linecolor argument specifies the
border color for each patch.
Creating scatter plots
Data analyists often use scatter plots to determine the relationship between two variables. You can create a simple
scatter plot in Bokeh as follows:
In [7]: # Import required packages
from bokeh.io import output_file, show
from bokeh.plotting import figure
# Create x and y data points
x = [1,2,3,4,5]
y = [5,7,2,2,4]
# Create plot
plot = figure(title = "Scatter plot", x_axis_label = "Label name of x axis", y_axis_label ="Label name
plot.scatter(x,y, size = 30, alpha = 0.5, marker="circle")
# Add labels
# Output the plot
show(plot)
The alpha argument specifies the transparency of the circles. It takes the value between 0 and 1, with 0 being
completely transparent and 1 being opaque.
The code uses circle markers to create the intersection points of the x and y lists on the scatter plot. Instead of
circles you can use other markers such as:
cross()
x()
diamond()
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 4/10
11/5/24, 3:30 PM Data Visualization with Bokeh
diamond_cross()
circle_x()
circle_cross()
triangle()
inverted_triangle()
square_x()
square_cross()
asterisk()
The size = 30 argument specifies the size of each circles. The figure summarizes all markers available in bokeh.
click_policy parameter
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 5/10
11/5/24, 3:30 PM Data Visualization with Bokeh
This property makes the legend interactive. There are two types of interactivity –
Hiding: Hides the Glyphs.
Muting: Hiding the glyph makes it vanish completely, on the other hand, muting the glyph just de-emphasizes
the glyph based on the parameters.
In [8]: # importing the modules
from bokeh.plotting import figure, output_file, show
# file to save the model
output_file("gfg.html")
# instantiating the figure object
graph = figure(title = "Bokeh Hiding Glyphs")
# plotting the graph
graph.vbar(x = 1, top = 5,
width = 1, color = "violet",
legend_label = "Violet Bar")
graph.vbar(x = 2, top = 5,
width = 1, color = "green",
legend_label = "Green Bar")
graph.vbar(x = 3, top = 5,
width = 1, color = "yellow",
legend_label = "Yellow Bar")
graph.vbar(x = 4, top = 5,
width = 1, color = "red",
legend_label = "Red Bar")
# enable hiding of the glyphs
graph.legend.click_policy = "hide"
# displaying the model
show(graph)
In [9]: # importing the modules
from bokeh.plotting import figure, output_file, show
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 6/10
11/5/24, 3:30 PM Data Visualization with Bokeh
# file to save the model
output_file("gfg.html")
# instantiating the figure object
graph = figure(title = "Bokeh Hiding Glyphs")
# plotting the graph
graph.vbar(x = 1, top = 5,
width = 1, color = "violet",
legend_label = "Violet Bar",
muted_alpha=0.2)
graph.vbar(x = 2, top = 5,
width = 1, color = "green",
legend_label = "Green Bar",
muted_alpha=0.2)
graph.vbar(x = 3, top = 5,
width = 1, color = "yellow",
legend_label = "Yellow Bar",
muted_alpha=0.2)
graph.vbar(x = 4, top = 5,
width = 1, color = "red",
legend_label = "Red Bar",
muted_alpha=0.2)
# enable hiding of the glyphs
graph.legend.click_policy = "mute"
# displaying the model
show(graph)
Adding Tooltips to the Timeseries Chart with Bokeh
To demonstrate how to add tooltips, let's first create a simple timeseries chart using Bokeh.
In [10]: import pandas as pd
import numpy as np
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 7/10
11/5/24, 3:30 PM Data Visualization with Bokeh
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import ColumnDataSource
output_notebook()
# Create a sample DataFrame
dates = pd.date_range('2023-01-01', periods=10)
data = np.random.rand(10)
df = pd.DataFrame({'date': dates, 'value': data})
# Convert the DataFrame to a ColumnDataSource
source = ColumnDataSource(df)
# Create a new plot with a datetime axis type
p = figure(x_axis_type='datetime', title="Timeseries Example", width=800, height=400)
# Add a line renderer
p.line('date', 'value', source=source)
show(p)
Loading BokehJS ...
We can see here the info on the dataset we have created
In [11]: df.info()
<class 'pandas.core.frame.DataFrame'>
RangeIndex: 10 entries, 0 to 9
Data columns (total 2 columns):
# Column Non-Null Count Dtype
--- ------ -------------- -----
0 date 10 non-null datetime64[ns]
1 value 10 non-null float64
dtypes: datetime64[ns](1), float64(1)
memory usage: 292.0 bytes
To add tooltips, you'll use the HoverTool from Bokeh's models. The HoverTool allows you to specify which data
fields to display in the tooltip. Step-by-Step Guide:
1. Import the HoverTool
First, import the HoverTool from Bokeh.
In [12]: from bokeh.models import HoverTool
2. Define Tooltips:
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 8/10
11/5/24, 3:30 PM Data Visualization with Bokeh
Create a list of tuples, where each tuple contains a label and a field name. Use the @ symbol to refer to fields in
your ColumnDataSource.
In [13]: tooltips = [
("Date", "@date{%F}"),
("Value", "@value{0.2f}")
]
3. Add the HoverTool to the Plot
Use the add_tools method to add the HoverTool to your plot. You can also specify the format for datetime fields
using the formatters attribute.
In [14]: hover = HoverTool(
tooltips=tooltips,
formatters={
'@date': 'datetime', # use 'datetime' formatter for '@date' field
},
mode='vline' # display tooltips for all points on a vertical line
)
p.add_tools(hover)
Finally, use the show function to display your plot.
In [15]: show(p)
Here is the complete code for adding tooltips to a timeseries chart in Bokeh:
In [16]: import pandas as pd
import numpy as np
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import ColumnDataSource, HoverTool
# Enable Bokeh output in notebooks
output_notebook()
# Create a sample DataFrame
dates = pd.date_range('2023-01-01', periods=10)
data = np.random.rand(10)
df = pd.DataFrame({'date': dates, 'value': data})
# Convert the DataFrame to a ColumnDataSource
source = ColumnDataSource(df)
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 9/10
11/5/24, 3:30 PM Data Visualization with Bokeh
# Create a new plot with a datetime axis type
p = figure(x_axis_type='datetime', title="Timeseries Example", width=800, height=400)
# Add a line renderer
p.line('date', 'value', source=source)
# Define tooltips
tooltips = [
("Date", "@date{%F}"),
("Value", "@value{0.2f}")
]
# Add HoverTool
hover = HoverTool(
tooltips=tooltips,
formatters={
'@date': 'datetime', # use 'datetime' formatter for '@date' field
},
mode='vline' # display tooltips for all points on a vertical line
)
p.add_tools(hover)
show(p)
BokehJS 3.4.1 successfully loaded.
In [ ]:
file:///C:/Users/david/Downloads/Data Visualization with Bokeh.html 10/10
