Interactive plotting with Bokeh. Interactive plots with few lines of... | by Roman Orac | Towards Data Science

As a JupyterLab power user, I like using Bokeh for plotting because of its interactive plots. JupyterLab also offers an extension for interactive matplotlib, but it is slow and it crashes with bigger datasets.
A thing I don’t like about Bokeh is its overwhelming documentation and complex examples. Sometimes I want to make a simple line plot and I struggle with 10 or more lines of Bohek specific code. But Bokeh code can be very concise as I am going to show below. This is also the main goal, to show a few useful data visualizations with as little code as possible.
Here are a few links that might interest you:
- Labeling and Data Engineering for Conversational AI and Analytics- Data Science for Business Leaders [Course]- Intro to Machine Learning with PyTorch [Course]- Become a Growth Product Manager [Course]- Deep Learning (Adaptive Computation and ML series) [Ebook]- Free skill tests for Data Scientists & Machine Learning Engineers
Some of the links above are affiliate links and if you go through them to make a purchase I’ll earn a commission. Keep in mind that I link courses because of their quality and not because of the commission I receive from your purchases.
Description from its website sums it up nicely:
Bokeh is an interactive visualization library that targets modern web browsers for presentation. Its goal is to provide elegant, concise construction of versatile graphics, and to extend this capability with high-performance interactivity over very large or streaming datasets. Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.
You can run this code by downloading this Jupyter notebook.
import bokehimport numpy as npfrom bokeh.models import Circle, ColumnDataSource, Line, LinearAxis, Range1dfrom bokeh.plotting import figure, output_notebook, showfrom bokeh.core.properties import valueoutput_notebook()  # output bokeh plots to jupyter notebooknp.random.seed(42)
Let us generate some random data using numpy. Bokeh has its own data structure (ColumnDataSource) for data representation. I am not sure why they developed their own data structure as pandas and numpy are De facto standard in Python analytics world (enlighten me in the comments below if you know). But luckily it works also with pandas. For this blog post, I decided to write examples on Bokeh way with its data structures.
N = 100data_source = ColumnDataSource(    data=dict(        x0=np.arange(N),        x1=np.random.standard_normal(size=N),        x2=np.arange(10, N + 10),        x3=np.random.standard_normal(size=N),    ))
To make a simple line plot in Bohek we need 3 lines of code. That’s not too bad. Note that the plot is interactive of the box, we can zoom in and move around, which is very useful with bigger datasets.
p = figure()p.line("x0", "x1", source=data_source)show(p)
To visualize two data columns with different ranges on a plot we can use two separate y-axes. We can set y-axis ranges but that’s not required. I used the min and max values of a data column as a y-axis limit. To visually separate data columns we can add a legend and set the color.
p = figure()column1 = "x1"column2 = "x2"# FIRST AXISp.line("x0", column1, legend=value(column1), color="blue", source=data_source)p.y_range = Range1d(data_source.data[column1].min(), data_source.data[column1].max())# SECOND AXIScolumn2_range = column2 + "_range"p.extra_y_ranges = {    column2_range: Range1d(        data_source.data[column2].min(), data_source.data[column2].max()    )}p.add_layout(LinearAxis(y_range_name=column2_range), "right")p.line("x0", column2, legend=value(column2), y_range_name=column2_range, color="green",source=data_source)show(p)
This is where Bokeh really shines. You can simply define multiple elements and Bokeh renders them on the plot.
p = figure()p.line(x="x0", y="x1",color="blue", source=data_source )p.circle(x="x0", y="x3",color='green', source=data_source)show(p)
Bokeh is very customizable. You can tweak all the things you would expect from a plotting library, like line width, colors, multiple plots on a grid, etc. It offers special plots like candlesticks for financial data, Burtin visualization and you can even make a periodic table. Unique to Bokeh (at least to my knowledge) is an option to export the plot to javascript code which enables you to directly embed the plot to a webpage with all of its interactive capabilities.
Follow me on Twitter, where I regularly tweet about Data Science and Machine Learning.
These are a few links that might interest you:
- Data Science Nanodegree Program- AI for Healthcare- School of Autonomous Systems- Your First Machine Learning Model in the Cloud- 5 lesser-known pandas tricks- How NOT to write pandas code- Parallels Desktop 50% off