Data Science

Streamlit is an open-source framework allowing data scientists to turn python scripts into shareable web apps in minutes

👁 The final product - GIF by Author

This article outlines a simple example of how to create an interactive dashboard, like the one shown above, using Streamlit. Streamlit integrates very nicely with Plotly graphing library and so experience using this is a bonus and makes the transition to Streamlit very seamless.

Header and Using Images

In this section, we look at the code involved with inserting the title and image of the Streamlit app. To do this, we need to use the columns feature st.columns(), which allows us to insert containers laid out as side-by-side columns. Within these columns, we use st.image() and st.title() to insert the desired content. There are many other options for inserting different styles of text.

👁 Dashboard generated by code below - Image by Author

Inserting a Plot and Filtering Data Based on User Inputs

The easiest way to insert interactive plots in Streamlit is to use Plotly, which is a data visualisation library in Python (and other languages too). When a plot has been created in Plotly, it is extremely easy to then display it in Streamlit using _st.plotly_chart()_.

In this example, we’ll use the life expectancy vs GDP dataset built into Plotly as it has a number of variables which demonstrate the Streamlit functionality nicely.

👁 The Data - Image by Author

👁 Example Plotly Graph - Image by Author

From this data, we can create a very nice plot using Plotly, but we want to use Streamlit to allow the user to change how the data is displayed. In particular:

• Use st.slider() to allow the user to choose which year of the data to display

👁 Image by Author

• Use st.selectbox() to allow the user to choose which continent to display

👁 Image by Author

• Use st.checkbox() to allow the user to choose whether to log the x-axis

👁 Image by Author

Filtering Data

In order to filter data, let’s first include the slider, select box and check box as shown above. Again, we will use st.columns() to make the elements appear side-by-side rather than vertically, which is the default in Streamlit.

Note here that unlike st.image() and st.title() seen previously, the st.slider(), st.selectbox() and st.checkbox() all return values based on what the user inputs, which need to be assigned to variables as seen in the code above.

So, with all the code up to this point, our dashboard will now look like 👇

👁 Image by Author

So the next step is to load in the data, take these user inputs and produce a plot.

Reading in the Data and Applying Filters

After reading in the data, we can apply the filters given to us by the user.

Each time the user updates one of the inputs, the app will refresh to reflect the update. More on how to optimize this later!

Producing and displaying a plot

To produce a plot, we can use Plotly in the same way as you would in a Jupyter Notebook, except fig.show() is no longer used to display the image – instead, we will use _st.plotly_chart()_ to display the plot within the dashboard.

The Final Product

In ~50 lines of code we have a fully functioning dashboard 🎉

👁 GIF by Author

The full code can be viewed on my GitHub here 👈

Running Your Streamlit App

Having written all the code to build a lovely dashboard, let’s now look at how to deploy it. The easiest way to deploy a Streamlit app is on your local machine.

To do so, just open your command line (terminal etc.), navigate to the directory where you have saved your .py file and run the command shown below (substituting in your file name for _my_filename.py)

streamlit run my_file_name.py

Your app should now open in your default web browser as a fully interactive page that you can play around with 🤸‍♀️

Some Extra Tips

• Using this command at the start of our code we can make the dashboard fill the entire width of the screen. Sometimes, without this, if you view on a wide display you will not get the best use of space.

st.set_page_config(layout="wide")

• In Streamlit it may be the case that you have multiple functions – some of which are not affected by certain user inputs. Of course, it is not optimal to have to rerun a function if the inputs haven’t changed! @st.cache, as shown below, tells Streamlit to check whether the inputs have changed before rerunning that particular function, which can save you lots of time. Documentation is available here.

@st.cache
def my_function(i1, i2, ...):
 x = ...
 return x

---

If you get value from articles like these and aren’t already a Medium member, consider signing up to medium using the link below! 👇

Join Medium with my referral link – Rian Dolphin

Share This Article

• Share on Facebook
• Share on LinkedIn
• Share on X