from bokeh.io import output_notebook
output_notebook()
This chapter provides a quick introduction to the core components of Bokeh. You will also learn about the most important concepts behind Bokeh.
Bokeh allows you to use Python to build interactive visualizations that run in a web browser. To make this possible, Bokeh includes a JavaScript library called BokehJS. BokehJS is responsible for rendering the visualizations in the browser.
When you create a visualization with Bokeh in Python, Bokeh converts this visualization into a JSON file. This JSON file is then sent to BokehJS, and BokehJS renders the visualization in the browser.
This tutorial focuses on using Bokeh in Python, which generates the BokehJS code automatically. However, you can also use BokehJS directly in JavaScript. For more information, see the chapter BokehJS in the Bokeh user guide.
You can interact with Bokeh using one of the following two interfaces:
interface. It is a general-purpose interface similar to the plotting interfaces of libraries such as Matplotlib or Matlab. The bokeh.plotting interface takes care of many aspects of your plot automatically. Therefore, it makes it easy to get results from your data quickly.
control over all aspects of your plot. This means that you need to define all aspects of your plot manually. You can also use this low-level interface to further customize a plot you have created with the high-level bokeh.plotting interface.
This tutorial focuses on the bokeh.plotting
interface. Objects from
bokeh.models
are used when necessary. For more information,
see Interfaces
in the Bokeh user guide.
On the most general level, all Bokeh visualizations are called documents. A Bokeh document can contain lots of different elements. The most common building blocks of a Bokeh document are:
The most common element in a Bokeh visualization is a plot. A plot is a graphical representation of data. It consists of elements like glyphs, axes, legends, and annotations:
from bokeh.plotting import figure, show
# generate some values
x = list(range(1, 50))
y = [pow(x, 2) for x in x]
# create a new plot
p = figure()
# add a line renderer and legend to the plot
p.line(x, y, legend_label="Temp.")
# show the results
show(p)
Bokeh plots can also contain interactive tools in a toolbar. By default, the following tools are included:
Pan: Pan the plot horizontally and vertically. | |
Box Zoom: Zoom in and out of the plot by selecting a rectangular area. | |
Wheel Zoom: Zoom in and out of the plot using the mouse wheel. | |
Save: Save the plot as a PNG file. | |
Reset: Reset the plot to its original state. | |
Help: Opens a help page with information about the tools available in Bokeh. |
A glyph is a visual representation of data. In the example above, the line representing the x and y data is a line glyph. Bokeh supports many different kinds of glyphs to use inside of plots. Examples of glyphs include scatters, wedges, bars, or tiles.
You will use some of the most common glyphs throughout this tutorial.
In addition to plots, you can also add widgets to your visualization. Widgets are interactive elements that allow you to control or automate aspects of your visualization.
The following example creates a slider widget for defining a date range:
from bokeh.models import DateRangeSlider
date_range_slider = DateRangeSlider(
value=("2022-10-01", "2022-12-31"),
start="2022-07-01",
end="2023-03-31",
)
show(date_range_slider)
You'll learn more about widgets in chapter 11 Widgets and interactivity.
A Bokeh document can consist of a single plot. However, you can also combine several plots and widgets into a more complex visualization. Combining multiple elements in one document is called a layout. Bokeh provides several different layout options to arrange your plots and widgets in a document.
For example:
from bokeh.layouts import row
from bokeh.plotting import figure, show
# prepare some data
x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]
# create three plots with one renderer each
s1 = figure(width=250, height=250, background_fill_color="#fafafa")
s1.scatter(x, y0, size=12, color="#53777a", alpha=0.8, marker="circle")
s2 = figure(width=250, height=250, background_fill_color="#fafafa")
s2.scatter(x, y1, size=12, color="#c02942", alpha=0.8, marker="triangle")
s3 = figure(width=250, height=250, background_fill_color="#fafafa")
s3.scatter(x, y2, size=12, color="#d95b43", alpha=0.8, marker="square")
# put the results in a row and show
show(row(s1, s2, s3))
You will learn more about layouts in chapter 10 Layouts.
In the following chapters of this tutorial, you will learn how to create and customize plots, glyphs, widgets, layouts, and several other of Bokeh's components.
The next chapter introduces the bokeh.plotting
interface.
You will also create your first Bokeh plot.