Bokeh applications

Previously we looked into the building blocks of an application such as plots and widgets. CREATING PLOTS AND WIDGETS is a concept you should be familiar with.

The first step in an application is to build plots, tools and widgets. The next step is to DEFINE CALLBACK FUNCTION. The callback function is a function that tells the application how to respond when a user interacts with your application. The callback function is the interface between the widgets and the plot. It tells how to change the plot.

The final step is CREATE LAYOUTS in order to present the plots. This is a concept you should be familiar with as well.

Combining the three steps will render in a Bokeh application.

See: https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-widgets

#basic app outline
from bokeh.io import curdoc
# Create plots and widgets
# Add callbacks
# Arrange plots and widgets in layouts
curdoc().add_root(layout)

Whenever we create an application, bokeh creates a blank document or a canvas for that application. This application is known as curdoc abbreviation for current document. We can add plot, widgets and other elements to this blank document with the add_root method.

Study Case: interactive plotting distribution of data

Let us look at an example. A plot with a select menu that changes interactively the distribution of the data and the plot showing the data

Create plots and widget

#import
from bokeh.models import Select, ColumnDataSource
from bokeh.plotting import figure
from numpy.random import random, normal, lognormal

#create data
source = ColumnDataSource(data = {'x':random(500), 'y':random(500)})

#create plot
p =figure()
p.circle(x='x', y='y', source=source)

#create widget
menu = Select(options=['uniform', 'normal', 'lognormal'], value='uniform',
       title = 'select distribution of your choice')

Callback: the interactivity layer

The fundamental purpose of a bokeh application is to make use of interactivity. We can combine plot and widget with a callback function. In the following example, the callback function is set to random if the user selects a uniform distribution, the function is set to normal if the user selects a normal distribution, the function is set to lognormal if the user selects a lognormal distribution.

def callback(attr, old, new):
    if menu.value == 'uniform': f = random
    elif menu.value == 'normal': f = normal
    else: f = lognormal
    source.data={'x': f(size=500), 'y': f(size=500)}

Next we need to call the callback function if the widget is triggered. In the example below we use the .on_change() method of the widget. When the widget is triggered it calls the callback function passing the value

menu.on_change('value', callback)

Arrange plots and widgets in layouts

Finally we create the layout.

# Arrange plots and widgets in layouts
from bokeh.io import curdoc
from bokeh.layouts import column 
layout = column(menu, p)
curdoc().add_root(layout)

Launch application

In order to run the application, we need to put all the code in python script. The preceding code was saved into a file called demo_bokeh.py. In order to run the application, we can open the terminal and type the command

bokeh serve --show demo_bokeh.py

This shows initially the following