Creating and Deploying a Simple Bokeh App

#Creating-and-Deploying-a-Simple-Bokeh-App

This is a brief tutorial on building a python-based web application with the bokeh visualization library and then deploying to Kyso, where you can share it with the world. If you're new to bokeh, check out this beginner's tutorial on getting started with various plots and working with Pandas DataFrames.

Today, we will present a simple interactive demo that has sliders for controlling a plotted trigonometric function, where users can scrub the sliders to change the properties of the sine curve or type into the title text box to update the title of the plot. This app is one of the many example apps, found here. This will be the end result:

Loading output library...

Launch a jupyter notebook

#Launch-a-jupyter-notebook

You can write directly to a python file, but I prefer to work in the notebook so as to test my code as I go. On Kyso, you can start a workspace to launch a Jupyterlab environment and open a notebook.

Imports and setup

#Imports-and-setup

First, let's import the libraries, layout helpers, models (configuration tools for our plot), HTML widgets wrapped in Python and plotting helpers. I'll explain the use cases of each as we use them.

Setting up the data

#Setting-up-the-data

Let's create 2 separate arrays of data, x and y. ColumnDataSource is the object where the data of a Bokeh graph is stored. You can choose not to use a ColumnDataSource and feed your graph directly with Python dictionaries, pandas dataframes, etc, but this leads to some plotting limitations.

After executing the cell bellow, run

source.data
to see how ColumnDataSource stores the data arrays.

Setting up the plot and widgets

#Setting-up-the-plot-and-widgets

When you create a Bokeh plot, it is comprised of lots of smaller objects like glyphs, data sources, tools, etc. The plot itself is essentially a container for all these objects.

So here we're creating our basic plot specifications with figure( ), as well as the line method of figure( ), using our variable

source
as the data source. Then we create our different widgets (other models); the text-input box, and our various slider functions.

Setting up our python callbacks

#Setting-up-our-python-callbacks

Now we need to set up the functions to allow the user to update the plot title, as well to scrub the sliders. Here we can automatically push server-side updates to the UI and when the controls are manipulated, their new values are automatically synced in the Bokeh server. Callbacks are triggered that also update the data for the plot in the server. These changes are automatically synced back to the browser, and the plot updates.

Setting up the app layout and adding to our document

#Setting-up-the-app-layout-and-adding-to-our-document

This last part creates our graphs, attaches them to the data sources and defines a layout for those graphs. We create a widgetbox, the container for widgets that are part of the layout. Some additional models of the type we discussed above are layout specifications like row and column. Here we use row to specify that our inputs, the sliders and corresponding sine wave graph, are laid out side-by-side.

In the case of Bokeh applications, think of the application's code as a recipe that modifies a document. Whenever a Bokeh app session is created, a new blank Document is created for it and the app code is run, where the new Document for that session is available as curdoc(). We can add to this document (e.g. adding a model as a root of the document with curdoc( ).add_root( ) and setting our page title. When the code is run, the "completed" document is what gets turned to JSON and sent to BokehJS to show to the user.

Putting it all together

#Putting-it-all-together

If you have been working in the notebook as I have, you now have to convert it to a python script, which you can then run. Go to the sliders.py file to view the complete app code.

Open up the terminal in Jupyterlab, click on the + sign in the top left-hand corner and then click the terminal button from the Launcher panel. Make sure you are in the same directory as the notebook (type ls to list the files in the current directory).

The name of my notebook is sliders.ipynb, so I run the following in the terminal:

jupyter nbconvert --to script sliders.ipynb

You'll see your sliders.py file appear in the file browser on the left.

Deploying the application on Kyso

#Deploying-the-application-on-Kyso

To deploy the bokeh application to Kyso run the following command:

bokeh serve --show sliders.py --port 8000 --allow-websocket-origin=*

This will set-up a Bokeh server and open the application in your browser. We specify the port on which the app will run (note - Kyso allows you to run your apps on ports 8000 through 8005, but 8000 is the only port on which you can serve public apps to share). We've enabled all websocket connections.

Your workspace's url is https://xxxxxxxxxx.cloud.kyso.io/lab?, where xxxxxxxxxx is your workspace id. Your app is running on port 8000, so you you append -8000 to the workspace id and remove the lab?.

For example:

My workspace is running at https://live-aymycm9bst.cloud.kyso.io/lab?

I open https://live-aymycm9bst-8000.cloud.kyso.io/ in another tab to view my running app.

Keeping your app running

#Keeping-your-app-running

Note that on Kyso's free plan, the workspace (on which the app is running) will be shut down after 5 miniutes without being pinged (no activity). On our Data Scientist plan, you can keep the workspace alive indefinitely.

Awesome Bokeh Apps

#Awesome-Bokeh-Apps

And there you have it! A live, interactive web app with python callbacks running on Kyso that you can share with the world.

Granted, this is a simple demo app, but the possibilities are endless. Take a look at this awesome airlines application created by William Koehrsen (twitter handle: @koehrsen_will), running below:

His original series can be found on Medium: https://towardsdatascience.com/data-visualization-with-bokeh-in-python-part-iii-a-complete-dashboard-dc6a86aa6e23