Deploy Interactive Real-Time Data Visualizations on Flask With Bokeh

Better data visualizations

Image source: Author

Python has fantastic support for functional analytics tools including NumPy, SciPy, pandas, Dask, Scikit-Learn, OpenCV, and many more. Of the various data visualization libraries for Python, Bokeh has prevailed as the most functional and powerful of the bunch. The library supports a handful of interfaces that cover many common use cases.

One of the great features of Bokeh is the ability to export a figure as raw HTML and JavaScript. This allows us to inject figures that are created programmatically into a Flask application’s templates. When the user connects to your Flask web app, the Bokeh figures are created and embedded into the served HTML in real time.

For our example, we are going to create an interactive explorer for movie data. Our project will feature UI widgets (sliders, menus) that, when changed, update the displayed data.

We are going to cover:

1. How to create an interactive Bokeh figure with five data points
2. Integrating a free cloud database with 3,000 data points (Easybase.io)
3. How to inject a Bokeh figure into a Flask template
4. Adding Bokeh widgets to query data with JavaScript callbacks (CustomJS)

Part One

The first step is to do pip install bokeh and pip install Flask to get the Bokeh library and Flask library installed to your Python instance. Create a file called app.py and start with the following code:

The variable source is used to represent data in a way that is standardized for Bokeh elements. We will pass our data into that object, which is fed to the Bokeh figure. It is structured as an object, mapping keys to an array of values. We will later see how we can directly access and manipulate this using CustomJS.

Next, fig represents a Bokeh visual component. The tooltips parameter sets what is displayed…