(Part-1) Building interactive Dashboards at Factly using Streamlit

Factly Dashboards are a collection of simple, easy-to-understand interactive charts built using Streamlit, which is an open-source Python library to build and share data apps. All the dashboards are developed using the official public data available on the specific topic. In addition to the relevant data for analysis, each of the dashboards also provides access to the necessary knowledge and context for basic to detailed research on a particular topic. We strive to bridge the gap between the contextual knowledge required on the topic, and the relevant data/technicality to present it, by providing interactive charts and visualisations.

There are various ways of publishing data stories, like writing detailed articles on a specific topic. From our experience, writing articles is not a suitable format for all the data stories, as we run the risk of limiting the research to what we think are important areas of analysis. We might be missing what other users or researchers think of as interesting data points for analysis. This is particularly true as the complexity of the available data increases on a particular topic. That is when we realised that providing dashboards with all the available data and other functional knowledge to understand a specific topic opens up more interesting opportunities for users to analyse the data in different ways. A casual reader might only be interested in a piece of high-level information, whereas data journalists or researchers could perform a detailed analysis based on their specific needs. The datasets used in the dashboards are updated as and when the updated data is available. So, we decided that developing dynamic dashboards with an easily updatable data source was the way to go.

Through a series of blog posts, we like to take a deep dive into our entire process starting from development to deployment of these dashboards including updates to the dashboards to keep them current. We will take one of the dashboards as an example and provide the actual implementation with every single piece of code. Through this series of blog posts, we hope to inspire other users interested in developing similar dashboards and also learn from others’ experiences about the areas in which we could improve.

Instead of one long blog post with all the details crammed in, we will break the concepts down into smaller topics to keep it interesting and meaningful:

PART 1: Getting Started with Streamlit — Building your First Dashboard Page

PART 2: Adding Aesthetics and more Interactivity to Streamlit Dashboards

PART 3: How to Deploy and Update your Streamlit Dashboards

PART 1

Getting Started with Streamlit — Building your First Dashboard Page

Before selecting any technical solution, there are various characteristics one should consider, such as simplicity, community, deployment, etc. We will try to explain why Streamlit fits as one of the best solutions for building data apps with interesting dashboards.

1. Community:

• As an open-source tool, Streamlit attracts a lot of contributors. The community is very active and helpful in answering questions and providing suggestions.
• As with any good open-source solution, users are actively reporting any existing issues, proposing solutions, and even better open PRs. At the time of writing, there are 2310 closed PRs by 134 contributors.
• At the time of writing this post, Streamlit has **1.7K forks** and 19.5K stars which signify that there is a large community of open-source enthusiasts who are engaged with the tool.
• The above star history compared to the competitor Dash is an indicator that Streamlit is heading in the right direction.

2. Simplicity:

• It is made for Python, with simplicity at its core, from installation using pip to the API references.

3. Utilities/Widgets for dashboards:

• As a dashboard, the major focus is widgets, visualisation and documentation, and Streamlit aces in all.
• There are a bunch of interesting widget supports like slider, multiselect, dropdown buttons, check box, calendar, etc.
• There is a good set of layouts and containers such as the sidebar, columns and expander, and many more that can add aesthetics to your page.
• For visualisation support, it can render charts not only from Python’s widely used Matplotlib but also from Altair, Bokeh, Vega-lite, and many more.
• For text and documentation, Streamlit supports markdown

The unique features of our dashboards include:

• Our deployed dashboards pick up the datasets from Google sheets in real-time, hence the dashboards update in real-time whenever an analyst updates the datasets.
• We have used declarative statistical visualisation Altair built-in Vega and Vega-Lite rather than traditional Matplotlib, as it provides better interactive charts.

Step-by-step building of the dashboards

• Project setup
• Installation
• An entry point for the dashboard application
• Creating Charts and adding filters
• Writing Context and additional information
• Launch the Streamlit dashboard application

1. Project setup

• Create separate repo with the following folder structure

├── bystate.py             # script containing charts 
├── world_heritages.csv    # dataset in csv file
├── introduction.py        # about section on Dashboard
├── main.py                # entry point to streamlit application
└── favicon.png            # favicon for the dashboard

2. Installation

• Although Streamlit provides installation through a host of environments like conda, pipenv and poetry, we have chosen to use pip.
• Create a virtual environment and activate it.

python3 -m venv .venv
source .venv/bin/activate

• Install Streamlit library with pip:

pip3 install streamlit

• You can look into the official documentation for more options.
• Import visualisation library for plotting charts.

pip3 install altair

3. Building entry-point script main.py page:

• A main.py script act as the entry point for the dashboard, which runs all the pages/parts of the dashboard independently.
• Importing all the required libraries

import streamlit as st
import regionwise
import introduction

• Configuring the default setting of the page: As quoted in Streamlit documentation “This must be the first Streamlit command used in your app, and must only be set once”. This comprises all the details about the Page title, layout, and page icon.

st.set_page_config(
    layout="wide",
    page_icon="favicon.png",
    page_title="World Heritage Sites",
)

• It’s time to add different Pages to the Sidebar so that one can navigate to different sections of the dashboard. In the below example we selected Radio List as a method to display various pages in a dashboard, but it can be represented in a different format like a Dropdown too.

# List of all the pages needed for dashboard
PAGES = {
    "What is a World Heritages?": introduction,
    "Hertages by Location": regionwise,
}
# Adding all the elements
selection = st.sidebar.radio("Explore the dashboard", list(PAGES.keys()))
page = PAGES[selection]
# initiating the page which is picked from Radio Selection
page.app()

4. Building Dashboard Page with responsive charts

• It’s time to work on the page which will constitute the actual charts and filters.
• We will start by importing the dependencies inside regionwise.py

import streamlit as st
import pandas as pd
import altair as alt

• Once we have all the required dependencies, we need to get the dataset and read it as a Pandas DataFrame for better handling. As an example, we will try to read the dataset from the local storage. Details for world heritage can be obtained from the World Heritage Convention Portal and cleaned dataset is also available at DataFul which can be download in csv format.

def app() :
  data = pd.read_csv("world_heritages.csv")

• Note that we have put the import functionality inside an app() function, in our entry point script main.py we call the function app() function, thus every other page in our dashboard will have a function app() function.
• A key component of a dashboard is widgets elements, as they provide a lot of functionality to the dashboard by providing users the option to apply different data perspectives to a single dashboard. As an example, we will add a dropdown element for states of India that will act as a filter to the report.

# Gather all the state list from datasets to pass it to Drop-Down element
region_list = data["regions"].unique().tolist()
selected_region = st.selectbox(
    label = "Select a Region",
    options = region_list
)
# Modifiying the dataset accordingly if there is a selection
if selected_region : 
  data = data[data["regions"] == selected_region]

• Once we have all the filtered datasets based on the selection, it should be used for creating charts for the dashboard. Streamlit provides various options to render charts and we chose to go with Altair for its simplicity in creating interactive visualisations.
• We will create a chart to show the number of World Heritage Sites included every year.

regionwise_chart = (
        alt.Chart(data)
        .mark_bar(opacity=0.6, stroke="black", strokeWidth=1)
        .encode(
            x=alt.X("year:O", axis=alt.Axis(title="", labelAngle=0)),
            y=alt.Y("value:Q", axis=alt.Axis(title="")),
            color=alt.Color("value:O", legend=None),
            tooltip=[
                alt.Tooltip("value:Q", format=".2f", title="")
            ],
        )
        .properties(title="Overall Year-wise Increment in WH")
    )
    
    st.altair_chart(regionwise_chart, use_container_width=True)

5. Introduction Page:

• It’s very useful for the reader if there is a context regarding what the dashboard is built on.
• Thus, a little bit of information regarding UNESCO World Heritage Site, which is our main focus on building a dashboard, and information about different pages present in the dashboard, could be provided in introduction.py

import streamlit as st
def app():
  st.title("UNESCO World Heritage Sites")st.subheader("What is a World Heritage Site?")
    
  st.write("Those places on the Earth which have an outstanding universal value such as cultural or physical significance to humanity are designated as World Heritage and are prescribed on the World Heritage List prepared by UNESCO. Such places can be natural or man-made. Ancient ruins or historical structures, buildings, islands, mountains, gardens, monuments, deserts, wilderness areas, or anything which has some uniqueness, international importance, or historical value and deserves special protection are designated by the World Heritage Convention as World Heritage Sites.")

6. Launching the application :

• Open the terminal and navigate to the dedicated dashboard project.
• Run this command within the terminal under the activated virtual environment.

streamlit run main.py

• Your dashboard is up and running at http://localhost:8501

7. Open the mentioned URL and you will see your dashboard up and running. Select the Heritage by Location radio button to navigate to the dashboard page. There you will find the dropdown list for various regions in the world. Choose anyone and you now have an interactive dashboard for yourself, which looks something like this.

8. In the later series, we will look into how to make it a full-fledged page with help of various Streamlit elements and further deploy the dashboard in public.

9. Do write to us / leave a comment for any query related to the things mentioned in the blog. Feedback is appreciated.

This is Part-1 of the series on building interactive dashboards at Factly. You can read Part-2 here.

(Part-2) Building interactive Dashboards at Factly using Streamlit