Last active
November 27, 2019 07:54
-
-
Save sirselim/eb2c8b0f693e2cf02e0a04434be4d098 to your computer and use it in GitHub Desktop.
playing with streamlit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import streamlit as st | |
import pandas as pd | |
import numpy as np | |
st.title('Uber pickups in NYC') | |
DATE_COLUMN = 'date/time' | |
DATA_URL = ('https://s3-us-west-2.amazonaws.com/' | |
'streamlit-demo-data/uber-raw-data-sep14.csv.gz') | |
@st.cache | |
def load_data(nrows): | |
data = pd.read_csv(DATA_URL, nrows=nrows) | |
lowercase = lambda x: str(x).lower() | |
data.rename(lowercase, axis='columns', inplace=True) | |
data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN]) | |
return data | |
data_load_state = st.text('Loading data...') | |
data = load_data(10000) | |
data_load_state.text('Loading data... done!') | |
if st.checkbox('Show raw data'): | |
st.subheader('Raw data') | |
st.write(data) | |
st.subheader('Number of pickups by hour') | |
hist_values = np.histogram(data[DATE_COLUMN].dt.hour, bins=24, range=(0,24))[0] | |
st.bar_chart(hist_values) | |
# Some number in the range 0-23 | |
hour_to_filter = st.slider('hour', 0, 23, 17) | |
filtered_data = data[data[DATE_COLUMN].dt.hour == hour_to_filter] | |
st.subheader('Map of all pickups at %s:00' % hour_to_filter) | |
st.map(filtered_data) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# this is awesome, you can run from gist!! | |
# streamlit run https://gist.githubusercontent.com/sirselim/eb2c8b0f693e2cf02e0a04434be4d098/raw | |
# author: Miles Benton | |
# created: 26th Nov 2019 | |
# load streamlit | |
import streamlit as st | |
# To make things easier later, we're also importing useful packages. | |
import numpy as np | |
import pandas as pd | |
import altair as alt | |
# define datasets | |
from vega_datasets import data | |
st.sidebar.title("About") | |
st.sidebar.info("This is a demo application written to help understand and test Streamlit.") | |
""" | |
# Exploring streamlit for interactive web apps using python | |
""" | |
""" | |
#### Note: | |
Once you have streamlit installed you can use it to run 'apps' (just python scripts really) locally, i.e.: | |
`streamlit run my_app.py` | |
...or, what I believe to be extremely awesome, you can run from URLs, including gists!! i.e. to run this exact 'app': | |
`streamlit run https://gist.githubusercontent.com/sirselim/eb2c8b0f693e2cf02e0a04434be4d098/raw` | |
If you add the above functionality with integrated gist features made available via VScode extensions (gistFS, vscode-gist) you get a very powerful way to directly test, share and collaborate on fully functional apps quite seemlessly. | |
Pretty niffty! | |
""" | |
""" | |
Here's our first attempt at using data to create a table: | |
""" | |
df = pd.DataFrame({ | |
'first column': [1, 2, 3, 4], | |
'second column': [10, 20, 30, 40] | |
}) | |
df | |
""" | |
## We can also draw charts | |
This is some basic markdown text that is being parsed by streamlit. | |
""" | |
chart_data = pd.DataFrame( | |
np.random.randn(20, 3), | |
columns=['a', 'b', 'c']) | |
st.line_chart(chart_data) | |
""" | |
## Maps | |
Maps as well... | |
""" | |
map_data = pd.DataFrame( | |
np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4], | |
columns=['lat', 'lon']) | |
st.map(map_data) | |
""" | |
## Testing Altair | |
""" | |
st.code(""" | |
df = pd.DataFrame( | |
np.random.randn(200, 3), | |
columns=['a', 'b', 'c']) | |
c = alt.Chart(df).mark_circle().encode( | |
x='a', | |
y='b', | |
size='c', | |
color='c', | |
tooltip=['a', 'b', 'c']).interactive() | |
st.write(c) | |
""", language="python") | |
""" | |
It appears that if you have code blocks that are shown they are not evaluated...? | |
""" | |
df = pd.DataFrame( | |
np.random.randn(200, 3), | |
columns=['a', 'b', 'c']) | |
c = alt.Chart(df).mark_circle().encode( | |
x='a', | |
y='b', | |
size='c', | |
color='c', | |
tooltip=['a', 'b', 'c']).interactive() | |
st.write(c) | |
""" | |
## Testing chart reveal behind checkbox | |
""" | |
source = data.cars() | |
if st.checkbox('Show Altair chart'): | |
testChart = alt.Chart(source).mark_circle(size=60).encode( | |
x='Horsepower', | |
y='Miles_per_Gallon', | |
color='Origin', | |
tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon'] | |
).interactive() | |
st.write(testChart) | |
""" | |
## Progress bars | |
""" | |
import time | |
'Starting a long computation...' | |
# Add a placeholder | |
latest_iteration = st.empty() | |
bar = st.progress(0) | |
for i in range(100): | |
# Update the progress bar with each iteration. | |
latest_iteration.text(f'Iteration {i+1}') | |
bar.progress(i + 1) | |
time.sleep(0.1) | |
'...and now we\'re done!' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment