Creating Interactive Visualizations with Bokeh¶

There have been many examples of useful and exciting data visualizations for a variety of topics and applications.

But, JavaScript¶

Most of these invlove directly coding JavaScript.

Not everyone enjoys writing JavaScript.

What is Bokeh?¶

Bokeh is a Python package for creating interactive, browser-based visualizations, and is well-suited for "big data" applications.

• Bindings can (and have) been created for other languages.

Bokeh allows users to create interactive html visualizations without using JS.

Bokeh is a language-based visualization system. This allows for:

• high-level commands for data binding, transformation, interaction
• low-level power to deeply customize

Bokeh philosophy:

Make a smart choice when it is possible to do so automatically, and expose low-level capabilities when it is not.

How does Bokeh work?¶

Bokeh writes to a custom-built HTML5 Canvas library, which affords it high performance. This allows it to integrate with other web tools, such as Google Maps.

Bokeh plots are based on visual elements called glyphs that are bound to data objects.

A Simple Example¶

First we'll import the bokeh.plotting module, which defines the graphical functions and primitives.

Next, we'll tell Bokeh to display its plots directly into the notebook. This will cause all of the Javascript and data to be embedded directly into the HTML of the notebook itself. (Bokeh can output straight to HTML files, or use a server, which we'll look at later.)

Next, we'll import NumPy and create some simple data.

Now we'll call Bokeh's circle() function to render a red circle at each of the points in x and y.

We can immediately interact with the plot:

• click-and-drag will pan the plot around.
• Shift + mousewheel will zoom in and out

Statistical Plots¶

Let's try plotting multiple series on the same axes.

First, we generate some data from an exponential distribution with mean $\theta=1$.

Calling hold will allow us to plot multiple elements on the same set of axes.

Next, create our figure, which is not displayed until we ask Bokeh to do so explicitly. We will customize the intractive toolbar, as well as customize the background color.

The quad glyph displays axis-aligned rectangles with the given attributes.

Next, add lines showing the form of the probability distribution function (PDF) and cumulative distribution function (CDF).

Finally, add a legend before releasing the hold and displaying the complete plot.

Bar Plot Example¶

Bokeh's core display model relies on composing graphical primitives which are bound to data series. A more sophisticated example demonstrates this idea.

Bokeh ships with a small set of interesting "sample data" in the bokeh.sampledata package. We'll load up some historical automobile fuel efficiency data, which is returned as a Pandas DataFrame.

We first need to reshape the data, by grouping it according to the year of the car, and then by the country of origin (here, USA or Japan).

For each year, we want to plot the distribution of MPG within that year. As a guide, we will include a box that represents the mean efficiency, plus and minus one standard deviation. We will make these boxes partly transparent.

Next, we overplot the actual data points, using contrasting symbols for American and Japanese cars.

We can add axis labels by binding them to the axis_label attribute of each axis.

Linked Brushing¶

To link plots together at a data level, we can explicitly wrap the data in a ColumnDataSource. This allows us to reference columns by name.

The gridplot function takes a 2-dimensional list containing elements to be arranged in a grid on the same canvas.

We can use the select tool to select points on one plot, and the linked points on the other plots will automagically highlight.

¶

¶

Visualization of US unemployment rates¶

Our first example of an interactive chart involves generating a heat map of US unemployment rates by month and year. This plot will be made interactive by invoking a HoverTool that displays information as the pointer hovers over any cell within the plot.

First, we import the data with Pandas and manipulate it as needed.

Specify a color map (where do we get color maps, you ask? -- Try Color Brewer)

Set up the data for plotting. We will need to have values for every pair of year/month names. Map the rate to a color.

Create a ColumnDataSource with columns: month, year, color, rate

Create a new figure.

use the `rect renderer with the following attributes:

• x_range is years, y_range is months (reversed)
• fill color for the rectangles is the 'color' field
• line_color for the rectangles is None
• tools are resize and hover tools
• add a nice title, and set the plot_width and plot_height

Style the plot, including:

• remove the axis and grid lines
• remove the major ticks
• make the tick labels smaller
• set the x-axis orientation to vertical, or angled

Configure the hover tool to display the month, year and rate

Now we can display the plot. Try moving your pointer over different cells in the plot.

Similarly, we can provide a geographic heatmap, here using data just from Texas.

High-level Plots¶

The examples so far have been relatively low-level, in that individual elements of plots need to be specified by hand. The bokeh.charts interface makes it easy to get up-and-running with a high-level API that tries to make smart layout and design decisions by default.

To use them, you simply import the chart type you need from bokeh.charts:

• Bar
• BoxPlot
• HeatMap
• Histogram
• Scatter
• Timeseries

To illustrate, let's create some random data and display it as histograms.

Notice how we strung together methods for formatting the chart.

Here is a scatter plot example, using the famous iris dataset.

Interactivity with other packages¶

Bokeh plots are compatible with other Python plotting packages, such as Matplotlib, Seaborn, and ggplot, via an onboard compatibility layer bokeh.mpl. This allows existing plots in these packages to be converted seamlessly into Bokeh.

Generating and displaying images¶

Mandelbrot set images are made by sampling complex numbers and determining for each whether the result tends towards infinity when a particular mathematical operation is iterated on it.

First, functions for generating the Mandelbrot set image. They create a 2D array of numbers, over which a color map can be displayed.

Define the bounding coordinates to generate the Mandelbrot image, then create a scalar image (2D array of numbers)

Use image renderer to display Mandelbrot image, colormapped with "Spectral-11" color palette. The renderer can display many images at once, so it takes lists of images, coordinates, and palettes.

Complex Data Visualization¶

In 1951, Will Burtin published a visualization to compare the effectiveness of three popular antibiotics on a suite of bacteria, measured in terms of minimum inhibitory concentration.

The longer the bar, the smaller the effective dose. The orange group is Gram-negative bacteria, while the purple is Gram-positive.

We will attempt to re-create this plot in Bokeh.

We start by defining the data and computing some derived quantities using NumPy and Pandas

We are going to be combining several glyph renderers on to one plot, first we need to tell Bokeh to reuse the same plot using hold:

Next we add the first glyph, the red and blue regions using annular_wedge. We also take this opportunity to set some of the overall properties of the plot:

Next we grab the current plot using curplot and customize the look of the plot further:

Add the small wedges representing the antibiotic effectiveness, also using annular_wedge:

Add circular and radial axes lines using circle, text, and annular_wedge:

Text labels for the bacteria using text:

Add custom legend

Abstract rendering¶

Bokeh deals with large dataset via abstract rendering, which dynamic downsamples areas with high data density so that they can be rendered more efficiently.

Abstract rendering is a bin-based rendering technique that provides greater control over a visual representation and access to larger data sets through server-side processing. Bokeh provides both a high-level and low-level interface with the abstract rendering engine.

At a high level, all abstract rendering applications start with a plot. Abstract rendering takes the plot and renders it to a canvas that uses data values instead of colors and bins instead of pixels. With the data values collected into bins, the plot can be analyzed and transformed to ensure the true nature of the underlying data source is preserved. Bokeh then shades the bins to represent the underlying quantity of data.

Abstract rendering is tied to the bokeh server infrastructure, and can thus only be used with an active bokeh server and with plots employing a ServerDataSource.

The server can be started via:

bokeh-server -D remotedata

Bokeh's abstract rendering recipes provide simplified access to common abstract rendering operations. The recipes interface is declarative, in that a high-level operation is requested and the abstract rendering system constructs the proper low-level function combinations.

Example: Heat map and contour plot of census tracts¶

This example shows how abstract rendering is used to generate two types of plots:

1. Heatmap converts a plot of points into a plot of densities. The most common scenario is a recipes with one item type and overplotting issues. Adjacency-matrix based graph visualizations also benefit from a heatmap if there is more than one node per pixel row/col. The basic process is that each bin collects the count of the number of items that fall into the bin. After that, a color scale is constructed that ensures the full range of the data covers is covered by the color scale.

2. The contours recipe converts a plot of points into ISO contours. It works on the same principal as the heatmap recipe (binning counts), but instead of building color ramps, the contours recipe produces a number of regions representing ranges of counts.

Note that these plots will not be displayed in the static notebook. They must be executed with a running server.¶