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

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

Building interactive Dashboards at Factly using Streamlit

Goal: Getting started with Streamlit; This blog shares an example explaining various functionalities that Streamlit provides and how to use them.

Methodology: We are going to create a full-fledged page with Streamlit and Altair with the following features in mind and the final output should look something similar to the below image :

• Caching mechanism for datasets
• Well defined KPIs
• Multiple input widgets
• Multiple interactive charts
• Additional notes and information

Before we begin :

1. Recap session: Previously, our discussion focused on what Streamlit is and what are its important features are regarding generating a data dashboard as an application. We move further and create a chart that changes along with the selection made for the dropdown.
2. What our end goal looks like: For this blog, we will focus our development on the main features of Streamlit and prepare a fully functioning page for a dashboard with the help of the Altair chart.
3. What dataset are we using and how to get it: There are 2 datasets that we will be using and both of them are fromWorld Heritage Sites UNESCO: sites in danger by region, boundary clarifications adopted by year & by region.
   The original source of these datasets is UNESCO, although you can also get the cleaned dataset from DATAFUL.
4. Where you can find the complete code file: You will find the code in Github Gist as well.
5. To view the data dashboard , visit UNESCO World Heritage Sites

Caching mechanism :

Where is your dataset present? Is it within your folder structure, or Google sheet, or as an S3 object or some other format? And, how big your dataset - KBs or MBs? These pointers matter a lot while you are retrieving your datasets and loading them into the dashboard. If there is no caching implemented, you may find yourself in a situation where the same dataset is being downloaded again and again whenever a specific user tries to visit a page for a session.

Thus, in simple words, for the first time, the function executes but it saves the output result so that it could bypass time-consuming tasks for that particular process going further.

To implement caching, you need to decorate the function which is needed to memoize with st.cache

Thus, in simple words, For the first time, the function executes but it saves the output result so that it could bypass time-consuming tasks for that particular process going further.

To implement caching, you need to decorate the function which is needed to memoize with st.cache

Well Defined KPIs :

Streamlit provides a very simple and decent visual in representing your KPI, using the st.metric function. For a metric, there are 3 components you can add : label, value and delta.

• The objective for metric in our case is that we wish to display a total number of danger regions in our dataset that lies among natural, cultural, and mixed categories. Thus, we need 3 values to represent the total measures.
• To break the page into 3 equal columnar spaces, we make use of st.columns into 3 different spaces names as metric_col_1, metric_col_2 andmetric_col_3 .
• To put metric values inside each column we use withKeyword, in a similar manner like context manager.
• To create a metric in Streamlit we used the functionality st.metricwhere you can add the label for the value you wish to represent and the value can be retrieved with simple pandas operations.
• And this will produce us an output that will look something like the mentioned below figure.

Multiple Interactive Charts

Our objective is to create multiple charts with enabled interactivity among them. So, changes in one chart are reflected in another in one way or another.

Streamlit offers integration with various visualization platforms like Matplotlib, Bokeh, Plotly, Altair, and many more. For our case, we will use the Altair library which we used previously to create charts and then render it in Streamlit.

• In the chart, we would like to break the page into 2 equal columns and add a charts at the same horizontal level which we achieved with st.columns
• We made a multi-selection object with Altair so that when one entity is selected on one chart, it gets reflected on the other chart as well. For our case, we decide to make 2 charts:

1. A bubble chart that shows the percentage of region counts, is incorporated with a text chart so that one can view labels among the bubbles.
2. Stacked bar chart which represents total values of danger

• Multi-selection objects, in our case click, could select a particular region on the chart. The selection object is added to the chart with .add_selection attribute.
• Once all the charts are ready, we combine them with the | operator, which is horizontal concatenating, and then later render them to a Streamlit page with st.altair_chart
• To test your interactivity, click on any bubble on the bubble chart and the corresponding region will be highlighted on the next chart.
• With all the code the output received, at the Streamlit page would look something like this :

Multiple Input params:

Objective: We wish to add input widgets where users can add input accordingly and get the charts accordingly.

• We will use the dataset that holds value for boundary clarification for year and region and apply input widgets on year and region to render a bubble timeline chart accordingly.
• This is a new dataset; hence, we need to load it with pandas accordingly.

To filter out the period, we will create a slider where users could select the period accordingly. We will use the st.slider for this purpose. We collect all the years from the data frame and pass them into options inside the Streamlit API.

• To have multi-select on regions, we use a multi-select drop-down from Streamlit and make all its options equal to the regions we have in our dataset.

With the above code, we will get the following response similar to :

• Selection made in the slider will be available with selected_min_time and selected_max_time, and for selection for regions can be made available with selected_region, these variables are then used along with pandas to filter out the data frame accordingly. Now modified_boundary_df is the dataframe that is used to create charts further.

• We will again use an Altair chart and render it with Streamlit. There is a slight change other than the bubble chart in the text_bubble, where we are trying to label all those bubbles whose values are higher than 10.

This will lead to the generation of a chart that looks something like this:

Adding notes :

We can use st.info to add information regarding a topic to make it stand out and display the text more visually.

Conclusion: By following the above steps, you can create a functioning page with exposure to Streamlit API. We could only cover a portion of what Streamlit offers; you could implement more features on your own going forward. In the next blog, we will focus our discussion on the methodology of deploying a Streamlit dashboard.