Streamlit Python

Prerequisites¶

Before you get started, you’re going to need a few things:

  • Your favorite IDE or text editor

If you haven’t already, take a few minutes to read through Mainconcepts to understand Streamlit’s data flow model.

Set up your virtual environment¶

Regardless of which package management tool you’re using, we recommend runningthe commands on this page in a virtual environment. This ensures that the dependenciespulled in for Streamlit don’t impact any other Python projectsyou’re working on.

Streamlitfreecodecamp Build 12 Data Apps in Python with Streamlit Learn how to build interactive and data-driven web apps in Python using the Streamlit library. Start Guided Tutorial. Welcome to this guided tutorial on building your first interactive, data dashboard with the Streamlit library in Python. By the end of this tutorial, you are going to be comfortable with using Python and Streamlit to build beautiful and interactive dashboards and web apps, all with zero web development experience! We are going to load, explore, visualize and interact with data, and generate dashboards in less than 150 lines of Python code!

Below are a few tools you can use for environment management:

Install Streamlit¶

Streamlit

Now run the hello world app to make sure everything is working:

Import Streamlit¶

Now that everything’s installed, let’s create a new Python script and importStreamlit.

  1. Create a new Python file named first_app.py, then open it with your IDEor text editor.

  2. Next, import Streamlit.

  3. Run your app. A new tab will open in your default browser. It’ll be blankfor now. That’s OK.

    Running a Streamlit app is no different than any other Python script.Whenever you need to view the app, you can use this command.

    Tip

    Did you know you can also pass a URL to streamlit run? This is great when combined with Github Gists. For example:

    $ streamlit run https://raw.githubusercontent.com/streamlit/demo-uber-nyc-pickups/master/streamlit_app.py

  4. You can kill the app at any time by typing Ctrl+c in the terminal.

Dashboard gives a graphical interface to visualize the key indicators and trends of your data. However, Creating Dashboard is always been a tedious task for developers

They have to wear a Front-end Dev hat for creating a Web Dashboard. Switching gears from python to Javscript/HTML is not what all developers prefer to do.

There are libraries like Plotly Dash, Bokeh in Python which let you generate a dashboard using python and even some people convert a Jupyter notebook into a dashboard

Somehow I didn’t find all these options really an easy available options to create a dashboard in Python so my Search for easy to use and a user friendly Library in pure python continues and Finally I found something much easier way to do that.

Yes, Streamlit which is recently gaining popularity in the Machine Learning and Data science world is a super easy library which is around to develop a dashboard in almost no time

The good part is that it comes with an in-built web server too and can be easily deployed inside a docker container.

In this tutorial we will build a dashboard using COVID19 US Data. Here is the snapshot of the dashboard that you will see at the end of the tutorial

Collect data from Wikipedia

We will use the wikipedia data for this dashboard. Following are the two sets of data that you can download:

  1. Last 15 days data of Covid-19 Cases in the United States data from 19th June 2020 to 7th July 2020 at the time of writing this article
  2. COVID-19 pandemic in the United States by state and territory

We will download both these data in two csv files and rename as usa_covid_data_states.csv and usa_total_cases.csv

  1. ​ usa_covid_data_states.csv

  2. ​ usa_total_cases.csv

Installing Streamlit and Creating Dashboard

Streamlit can be installed using pip:

Now to start creating a dashboard let’s first create a simple python file main.py and import streamlit and add the Heading and paragraph at the dashboard start

Python Streamlit Tutorial

We will also import pandas for reading the above two csv files created using the wikipedia data

Load the two files in the dataframe

Streamlit

Title and Markdowns

Streamlit has a number of ways to add text to your app. Let’s add a title out to Dashboard. We will also use markdown to add subtext or small paragraphs and write ups in our dashboard

Dropdowns in Streamlit

We will add a dropdown for user to select the following trend and plot

  1. Total Cases
  2. Deaths
  3. Recoveries

Use st.selectbox to choose from a series. You can write in the options you want, or pass through an array or data frame column.

Plot Charts and Maps

Streamlit supports several popular data charting libraries like Matplotlib, Altair, Plotly etc.

We will use Plotly to draw charts for our dashboard

Streamlit Python Plotly

So we created the dropdown above and want to display the TotalCases/Deaths/Recoveries Trend based on user selection

We have directly use the dataframe columns as x and y data for adding traces based on user selection and You can easily add the chart to your app with st.plotly_chart()

Similarly you can add other charts that you wanted to draw with this data.

Streamlit

Another great feature of streamlit is a sidebar that gives a more cleaner look and keeps your app central and all widgets can be moved to the left of the page. Let’s see how to create a sidebar widget and dropdown filter for state using st.sidebar

We have passed the state list(dfstate.state) as data for the dropdown options.

You can almost put all elements on the side bar like st.title(), st.markdown() etc.

Starting server and open dashboard in Browser

Open a terminal and navigate to the path where main.py is located and start the streamlit web server

By default it will be running on port 8501. Open your browser and and hit this url http://localhost:8501 to see your dashboard in the browser

So with this we have completed the tutorial for creating a Covid19 US Dashboard using Streamlit. If you are looking for any customization to this dashboard then I will suggest to look at the official streamlit documentation

Deploy Streamlit App in Docker Container

We can also deploy the streamlit app inside a docker container. if there is any configuration related changes like changing the base url for the path then those changes can also be done in the docker file

Here is the Docker file which is in the same folder where main.py is located

Next Run the following command to build a docker image and run the container

  • Build Docker Image

    docker build -t coviddash .

  • Run Docker container

    docker run coviddash

    Conclusion

    We have seen streamlit can be used to build a beautiful and interactive dashboards and web apps, all with zero web development experience! We have seen how to load, explore, visualize and interact with data, and generate dashboards in less than 100 lines of Python code

    Eventually we can run this web app without using any external webserver since it has it’s own server powered by Tornado. It is easy to deploy in docker container too.

    I think this is the fastest and easiest method to Visualize your Machine Learning Algorithm and create Dashbaord on the go option available right now for Python developers

    You can find the complete code for this tutorial in my github repo here