Building an Interactive Dashboard in Fewer Than 50 Lines of Code

Snapshot of the dashboard

A big challenge that a data scientist faces is presenting their analysis through an interactive web application. In most cases, they rely on a front-end developer for building a web app.

I recently came across Streamlit which helps data scientists build a very interactive web application n few hours, without any prior knowledge in web development, and using only python language.

In this article, we’ll create a simple exploratory dashboard using data from Kaggle, Streamlit and Vega-lite.

The Setup

You need python for using Streamlit. Make sure python is already installed. From 2020, there will be no support for python 2.* so try installing python 3.

Setting up is pretty straight forward— run the following command in CLI:

$ pip install streamlit

Creating a ‘Hello world’ Program

You can test the installation by running “Hello” command in CLI

$ streamlit hello

This should open a window in your browser with a sample dashboard. That’s it! We are set to develop our first dashboard — let’s start!

Streamlit Hello

Create dashboard.py

Open a new page in an editor of your choice and save it as a “.py” file. Let’s import the necessary libraries.

import streamlit as st
import pandas as pd #will be used for processing the data

Adding a title

Title can be easily added as below:

st.title("Exploratory Dashboard")

Lets execute “dashboard.py” to see how it looks on the screen. Run the following command in your terminal:

$ streamlit run dashboard.py

As soon as the above command is executed, the browser will open the page as shown below:

Exploratory dashboard — dashboard.py

Data Processing

Lets use pandas to read and process the data:

@st.cache
def load_data():
   data = pd.read_csv('ImdbData.csv')
   return data
data = load_data()

Notice the decorator (@st.cache) just above the load_data() function. It is used to cache the data locally. You can get more information on this here.

If you are using python 3 then you can add the data frame in the dashboard by just calling the dataframe variable:

data #dataframe from ImdbData.csv

This will add the dataframe in the dashboard as below:

Dashboard with Data-frame

Notice the check box — Show Data — you can add the check box to show or hide the table as below:

if st.checkbox('Show Data'):
   data

Building charts

Streamlit supports most of the popular chart libraries such as vega-lite, Plotly, bokeh and more. We will use vega-lite in this example.

It is possible to add Vega-Lite chart through Streamlit Vega-Lite api as below:

st.vega_lite_chart(data=None, spec=None, width=0, use_container_width=False, **kwargs)

More on chart API here. Lets create a scatter plot using the data-frame which we had created earlier:

st.vega_lite_chart(data, {
     'width': 'container',
     'height': 400,
     'mark':'circle',
     'encoding':{
        'x':{
           'field':'Rating',
           'type': 'quantitative'
         },
        'y':{
           'field':'Reviews',
           'type':'quantitative'
          },
        'size':{
           'field':'Rating',
           'type':'quantitative'
          },
        'color':{
           'field':'Content Rating',
           'type':'nominal'}
         }
       }, use_container_width=True)

As soon as you save the “dashboard.py”, the dashboard will be updated and would look like:

Dashboard with scatter plot

Adding Filters — checkbox, dropdown and sliders

Now we have our chart ready. An essential part of any dashboard is the ability to slice and dice data through filters. Various types of data filters such as dropdown for categorical values, sliders from continuous values and so on can be built.

Streamlit exposes simple APIs for adding filters — dropdowns, sliders, checkbox. Lets explore this further!

Currently the scatter plot shows all the data points (App’s) in the data. Lets add a dropdown to filter the data by “Genres”.

Genres = st.selectbox("Genres", data['Genres'].unique())
if Genres:
    data = data[data.Genres.isin(Genres)]

This code will add a dropdown with label “Genres” and it will have distinct values from the genres column.

With a small change it is also possible to make it a multiselect dropdown:

Genres = st.multiselect("Genres", data['Genres'].unique())
if Genres:
    data = data[data.Genres.isin(Genres)]

To add these dropdowns on the left panel, modify the syntax as below:

Genres = st.sidebar.multiselect("Genres", data['Genres'].unique())
if Genres:
    data = data[data.Genres.isin(Genres)]

Dashboard in action

Voila! Streamlit is in its nascent stage but has a huge potential. Though there are few limitation such as it only supports vertical layout so you cannot have two charts side-by-side. They can only be one below the other.

Vivek is a data enthusiast by heart. He enjoys applying his data analysis skills to extract insights from large data set and visualize then in a meaningful story. He has been providing data solutions accross industries through his career.