Streamlit in Practice | Learn how to Create Interactive Dashboards
What is a Dashboard?
One of the virtues of a data scientist for sure is knowing what to look for in the gigantic amount that is generated daily, but perhaps more important than that, is knowing how to pass this information on to others, for example, at a meeting of the present the information extracted from the data to your boss in an elegant and succinct way.
The purpose of setting up a dashboard, most of the time, is to present callsigns or insights to people, with the purpose of making a decision from these callsigns.
To do this many people use slides with graphics added there, but have you considered using python to make your presentations? Create interactive and very elegant presentations using lines of code? That is what I am going to teach today in this article.
The advantage of using a dashboard to show these mentioned indicators is that depending on your application you can perform monitoring of this data in real-time, that is, it is an application that can be updated every second, it is not static as a simple slide. For example, the image at the beginning of this article is from the NASA control room. For them, the data must be shown in real-time to know the real situation of a launch or the landing of a spacecraft on another planet.
How to create a Dashboard?
The first step is the one that a data scientist already performs every day, the exploratory analysis of the data, I personally like to do it on google colab, but feel free to do it on Jupyter Notebook or any other tool you use.
As the focus of this article is not on data exploration, this step will not be explained, however, the notebook I used will be available in the Github repository.
To create our dashboard, we will use the Streamlit library, which is the best I know of in python that allows you to perform this type of task.
to install it is very simple, you can use the following command:
pip install streamlit
The next step is to create a file in your favorite IDE, in my case I will use VS Code, and import the streamlit as follows:
import streamlit as st
In this project, we will use two more libraries, NumPy and Pandas
Let’s start writing our code
As usual, initially, we will import all libraries
The streamlit needs our code to be inside a function, for that, we will add the following code.
All the code on our dashboard must be inside the main function.
Now let’s get to know the main functions of the Streamlit library:
The first one that we will know is the
st.title(). It is a very simple and self-explanatory function, its goal is to add a title to your dashboard. There are other ways to write headlines, for example using the markdown markup language. For this we use the following function:
And with quotes inside the parentheses, we can write using markdown.
If you want to present a mathematical formula on your dashboard, you can use LaTeX to write it with the command
Another function that we are going to use in our application is the
st.subheader() which is basically the second level of title.
As you can see, there are countless functions for writing texts, titles, formulas with the streamlit library, unfortunately, I can’t comment on all of them, it would be a huge article, but I’ll leave the link to the documentation in case you want to see other ways to add texts to your dashboard.
Another function that is very important for us and that we will use in the project is the function:
@st.cache . To understand the purpose of this function, imagine that we have to use a dataset that will not be added new data in it, and that dataset is heavy and will be loaded every time the application is opened, that would be a waste of time, so we load just once and we save it with this function, so every time we enter our application, it will not be necessary the time to reload the data.
These are some basic functions of this fantastic library, now let’s see how they are applied to our project:
We will elaborate a function to load our dataset and make some adjustments to the data
In this step, we created a function to load our data put the column names in lowercase, to facilitate the code and we also changed the date field to the datetime format.
The parameter of this function is to load a certain number of columns, let’s call this function and pass the number 1000
To view your application so far, in the terminal you must use the following command streamlit run [name of your application].
my application name is main.py, notice how it looks:
After that your browser will open at that localhost and you will see a page like this:
You may be wondering, but I didn’t load 1000 lines from my daataset? Where are these lines? It is in the cache, however, at no time do we ask to show this data, we will do that.
Let’s understand the code we just wrote, initially, we created an object, a checkbox in the sidebar (side of the application), when we click on this checkbox it has a True value and with the st.success() function we will present a message confirming the action, and finally, with the function st.write() we will show the lines of our dataset, let’s see how our application is doing.
When you open your application, you will come across this screen, when you click on the checkbox, your screen will look like this:
Now we are going to add a histogram to our application to check times when we had peak runs.
Do not be alarmed by the code, we will understand this code line by line.
Initially, we create a subtitle with the subheader function, then we create a histogram that counts the number of runs for each hour of the day.
Finally, we use the st.bar_chart() function to plot bar graphs.
The next step was to use the latitude and longitude coordinates to plot a map with the runs, to do that with the Streamlit is very easy, just use the st.map() function, however, we want an interactive graph with the function st.slide() we created a slide that goes from 1 to 24 (hours of the day) and the last parameter is the step of that slide, which in this case is 1 in 1.
To integrate this slide with the map function, a new variable f_data was created that will receive the value of the hour of the day selected through the slide.
And finally, let’s pass this variable f_data as a parameter of the map function.
Let’s check the result!
Here are some images that show the result we had. It is a simple project, but it allows you to go much further.
I hope this article has helped you in some way, feel free to leave comments with suggestions/tips/criticisms.