app.py

# day 2/3 -- "grab bag" of other things
# touch on widgets! -- do quick example of plot + widget, say we'll focus on Altair
# multi-page apps? ==> maybe day 2? ==> does this work with HF apps??
# matplotlib plots
# other plotting tools in ST (like the defaults) + widgets
#* https://docs.streamlit.io/develop/tutorials/databases <- touch on but say we'll be just doing csv files
# embedding streamlit spaces on other webpages? wait until Jekyll? https://huggingface.co/docs/hub/en/spaces-sdks-streamlit#embed-streamlit-spaces-on-other-webpages
# how to search/duplicate other spaces on HF (make sure you cite this!)

# start with "this is how we publish with streamlit" -- README file, requirements, etc
# ---> make sure to mention the "yaml-ness" of the README file
# ---> say that the easiest way to start is with an already hosted app on HF -- luckily we alread have a lab on this!
# ---> make this like the "jekyll updates" folders that have all these prep and in class files in them
# Then: more streamlit extras with all of those ones listed above

################################################
# 1. Review of where we got to last time
################################################


# Let's start by copying things we did last time
import streamlit as st
import altair as alt

# Let's recall a plot that we made with Altair in Jupyterlab:
#    Make sure we copy the URL as well!
mobility_url = 'https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/mobility.csv'

st.title('This is my fancy app for HuggingFace!!')

scatters = alt.Chart(mobility_url).mark_point().encode(
    x='Mobility:Q', # "Q for quantiative"
    #y='Population:Q',
    y=alt.Y('Population:Q', scale=alt.Scale(type='log')),
    color=alt.Color('Income:Q', scale=alt.Scale(scheme='sinebow'),bin=alt.Bin(maxbins=5))
)

st.header('More complex Dashboards')

brush = alt.selection_interval(encodings=['x','y'])

chart1 = alt.Chart(mobility_url).mark_rect().encode(
    alt.X("Student_teacher_ratio:Q", bin=alt.Bin(maxbins=10)),
    alt.Y("State:O"),
    alt.Color("count()")
).properties(
   height=400
).add_params(
        brush
)

chart2 = alt.Chart(mobility_url).mark_bar().encode(
    alt.X("Mobility:Q", bin=True,axis=alt.Axis(title='Mobility Score')),
    alt.Y('count()', axis=alt.Axis(title='Mobility Score Distribution'))
).transform_filter(
    brush
)

chart = (chart1.properties(width=300) | chart2.properties(width=300))

tab1, tab2 = st.tabs(["Mobility interactive", "Scatter plot"])

with tab1:
    st.altair_chart(chart, theme=None, use_container_width=True)
with tab2:
    st.altair_chart(scatters, theme=None, use_container_width=True)


################################################
# 2. Adding features, Pushing to HF
################################################

st.header('Requirements, README file, Pushing to HuggingFace')

### 2.1 Make a plot ###

# Let's say we want to add in some matplotlib plots from some data we read
#  in with Pandas.

import pandas as pd
df = pd.read_csv(mobility_url)

# There are a few ways to show the dataframe if we want our viewer to see the table:
#df
st.write(df)

# Now, let's plot with matplotlib:
import matplotlib.pyplot as plt

fig, ax = plt.subplots()
df['Seg_income'].plot(kind='hist', ax=ax)
#plt.show() # but wait! this doesn't work!  

# We need to use the streamlit-specific way of showing matplotlib plots: https://docs.streamlit.io/develop/api-reference/charts/st.pyplot
st.pyplot(fig)

### 2.2 Push these changes to HF ###
# In order to push these changes to HF and have things actually show up we need to 
#   add the packages we've added to our requirements.txt file.

# While we're doing this, let's also take a look at the README.md file!