er1czz / Bokeh_tutorial

This tutorial covers the basics of bokeh in a notebook and how to serve an app.

Bokeh_tutorial

Check out the slides for this tutorial
This overview covers the basics of creating interactive bokeh visualizations in a jupyter notebook/lab and how to serve a bokeh app locally. ./prod/bokeh_tutorial.ipynb contains the main tutorial notebook. For convenience, you can open it in google colab.

I used bokeh to create my Insight data science project - a web-app to predict blood test results. I also created a COVID-19 tracking dashboard.

Installation

Note: The latest version (as of 06-15-20) of bokeh has a bug that doesn't allow you to run visualizations in notebooks. Therefore, I recommend explicitly installing an older version for now:

$ conda install bokeh=2.0

If you're using jupyterlab as opposed to jupyter notebook, you will need to install this extension.

$ jupyter labextension install @bokeh/jupyter_bokeh

Basic plotting syntax

See the slides associated with this repo.

Bokeh has a great tutorial that covers the basic syntax for bokeh plots.

import numpy as np
from bokeh.plotting import figure
from bokeh.io import show, output_notebook
output_notebook() # All subsequent outputs go to notebook
fig = figure(plot_width=350, plot_height=250,
             title='Speed vs. time',
             y_axis_label='speed (m/s)', x_axis_label='time (s)')
t = np.arange(10)
fig.scatter(t, 9.8*t)
show(fig)

I highly advise using ColumnDataSource for the data source for your bokeh visualizations to take full advantage of the figure tools. ColumnDataSource takes a simple dictionary or pandas DataFrame argument:

from bokeh.models import ColumnDataSource
from bokeh.layouts import Row 
t = np.arange(10)
CDS = ColumnDataSource({'time':t,'speed':9.8*t,'dist':4.9*t**2})
left = figure(plot_width=350, plot_height=250,
              tools='lasso_select',
              title='Speed vs. time',
              y_axis_label='speed (m/s)', x_axis_label='time (s)')
right = figure(plot_width=350, plot_height=250,
              tools='lasso_select',
              title='Speed vs. time',
              y_axis_label='distance (m)', x_axis_label='time (s)')

left.scatter('time', 'speed', source=CDS)
right.scatter('time', 'dist', source=CDS)
show(Row(left,right))

Creating bokeh visualizations for servers

You can get more complicated, but bokeh allows you to create an interactive visualization with widgets using a single script file. If you're starting off, check out sliders.py and it's source code to understand the basic logic.

Serving bokeh apps

• Locally
  During development, you want to be able to debug to see what's happennig on the backend and printed statements that you've coded in. This is done using the --log-level=debug flag:

$ bokeh serve --show --log-level=debug sliders.py

• In AWS (development mode)
  First, you will have to setup an AWS EC2 instance. You can also link the app to a domain name that you've purchased (optional). These steps are beyond the scope of this tutorial, but you can find an excellent tutorial here.

In AWS, you'll want to allow for connections to your app through the web, which is done using --allow-websocket-origin flags. To run the app in AWS, navigate to your bokeh app python script and run something like this:

$ bokeh serve --show --log-level=debug sliders.py --port 5000\
--allow-websocket-origin=44.233.227.189:5000 \
--allow-websocket-origin=ec2-44-233-227-189.us-west-2.compute.amazonaws.com \
--allow-websocket-origin=predict.rocks \
--allow-websocket-origin=www.predict.rocks \
/

This assumes:
your elasticIP is: 44.233.227.189
your ec2 address is: ec2-44-233-227-189.us-west-2.compute.amazonaws.com
your linked domain name is: www.predict.rocks

• In AWS (production mode) If you want the app not to hangup (after you've disconnected from your instance) just add nohup. I also add the --keep-alive 10000 which pings the server to keep it alive. Note: I haven't tested its necessity.

$ nohup bokeh serve --show --log-level=debug sliders.py --port 5000\
--allow-websocket-origin=44.233.227.189:5000 \
--allow-websocket-origin=ec2-44-233-227-189.us-west-2.compute.amazonaws.com \
--allow-websocket-origin=predict.rocks \
--allow-websocket-origin=www.predict.rocks \
--keep-alive 10000/

If you're using Nginx (an HTTP and reverse-proxying server), you'll also want to follow the configuration instructions found here.