Streamlit — Build Powerful Data Science Apps On The Web

A while ago i came across probably the best and coolest Python library ever and sadly extremely underrated, at least when i tried to find resources to learn it because i expected the Python community to be blown away by it so in this article we’ll learn more about this magic library

What Is Streamlit And Why?

Streamlit is a library that allows you WITH VERY MINIMUM amount of code to create fully functioning data driven apps on the web

What really caught me off guard is how insanely easy and tremendously powerful it is, with less than 10 lines of code i was able to see an actual app on my browser and i was just stunned as heck

It has massive set of premade components and widgets and all you gotta do is just pick

What Is Streamlit Not For ?

As much as the description seemed amazing to you and the idea of deploying your app to the browser, Streamlit isn’t really a web framwork so you won’t really have features like routing and template rendering and that stuff, all you can do is create data web apps

What Are We Building?

Just to explore the features of this amazing library we’re gonna build a stock app where we could view stock prices data on a very neat table and it will look something like this

Installing Streamlit

With the simple command of pip install streamlit

Saying Hello World From Streamlit

import streamlit as st 
st.title("Hello World") # adding a title to our app
st.header("i love learning about Streamlit!")

And just like that our app is now ready to be launched !

Running The App

To run our app just use the command streamlit run APP_NAME.py replacing the APP_NAME with your python file name of course

Fun isn’t it ? Now let’s add a table with some made up names and data just to see how pretty it looks

import streamlit as st
import pandas as pd
st.title("Hello World")
st.header("I love learning about Streamlit!")
employees = pd.DataFrame({
"Employee":['John Doe','Mark Doe','Steven Clark','Craign Payne','John Adams'],
"Age":[28,26,25,31,44],
"Department":['IT','Sales','Management','HR','IT'],
"Salary":[20000,30000,40000,50000,60000]
})
st.table(employees)

After running your app you’ll get an output like this :

Learn more about Streamlit components here

Building Our Stock App

Now that we took a quick look at the library and saw what we can do with it let’s go ahead and start building our app to view useful stock data of major companies

First off let’s get our data from this link then we’re gonna use the method read_csv() to load the data using pandas

import pandas as pd
data_link = "https://raw.githubusercontent.com/vega/datalib/master/test/data/stocks.csv"
stocks = pd.read_csv(data_link)
print(stocks.head()) # prints first 5 rows

Now let’s see the unique companies we have so we can have a vision of how our chart will look like

stocks.symbol.unique() this will return us [‘MSFT’ ‘AMZN’ ‘IBM’ ‘GOOG’ ‘AAPL’]

Adding A Sidebar

Streamlit allows us to add a very nice looking sidebar area where you can add any widget to it, in this case we’re adding a selectbox and will use the value the user picks to change the table we’re gonna display so that will make our app more dynamic so let’s add our sidebar and the widgets we need

st.sidebar.title("Company Selector")
choice = st.selectbox("Choose a company",stocks['symbol'].unique())

Dynamic Header

An elegant touch would be to add a dynamic header that tells the user the company’s data they’re viewing and it’ll auto render when the user picks a company from the selectbox

st.title(f"Stock price data for {choice}")

Adding Our Table

st.table() helps us add a nice table to our app just like how we saw above so we’ll turn our pandas dataframe into a table to nicely present it to the end user

First we need to sort our dataframe in a way that this table will represent a version of the dataframe with a single company data

For example using pd.loc to sort the dataframe so only MSFT data will be displayed pd.loc[stocks['symbol'=='MSFT']] so as we can see we’re using this method to only include dataframes rows where the symbol column is equal to MSFT

Using this knowledge we will sort the dataframe we pass to the st.table() using the value returned from the selectbox so it’ll look something like this

st.table(stocks.loc[stocks['symbol']==choice,['date','price']])

That way our table will auto render everytime the user changes their selected option

Putting It All Together

Now let’s put all this together and see how amazing this library is

import streamlit as st
import pandas as pd
from matplotlib import pyplot as plt
st.title("Visualize Stocks Prices")
data = "https://raw.githubusercontent.com/vega/datalib/master/test/data/stocks.csv"
stocks = pd.read_csv(data)
st.sidebar.title("Company Selector")
choice = st.sidebar.selectbox("Choose a company",stocks['symbol'].unique())
st.header(f"Stock price data for {choice}")
st.table(stocks.loc[stocks['symbol']==choice,['date','price']])

Thanks so much if you’ve made it here it was so fun making this tutorial and i hope someone somewhere will find this article useful in any way ♥

Useful Links

Streamlit documentation

Pandas documentation

Pandas : A Beginner’s Guide