The Easiest Way to Create an Interactive Dashboard in Python

Turn Pandas pipelines into a dashboard using hvPlot .interactive

Published in

Towards Data Science

4 min readJan 15, 2022

This article will show you the easiest way to create an interactive dashboard in Python from any DataFrame. If you already know some Pandas, you can almost immediately use hvPlot .interactive and Panel to turn your DataFrame processing pipeline into a dashboard! It just takes a few lines of familiar code to make an interactive dashboard like this:

Interactive DataFrame Dashboards with hvplot .interactive (Image by author)

What is hvPlot?

hvPlot was developed by my Anaconda colleagues Philipp Rudiger, Jean-Luc Stevens, and Jim Bednar. It’s the same as the familiar Pandas .plot() api, but using .hvplot() to give richly interactive plots in a web browser. In my experience, it is the easiest way to create interactive plots in Python for Pandas, Dask and XArray dataframes. hvPlot is one of seven libraries in the HoloViz ecosystem. If you would like to learn more about HoloViz, check out my previous blog post on why I love HoloViz.

Materials

Check out my Github repo for this article.
Check out the notebook and app on Binder: Jupyter Notebook Binder, Jupyter Labs Binder, Panel Apps, or Google Colab

Setup

Let’s first install some packages in the command line:

Then in your Python file or your notebook file, import needed modules:

Starting with Pandas

Let’s first start with a Pandas dataframe:

Imagine that you want to process this data with the following Pandas data processing pipeline:

What if we would like to turn the values of cyl, the values of mfr, and the variable hp into interactive widgets that we can change and control? Is it possible? Yes, it is, and with hvPlot it’s not even difficult. Here are the steps:

First, we need to wrap our dataframe with .interactive(): idf = df.interactive(), so that this dataframe becomes interactive and we can use Panel widgets on this dataframe.

“.interactive stores a copy of your pipeline (series of method calls or other expressions on your data) and dynamically replays the pipeline whenever that widget changes.”

Second, we can define the panel widgets we would like to use. Here I defined a panel widget for cylinders, a widget for the manufacturer, and a widget to select the y axis.
Finally, we can replace the values or variables from the original Pandas pipeline to these widgets we just defined. We define the output of the pipeline as ipipeline:

Making an interactive plot and table

The interactive dataframe ipipeline just works like a normal Pandas dataframe when it comes to plotting. We can use our normal .plot method, or here I tried my favorite plotting method .hvplot. And magically, our plot becomes interactive!

Similar to a Pandas dataframe, our interactive dataframe supports the .pipe method, so we can pipe a function or class such as pn.widgets.Tabulator into this dataframe. The result shows an interactive table.

Building a dashboard

Now that we have a plot, a table, and three widgets, how do we arrange them into a dashboard?

Here we can make Panel objects out of our interactive pipelines using .panel(), then use Panel to arrange things however we like. Here we’ll put our plot and table into a pn.Column object, then use a template that puts the widgets into a sidebar to make the complete dashboard:

Deploying a dashboard

To launch this dashboard as a web server, we can simply run panel serve hvplot_interactive.ipynb, and your browser should now open up with a tab showing the dashboard from the beginning of this article. That’s all it takes!

For detailed info on how to deploy a dashboard to a server, check out the Panel documentation, or my previous article on deploying a dashboard to Google Cloud App Engine, and Google Cloud Run.

Recommended learning resources

Check out the official documentation: hvPlot .interactive and hvplot.holoviz.org.
Philipp Rudiger presented hvPlot .interactive at the PyData conference this year, here is the video.
Marc Skov Madsen has a great example of using hvPlot .interactive.

Hope you enjoy using hvPlot .interactive! If you have questions or want to connect to other HoloViz users check out https://discourse.holoviz.org/.

Acknowledgment: