The world’s leading publication for data science, AI, and ML professionals.

Show Streamlit Apps in your Medium Blog

Follow this tutorial to put your apps online in Medium posts.

Photo by Lloyd Dirks on Unsplash
Photo by Lloyd Dirks on Unsplash

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.

Streamlit Basics: Build Your First Web App

Streamlit Basics: Deploy Your First Web App

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.

Gustavo Santos – Medium

Find me on LinkedIn or book some time to talk Data Science with me via TopMate.io.

References

Embed your app – Streamlit Docs

Streamlit Docs

Snowflake acquires Streamlit for $800M to help customers build data-based apps

Streamlit Basics: Build Your First Web App

Streamlit Basics: Deploy Your First Web App


Related Articles