Introduction
I love writing about Streamlit
. I would say it is one of my favorite Python packages.
Streamlit is a really easy to learn package that enables one to quickly create a dashboard, a web app, or even deploying a model into production. I wrote about it a couple of times and I even teach you how to build and deploy your first app with this excellent package (links below).
In 2022, Snowflake bought Streamlit and, since then, they have been adding so many more functions to the package and making it even better. Recently, they have released this very cool feature that I would like to show in this quick tutorial: how to embed your app in a Medium Blog like this one.
Use cases
The advantages of embedding an app in a Medium blog can be many, in my opinion.
First of all, I believe it is a great portfolio builder for any data scientist. If you work in the Tech Industry, you may know that having an interesting portfolio to show your skills is a good way to call attention in the job market and also keep your professional image shining.
Another good advantage is to present a study to the world or even to a client. You can write a blog post and add your app in it right after a good market analysis or after a written report, as a great visual complement of your work.
I even saw people building restaurant menu as an Streamlit app, connecting customer and kitchen, which is amazing. So, look how many options we can think of.
Creating a simple app
Well, in order to embed an app, we need to have one. So, let’s create a simple app, with just a few lines of code.
I decided to create an app using the meteostat
package, which allows you to retrieve temperature information from mostly any location based on latitude and longitude coordinates.
Here are the packages I will be using for this quick project:
# Imports
import pandas as pd
import streamlit as st
from datetime import datetime
from meteostat import Point, Monthly
Next let’s setup the streamlit page as wide layout, so our app takes more of the page instead of having all the features centered on the page. As the input data, I’ve used this csv with many world cities together with their lat and long.
# Set Page Layout
st.set_page_config(layout='wide')
# Load the Dataset
cities = pd.read_csv('world_cities.csv')
Cool. The next step is to place two drop-down boxes for the user to select the city and the year that they want to retrieve information.
# Select box
st.subheader('Temperature History App')
col1, col2 = st.columns(2, gap='medium')
# column 1 - Table weather history
with col1:
# Title of the select box
selected_city = st.selectbox(label='Select a city for weather information',
options=cities['city'].sort_values().unique())
with col2:
selected_year = st.selectbox(label= 'Select an year',
options= range(2022,1999,-1) )
This next snippet shows the actual information fetch from the meteostat
package. We start by setting a time frame, using the year selected by the user. Then we use the city selected to get the lat and long information from the CSV, using a simple Pandas query, transforming the resulting data into a float number. Next, we use the function Point()
from meteostat
to create an object that will go inside the Monthly()
function, which receives the time frame and the location, creating a final object, data
, used to fetch the data needed for our app.
# Collect the Weather Information
# Set time period
start = datetime(selected_year, 1, 1)
end = datetime(selected_year, 12, 31)
# Create Point
lat = cities.query('city == @selected_city')['latitude'].astype('float').tolist()[0]
long = cities.query('city == @selected_city')['longitude'].astype('float').tolist()[0]
city_loc = Point(lat, long)
# Get daily data for 2018
data = Monthly(city_loc, start, end)
data = data.fetch()
#data['mth'] = data.index.month
data = data[ ['tavg', 'tmax', 'tmin'] ]
With the needed data frame collected, we will create two columns to plot a line graphic of the monthly temperatures for the selected location and to display a table with the retrieved information.
col1, col2 = st.columns(2, gap='large')
# column 1 - Table weather history
with col1:
st.text('| TEMPERATURES IN °C')
st.line_chart(data=data)
# column 2 - Graphics
with col2:
# WEATHER INFORMATION TABLE
st.text('| WEATHER HISTORY')
st.write(data)
Finally, we will add another section with a map, to show where is the location selected.
# Division
st.markdown('---')
# Map
st.subheader('| WHERE THIS CITY IS')
df_map = cities.query('city == @selected_city')
st.map(df_map, zoom=5)
The resultant app was saved as a .py
file, together with the requirement.txt and the cities csv in a GitHub repository, linked here, as this is a needed step before deploying.
Then we can just go to https://share.streamlit.io/ to deploy the application to the web. Once that is done, you get the app’s link and simply paste it in your Medium blog post.
Here in the sequence you can see the embedded application we’ve just built in the last few paragraphs. It is fully functional directly in your Medium post (be patient, it can take a few seconds to fully load).
Before You Go
Wow! That’s really nice. When I saw this new feature, I was eager to test it and share with you. I hope you also like it and think of great ways to share and display your work as well for everyone to see.
Streamlit is really simple to use and you can learn more from their documentation or on many tutorials over the internet. I am sure you will also enjoy how easy it is to code an app with it.
If you liked this content, make sure to follow me for more.
Find me on LinkedIn or book some time to talk Data Science with me via TopMate.io.
References
Embed your app – Streamlit Docs
Snowflake acquires Streamlit for $800M to help customers build data-based apps