Build a Data Science Web App with Streamlit and Python

Building a sample web app.

Streamlit is an open-source Python library that makes it easy to build beautiful custom web-apps for machine learning and data science. It supports so many python libraries for machine learning or data visualization. In this story we will create a simple web application. In this way we checkout entirely how to build data science web app with Streamlit and python.

Install Streamlit

It is pretty simple to install Streamlit. But first of all make sure that you have Python 3.6 or greater installed.

1- Install Streamlit using pip: $ pip install streamlit
2- Run the first app: $ streamlit hello

For creating a new .py project or upload your python project to Streamlit web app, you should run the following on terminal.
1- Open terminal and go to the file address which is you want to upload.
2- Run this line: streamlit run file_name.py
After that, your web app will open in your browser.

Building A Sample Web App

In this sample we will use New York City Bike Dataset. And you can use whatever you want as a python IDE.
Firstly we will import useful python libraries and Streamlit library.

import numpy as np
import pandas as pd
import plotly.express as px
import streamlit as st

After that, let’s write title to web app. For writing title we are using this code line:
st.title("First Streamlit Web Application")
For adding markdown:
st.markdown("Markdown")
Also we can use # mark like we are using in jupyter notebook:
st.markdown("### Markdown line.")

Now, it’s time to access to data. We will use pandas read_csv() function for accessing the data. However, in this sample I will define a function for this.

@st.cache(persist=True) function is keeping on the memory the load_data function and don’t let working again the function every running time.
Also we made some operation to data for making easy to use.

Well, we imported some libraries and loaded the our data. Now, we can use any pandas operation for understanding the data. For example:
- For see the head of data: st.write(df.head())
Now, you may see the similar things of following picture

Adding The Show/Hide Data Button

We will add the show/hide data button. For adding the show/hide data button we have to build “if” code block like following:

if st.checkbox("Show/Hide Data", False):
      st.subheader("Rows")
      st.write(df)

st.checkbox() function contains create button and button name.
st.subheader() function contains create button title name.
st.write() function contains display DataFrame.

And it will seems like following picture:

Filtering Data And Create Interactive Table

We will create a table with conditional choices. For example; how many bikes are rented at a given time of the day? For do this we will create selectbox to select the hour of day like following code:

In the picture you see above, we create selectbox’s title with st.header() function. After that we created a selectbox with st.selectbox() function and gave it the name as string. And we specified withrange(0,24), 1 hour of day and how to separate hours. Finally specified the condition with using pandas.
It will seems like following:

Plotting Map

Now, we will plot some conditional data on the map. For example we want to examine bike rentals by day of the month. For doing this you may write following codes.

Firstly, as we always do we specified a title of map by using st.header() function.
After that we created a new column that is include days of month by using pandas.
Then, we created a slider which is include the days number by usingst.slider() function.
Finally, we created a map by usingst.map() function. And it will seems like the following picture;

Creating Histogram And Charts

Now, we will create a histogram chart which is showing us the bike rentals by days of month with following codes.

Firstly as we always do created a title by usingst.header() function. After that we made a some pandas operation and finally created bar by using plotly library. It will seems like following;

Building 3D Map

For creating a 3D map we will use PyDeck library. PyDeck is used in python for large-scale interactive data visualization. For import this library: import pydeck as pdk

After that we write and run the following codes;

It’s little bit complicated than other operations that we made before.
Firstly again we create title. Then, we created an array which is include the average of latitude and longitude. Why we need this? Because we want to specified initial view state when the map plotting.
After that we have to use st.pydeck_chart() function for draw a chart. Also, this function includes different layers types. We specified in the layer how we want the our chart. Also, we specified initial_view_state as a dictionary format. Finally, it will seems similar the following picture;

So that’s it! We build a simple web app with Streamlit and python.
Thanks for your read and support.