Turn your data science scripts into websites with Streamlit

Turn your data science scripts into websites with Streamlit

Showcasing the findings of your data science/machine learning experiment can be difficult. While in the past, a PowerPoint presentation or a LaTeX file used to be enough for showcasing your project, with today's popularity of websites it is a good idea to know how to create a website for your project.

This is where Streamlit comes in. Streamlit is an open-source Python framework that allows you to create beautiful interactive websites for Machine Learning and Data Science projects without needing to have any web development skills.

Streamlit achieves this by allowing us to create a website by only adding a few Streamlit function calls to an existing python projects/experiments.

After adding the function calls Streamlit will display all the selected items and watch for any changes inside the script and update the website accordingly.

At the moment Streamlit supports displaying text, data, code as well as lots of interactive widgets, and many charting libraries including Matplotlib – for basic plotting – as well as  Vega-Lite, deck.gl and Plotly for interactive graphs.

In this article, I want to show you the basics of how to use Streamlit to create beautiful python dashboards.

Data Visualization Example
Figure 1: Data Visualization Example

Installation

Streamlit can be installed using PIP:

pip install streamlit

After installing Streamlit you can test if everything is working by running the hello world app:

streamlit hello

This will open a website on localhost:8501 where you can see a few Streamlit examples.

Streamlit Hello World
Figure 2: Streamlit Hello World

Getting started

Now that we are sure that everything works correctly we can start experimenting with Streamlit.

First, we need to import Streamlit:

import streamlit as st

You can run the file by writing:

streamlit run first_app.py

This will open a new browser tab showing your current script. This browser window will automatically update after every change.

Displaying text

Streamlit has multiple methods for adding text including st.text, st.markdown and st.title.

# Add a title
st.title('My first app')
# Add some text
st.text('Streamlit is great')

That's it. Your application now displays a title and some text.

Streamlit display text
Figure 3: Streamlit display text

Display a pandas dataframe

In Streamlit a Pandas DataFrame can be display using the st.dataframe method.

import pandas as pd

st.dataframe(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))
Display data-frame
Figure 4: Display data-frame

Additionally to the .dataframe method, Streamlit offers us the .write method, which automatically detects what it is passed and displays it accordingly.

st.write(pandas.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

Plot a line chart

Streamlit supports several popular data visualization libraries including Matplotlib, Vega Lite, deck.gl and Plotly as well as their own simple library which we will use for creating some simple graphs.

To create a line chart with some random data the following code can be used:

import numpy as np

chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])

st.line_chart(chart_data)
Line Chart
Figure 5: Line Chart

Plot a map

One thing that is super easy with Streamlit is to create a map with some data-points on it. This can be done with st.map().

map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(map_data)
Map
Figure 6: Map

Use Widgets

With widgets, Streamlit allows you to create beautiful interactive dashboards. Streamlit provides buttons, checkboxes, sliders, text input, date inputs and much more. For more information about all the available widgets check out the API reference.

Use checkboxes to show/hide data

One of the widgets supported by Streamlit is the checkbox which can be used to for example show or hide items.

if st.checkbox('Show dataframe'):
    st.dataframe(pd.DataFrame({
        'first column': [1, 2, 3, 4],
        'second column': [10, 20, 30, 40]
    }))

    chart_data = pd.DataFrame(
        np.random.randn(20, 3),
        columns=['a', 'b', 'c'])

    st.line_chart(chart_data)

    map_data = pd.DataFrame(
        np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
        columns=['lat', 'lon'])

    st.map(map_data)
Use checkbox to show/hide something
Figure 7: Use checkbox to show/hide something

Filter a data-frame using a selectbox

Selectboxes can be used to select one of multiple options from a list. This is super useful for filtering your data. Using it we can for example filter through the columns of a pandas data-frame.

df = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])

column = st.selectbox(
    'What column to you want to display',
     df.columns)

st.line_chart(df[column])
Selectbox
Figure 8: Selectbox

You can also select multiple items at once using st.multiselect instead of st.selectbox.

df = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])

columns = st.multiselect(
    label='What column to you want to display', options=df.columns)

st.line_chart(df[columns])
Multiselectbox
Figure 9: Multiselectbox

Slider

Another great widget is the slider. A slider can be used to select some specific value or multiple values. To create a simple slider where you can select between 0-100 the following code can be used.

x = st.slider('Select a value')
st.write(x, 'squared is', x * x)
Slider Example
Figure 10: Slider Example

If you don't want to select one but multiple values you need to pass multiple default values to the values argument.

x = st.slider(
    'Select a range of values',
    0.0, 100.0, (25.0, 75.0))
st.write('Range values:', x)
Multivalue slider
Figure 11: Multivalue slider

Cache data

Caching is super important in Streamlit since it repeatedly runs your code from top to bottom and you don't want it to for example reload the entire data on every iteration.

This is where caching comes in. Caching allows you to reuse the already load variable instead of reloading/recomputing it. You can cache data by using the st.cache decorator.

@st.cache
def fetch_and_clean_data():
    df = pd.read_csv('<some csv>')
    # do some cleaning
    return df

For more information about caching and other useful features be sure to take a look at the Streamlit documentation.

Conclusion

In this article, I went over what Streamlit is and how to use it to turn your data science projects into beautiful websites. I think Streamlit is really cool because it's so easy to use and you don't need to have any web development experience to build a website.

If you are interested I also create a Strock Price Dashboard using Streamlit. You can take a look at it on my Github.

That’s all from this article. If you have any questions or just want to chat with me feel free to leave a comment below or contact me on social media. If you want to get continuous updates about my blog make sure to follow me on Medium and join my newsletter.