Building an Interactive Dashboard using Bokeh and Pandas

This article was published as a part of the Data Science Blogathon

 

The Importance of Data Visualization

A huge amount of data is being generated every instant due to business activities in globalization. Companies are extracting useful information from such generated data to make important business decisions. Exploratory Data analysis can help them visualize the current market situation and forecast the likely future trends, understand what their customers say and expect from the product, improve the product by taking suitable measures, and more.

To achieve this, Data visualization is the solution i.e., to create a visually appealing representation of the data that tells an interesting story quickly yet is simple enough for all readers to understand.

One can use Pandas for the above-said data analysis in Python through its built-in plot functions. But wouldn’t it be great if you can interact with the chart through functions like zoom or hover to dig a little deeper into the data?

Benefits of Interactive Plots and Dashboard using Bokeh

Interactive data visualization allows a user to instantly modify the elements on a graphical plot instead of changing the code in the background. Imagine you are interacting with a plot that shows a product price for a decade. Now, if there was a slider or a drop-down menu to select the prices for a particular year or a month, then you as a reader would have faster insights from the chart and that too quickly without editing the code. This is exactly what interactive plots offer.

With interactive plots, we can better understand the story behind the data. These plots allow us to zoom in on an interesting variation to spot trends and variations as well as find correlations and connections between variables. All this makes the data exploration process more meaningful.

Introduction to Dashboards

Dashboards are visual tools that tell the story contained in the dataset and allow users to quickly understand the bigger picture. These are collections of different plots tied together in a grid-style layout as shown below and are a part of the story. So, we can say that dashboards are a common way to present valuable insights in a single place.

Image Source: Author

Libraries for Interactive Plots

The charts created using Matplotlib and Seaborn are static charts i.e., a user cannot update them without updating the code and re-running it. Thus, interactive plots libraries – D3 and chart.js could be used, but they expect the user to have some prior JavaScript knowledge.

Currently, there are two popular Open-Source libraries for building interactive visualizations – Bokeh and Plotly. In this article, we will do a simple tutorial using Bokeh.

Bokeh is an Open-Source library for interactive visualization that renders graphics using HTML and JavaScript. It is a powerful EDA tool that can also be used to build web-based dashboards and applications.

Bokeh supports line graphs, pie charts, Bar charts & Stacked Bar charts, histograms, and scatter plots. The data source is converted to a JSON file which becomes an input to BokehJS ( JavaScript library) and this makes it possible to render browser-supported interactive plots & visualization.

Bokeh library requires a basic understanding of JavaScript code in order to write custom functions to update the plots depending on user inputs. For this beginner-friendly article, I have used a library called Pandas-Bokeh which is easier to use for newbies and allows rendering of the same Bokeh plots through its Back-end support for Pandas. For advanced visualizations, one can always use the Bokeh library to define custom visualizations.

A single line of code is required for each interactive plot. I’ll demonstrate the functionality of the Pandas-Bokeh library and how we can use it to build a simple dashboard from the dataset.

Building an interactive dashboard using Bokeh

Let’s start by installing the library first using pip from PyPI.

pip install pandas_bokeh

Next, we import pandas and numpy libraries. Remember to import these before the pandas_bokeh library.

import numpy as np
import pandas as pd
import pandas_bokeh

We also, need the following command to display the output charts in the notebook

# Embedding plots in Jupyter/Colab Notebook
pandas_bokeh.output_notebook()

To display the charts in a separate HTML, use this command-

# for exporting plots as HTML
pandas_bokeh.output_file(filename)

For this beginner-friendly tutorial, we are generating a simple random dataset using the NumPy library and using it to build the dashboard.

Let us assume that the dataset contains samples of measured values from 4 sensors over a period of 12 months and each value has a unique identification number & a category associated with it. This means there are a total of 6 features i.e., ‘id’, ‘month’, ‘sensor_1’, ‘sensor_2’, ‘sensor_3’, and ‘category’. For simplicity, we are considering only 15 samples or rows of data.

To generate this dataset, we use the np.random function from the NumPy library as follows. (Official documentation link for NumPy: https://numpy.org/doc/stable/reference/random/generator.html)
we will then print the shape and look at the top 5 rows of the dataset

Python Code:

import numpy as np
import pandas as pd
import pandas_bokeh

# for exporting plots as HTML
# pandas_bokeh.output_file(filename)

#define the categorical variable
category = ['A','B','C']
#set random seed to make the dataset reproducible
np.random.seed(42)
#create a dataset
df_random = pd.DataFrame({
   'id': np.arange(0, 15),
   'month':np.random.randint(1, 12, 15),
   'sensor_1': np.random.uniform(0, 1,15),
   'sensor_2': np.random.uniform(10, 15, 15),
   'sensor_3': np.random.randint(0, 20, 15),
   'category': np.random.choice(category, 15, p=[0.2, 0.4, 0.4])
})

#set index to id column
df_random=df_random.set_index('id')

print('shape of df =>',df_random.shape)
print(df_random.head())

Now we can plot the chart in a dashboard. For demonstration purposes, let us plot the following charts using the pandas_bokeh library-

1. 
   

   Line plot

   
   
2. 
   

   Bar chart

   
   
3. 
   

   Stacked Bar chart

   
   
4. 
   

   Scatter plot

   
   
5. 
   

   Pie chart

   
   
6. 
   

   Histogram

   
   

# Plot1 - Line plot
p_line= df_random.groupby(['month']).mean().plot_bokeh(kind="line",y="sensor_2",color='#d01c8b',plot_data_points=True,show_figure=False)
# Plot2- Barplot
p_bar = df_random.groupby(['month']).mean().plot_bokeh(kind="bar",colormap=colors,show_figure=False)

# Plot3- stacked bar chart
df_sensor=df_random.drop(['month'],axis=1)
p_stack=df_sensor.groupby(['category']).mean().plot_bokeh(kind='barh', stacked=True,colormap=colors,show_figure=False)

#Plot4- Scatterplot
p_scatter = df_random.plot_bokeh(kind="scatter", x="month", y="sensor_2",category="category",colormap=colors,show_figure=False)
#Plot5- Pie chart
p_pie= df_random.groupby(['category']).mean().plot_bokeh.pie(y='sensor_1',colormap=colors,show_figure=False)

#Plot6- Histogram
p_hist=df_sensor.plot_bokeh(kind='hist', histogram_type="stacked",bins=6,colormap=colors, show_figure=False)

Running these commands will generate the plots but those will not be displayed as we have set ‘show_figure=False’. Since we want these charts to appear in the dashboard, we have used this option.

Next, we set up the grid layout for the dashboard using the ‘pandas_bokeh.plot_grid’ command. We plot the first three plots in the first row and the remaining three in the second row.

#Make Dashboard with Grid Layout: 
pandas_bokeh.plot_grid([[p_line, p_bar,p_stack],[p_scatter, p_pie,p_hist]], plot_width=400)

The dashboard looks like this –

Image source: Author

All these plots are interactive and allow you to use hover and zoom functions as well as filter categories.

Conclusion

Through this article, we saw how to directly generate Bokeh interactive plots inside Pandas and set up a simple dashboard using the Pandas-Bokeh library. The Pandas-Bokeh library is extremely easy to use for beginners with a basic understanding of the pandas plotting syntax. This library can definitely help to make the visualizations more presentable without the need to learn any additional JavaScript code for generating interactive plots. I hope you enjoyed exploring this library as much as I did!

The code for this tutorial is available on my GitHub repository and the notebook for this can be accessed on my Kaggle profile.

Author Bio:

Devashree has an M.Eng degree in Information Technology from Germany and a Data Science background. As an Engineer, she enjoys working with numbers and uncovering hidden insights in diverse datasets from different sectors to build beautiful visualizations to try and solve interesting real-world machine learning problems.

In her spare time, she loves to cook, read & write, discover new Python-Machine Learning libraries or participate in coding competitions.

You can follow her on LinkedIn, GitHub, Kaggle, Medium, Twitter.

Devashree

Devashree has an M.Eng degree in Information Technology from Germany and a Data Science background. As an Engineer, she enjoys working with numbers and uncovering hidden insights in diverse datasets from different sectors to build beautiful visualizations to try and solve interesting real-world machine learning problems.

In her spare time, she loves to cook, read & write, discover new Python-Machine Learning libraries or participate in coding competitions.