Build Your First Interactive Data Science Web App with Streamlit | by Yong Cui | Towards Data Science

Web applications are one of the most convenient ways to showcase your data science work. Building web applications can be daunting to many data scientists if they don’t have any web development experience. However, with the streamlit framework, web applications are no longer difficult for data scientists — if you know Python, you can build interactive web apps with streamlit — this awesome framework does the hard lift to make and layout web elements for us under the hood. We’ll simply focus on the data part.
To install the streamlit framework, use the pip tool.
pip install streamlit
Once it’s installed, you can check its version.
streamlit --version
If you have streamlit installed correctly, you can run the demo app by running the following. In the app, you’ll have an opportunity to see various possibilities that you can do with the streamlit framework.
streamlit hello
In the demo app, you’ll find out that there are so many cool features supported by the streamlit framework, and these features are commonly needed by data scientists. In this article, I’d like to provide a short tutorial on getting started with this awesome web framework. I bet that if you know Python, it will take you just a few hours to have a reasonable understanding of this tool.
If you want to follow along with this tutorial, you can find the script on the GitHub page here. For the purpose of this tutorial, we’ll be using the Titanic dataset to showcase some common streamlit techniques with a focus on interactive widgets.
Where applicable, I’ll also integrate some optional widgets such that you’ll be learning more along the way.
At its core, each streamlit web app is a Python script. At the top of the file, we import the necessary dependencies. In this case, we’ll be using multiple modules, as shown below.
import pandas as pdimport timeimport streamlit as stimport plotly.express as px
In terms of the dataset, we’ll use the titanic dataset, which we will download from the internet.
One notable feature is the use of the decorator st.cache, which will increase the web responsiveness because of the cache of the data that have been fetched previously. In this case, the titanic dataset will be fetched just once and with the refresh of the web page, it won’t be fetched again. Relatedly, it should be noted that the script will run again once there is any change in your code, so taking advantage of the caching feature is essential to improve the user experience.
To view the data, we can simply run st.dataframe(titanic_data), and you’ll see something like below.
In streamlit, there are several ways to put headings to your web page. To put a title to your page, you can run: st.title(“My First Streamlit App”).
To add additional headers at two different levels, you can use st.header() and st.subheader().
Alternatively, you can take advantage of the markdown feature, you can add headers like st.markdown(“#Just like a header”) and st.markdown(“#Just like a subheader”).
Besides headings, an important organizational element in streamlit is the sidebar, where you can add configuration elements that modify the elements shown on the main page. To add a sidebar, you simply add st.sidebar to your script. Notably, you’ll be likely to add more elements to the sidebar. Thus, instead of using st.sidebar to refer to the sidebar, it’s a good idea to create a reference to the sidebar, something like sidebar = st.sidebar.
To collect users’ responses, we have several options for creating multi-choice widgets. The first widget is the radio button.
You’ll see something like below. Note that, the selected option will be the actual value of the displayed options instead of the selected numeric index. In this case, it will be the text.
The second widget is the selectbox, which provides a drop-down list from which you can make your choice. The code will be like this.
selected_sex = st.selectbox("Select Sex", titanic_data['sex'].unique())st.write(f"Selected Option: {selected_sex!r}")
The interaction will be like the below.
When you require users to enter multiple choices, you should use the multiselect widget, as shown below.
selected_decks = st.multiselect("Select Decks", titanic_data['deck'].unique())st.write("Selected Decks:", selected_decks)
For this widget, you’ll see something like below.
When you need to collect numbers as input, we can use the number_input widget. As always, you can name the widget and set a value to the widget.
In the code, I also included a “notification” feature in streamlit. When you want to show an error message, you use st.error(), while to show a successful message, you use st.success(). Another included feature is the use of columns (st.beta_columns), which is useful when you have parallel widgets that are closely related to each other. In this case, it’s reasonable to group two widgets that collect minimum and maximum ages together.
With the code above, we’ll see a widget shown below.
In addition to this widget, streamlit also provides a slider widget that allows the user to specify a number input without keying anything. Here’s the code.
With the slider widget, you specify the widget’s name. In the meantime, you set the minimum and maximum values. Besides the slider widget, the above code includes another feature called an expander (st.beta_expander). This feature is useful when you want to hide some optional widgets. You can specify if you want the expander to be expanded by default.
The following figure shows you such an interactive slider widget.
To collect text data, we can use the text_input and the text_area widgets. The major difference is that the text_input widget is good for collecting a short text string, while the text_area widget is preferred if you want to collect a large amount of text data.
The above code shows you how to display these widgets. I also included two extra features. One is the code displaying widget (st.echo), which will show the code included within the with statement in addition to the widget. The other feature is an Easter egg, which is to launch a bunch of balloons (st.balloons). See the figure below for such a feature.
Progress BarSometimes, if your app works on a large amount of data and the wait time is longer than that a user can expect, it’s a good idea to provide a progress bar. The code is shown below.
This is what the progress bar looks like in the app.
MarkdownStreamlit supports markdown entries, which create a lot of possibilities for us. To use this feature, you’ll simply use st.markdown. To learn more about the markdown syntax, you can go to GitHub.
Here’s some commonly used examples.
PlotsIf your app wants to show plots, streamlit natively supports many third-party figures. Here’s a list that is taken from its official documentation.
write(mpl_fig): Displays a Matplotlib figure.write(altair): Displays an Altair chart.write(graphviz): Displays a Graphviz graph.write(plotly_fig): Displays a Plotly figure.write(bokeh_fig): Displays a Bokeh figure.
The following figure shows you a figure made with Plotly.
In this article, we reviewed some useful features that you should include in your interactive web app. As you can see, streamlit provides a variety of features that allow you to collect numbers, texts, multi-choice options, and display code, markdown, and figures. With streamlit, you pretty much have no worries about the web elements. You’ll just need to focus on building the content of the web app.