Streamlit in Practice | Learn how to Create Interactive Dashboards

Rafael Messias Grecco
Mar 8 · 7 min read
NASA Mission Control. nasa.gov

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,, I personally like to do it on google colab, but feel free to do it on Jupyter Notebook or any other tool you use.

In this example, we will use the data provided by UBER, which can be found here. Here I will use data from New York City, however here- you can find data from other cities.

Uber Logo. uber.com

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.

Streamlit

Streamlit Logo. streamlit.io

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

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:

st.markdown()

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 st.latex() .

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.

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.

If you want to start learning data science, but don’t know where to start, consider reading this article written by me.

Here is the complete code:

If you want to visit Github, here is the link.

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data…

Sign up for Analytics Vidhya News Bytes

By Analytics Vidhya

Latest news from Analytics Vidhya on our Hackathons and some of our best articles! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Rafael Messias Grecco

Written by

Electrical engineering student and technology enthusiast. Projects in fields such as Machine Learning, Time Series and Computer Vision. https://www.linkedin.com

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store