reorg for multipage

Hello.py

@@ -0,0 +1,78 @@
+import streamlit as st
+
+
+st.set_page_config(
+    page_title="Hello",
+    page_icon="👋",
+)
+
+st.sidebar.success("Select a Page")
+
+st.header('Multi-page Apps')
+
+st.markdown("""
+So far our apps have been rather long and have many parts!  We can organize this a bit better by building [multi-page apps](https://docs.streamlit.io/get-started/tutorials/create-a-multipage-app).
+ """)
+
+st.subheader('Reorganize our App')
+
+st.markdown("""We need to do several things including:
+ * Rename our app file to something that starts with a capital letter
+ * Make sure this is the name that is in the `README.md` file
+ * Add in some page info on our "main" page
+ * Add in a sidebar on our main page to view all pages
+ * Add in a `pages` directory
+ * Add pages with the correct format to the `pages` directory
+ * Reorganize our page into this new format
+ """)
+
+st.write("Let's get to each of these!")
+
+st.subheader('Step 1: Create our "landing" page')
+
+st.markdown("""
+First, let's rename our `app.py` file to `Hello.py`.
+            
+Then, we need to make sure this is also updated in our `README.md` file.
+            
+We can then start running our script with `streamlit run Hello.py`.
+ """)
+
+st.subheader('Step 2: Add some page info to our "landing" page')
+
+st.markdown("""Now, let's add in some page info for this landing page:
+ """)
+st.code("""
+st.set_page_config(
+    page_title="Hello",
+    page_icon="👋",
+)
+ """)
+
+st.markdown("""Finally, let's add a sidebar to display all our pages:""")
+st.code("""
+st.sidebar.success("Select a Page")
+ """)
+st.markdown("**Make sure both of these last items are at the top of your `Hello.py` file!**")
+
+st.subheader('Step 3: Create pages')
+
+st.markdown("""First, create a folder called `pages/`. 
+            
+Then, create four pages:
+1. `1_Data_Introduction.py`
+1. `2_Widget_Exploration.py`
+1. `3_Altair_Plots.py`
+1. `4_Other_Tools.py`
+            
+**NOTE: The formatting here of the file names is specific!** It determines their order and how they appear on the sidebar.
+            
+Each page will need to have:
+1. A `set_page_config` call, including a title and an icon
+1. A message displayed on page selection with a `sidebar.header` call
+            """)
+
+st.markdown("""
+Once this is done, we can then move the items from our original `app.py` file to each page.
+ """)
+

README.md

@@ -1,11 +1,11 @@
 ---
-title: Prep notebook -- My Streamlit App
+title: Prep notebook -- My Multi-page Streamlit App (Day 2)
 emoji: 🏢
 colorFrom: blue
 colorTo: gray
 sdk: streamlit
-sdk_version: 1.36.0
-app_file: app.py
+sdk_version: 1.39.0
+app_file: Hello.py
 pinned: false
 license: mit
 ---

app.py

@@ -1,12 +1,4 @@
 
-
-
-# day 2/3 -- "grab bag" of other things
-# multi-page apps? ==> maybe day 2? ==> does this work with HF apps??
-# Week 12 --  https://docs.streamlit.io/develop/tutorials/databases <- touch on but say we'll be just doing csv files
-# Week 12 -- embedding streamlit spaces on other webpages? wait until Jekyll? https://huggingface.co/docs/hub/en/spaces-sdks-streamlit#embed-streamlit-spaces-on-other-webpages
-
-
 #######################################################
 # 1. Getting setup -- using our HF template
 #######################################################
@@ -109,7 +101,7 @@ st.pyplot(fig)
 st.write('''The requirements.txt file contains all the packages needed 
          for our app to run.  These include (for our application):''')
 st.code('''
-streamlit
+streamlit==1.39.0
 altair
 numpy
 pandas
@@ -119,6 +111,8 @@ matplotlib
 # NOTE: for any package you want to use in your app.py file, you must include it in 
 #   the requirements.txt file!
 
+# Note #2: we specified a version of streamlit so we can use some specific widgets
+
 ### 3.3 Push these changes to HF -- README.md ###
 
 # While we're doing this, let's also take a look at the README.md file!
@@ -132,12 +126,13 @@ emoji: 🏢
 colorFrom: blue   
 colorTo: gray
 sdk: streamlit
-sdk_version: 1.36.0
+sdk_version: 1.39.0
 app_file: app.py
 pinned: false
 license: mit
 ---
 ''')
+st.write("Note: the sdk version has to match what is in your requirements.txt (and with whatever widgets you want to be able to use).")
 
 # Some important things to note here:
 
@@ -232,9 +227,6 @@ Note here that we made use of text highlight [colors](https://docs.streamlit.io/
 
 st.subheader('Connecting Widgets and Plots')
 
-st.markdown("""
-We can also 
- """)
 
 st.markdown("""
 There are actually [many types of charts](https://docs.streamlit.io/develop/api-reference/charts) 
@@ -303,7 +295,7 @@ fig.tight_layout()
 fig.savefig(buf, format="png")
 st.image(buf, width = 500) # can mess around with width, figsize/etc
 
-st.write("Now, let's make this interactive")
+st.write("Now, let's make this interactive.")
 st.markdown("""We'll first use the [multiselect](https://docs.streamlit.io/develop/api-reference/widgets/st.multiselect) 
             tool in order to allow for multiple state selection. """)
 
@@ -403,44 +395,38 @@ if len(states_selected2) > 0: # here we set a default value for the slider, so n
     fig2.savefig(buf2, format="png")
     fig_col2.image(buf2, width = 400) # changed here to fit better
 else:
-    fig2,ax2 = plt.subplots(figsize=(4,8)) # this changed
-    extent2 = [bins.min(), bins.max(), 0, len(table.index)]
-    ax2.imshow(table.values, cmap='hot', interpolation='nearest', extent=extent2)
-    ax2.set_yticks(range(len(table.index)))
-    ax2.set_yticklabels(table.index)
-
-    buf2 = BytesIO()
-    fig2.tight_layout()
-    fig2.savefig(buf2, format="png")
-    fig_col2.image(buf2, width = 500) # can mess around with width, figsize/etc
-
-# THEN: slider for range of student teacher ratios -- do the RANGE slider: https://docs.streamlit.io/develop/api-reference/widgets/st.slider
-
-# with st.expander('Favorite product by Gender within city'):
-#     column1, column2 = st.columns([3,1])
-        
-#     # Allow the user to select a gender.
-#     selected_gender = st.radio('What is your Gender:', df.gender.unique(), index = 0)
-
-#     # Apply gender filter.
-#     gender_product = df[df['gender'] == selected_gender]
+    min_range = student_teacher_ratio_range[0] # added
+    max_range = student_teacher_ratio_range[1] # added
 
-#     # Allow the user to select a city.
-#     select_city = column2.selectbox('Select City', df.sort_values('City').City.unique())
+    df_subset2 = df[(df['Student_teacher_ratio'] >= min_range) & (df['Student_teacher_ratio']<=max_range)] # changed
 
-#     # Apply city filter
-#     city_gender_product = gender_product[gender_product['City'] == select_city]
+    # just 10 bins over the full range --> changed
+    bins2 = 10 #np.linspace(df['Student_teacher_ratio'].min(),df['Student_teacher_ratio'].max(), 10)
 
-#     # Use the city_gender_product dataframe as it has filters for gender and city.
-#     fig = px.histogram(city_gender_product.sort_values('product_line') ,x='product_line', y='gross_income', color = 'product_line',)
+    # make pivot table -- changed
+    table_sub2 = df_subset2.pivot_table(index='State', 
+                                  columns=pd.cut(df_subset2['Student_teacher_ratio'], bins2), 
+                                  aggfunc='size')
 
-#     if selected_gender == 'Male':
-#         st.write('What men buy most!')
-#     else:
-#         st.write('What female buy most!')
+    base_size = 4
+    fig2,ax2 = plt.subplots(figsize=(base_size,2*base_size)) # this changed too for different size
+    extent2 = [df_subset2['Student_teacher_ratio'].min(), 
+               df_subset2['Student_teacher_ratio'].max(), 
+               0, len(table_sub2.index)]
+    ax2.imshow(table_sub2.values, cmap='hot', interpolation='nearest', extent=extent2)
+    ax2.set_yticks(range(len(table_sub2.index)))
+    ax2.set_yticklabels(table_sub2.index)
+    #ax2.set_xticklabels()
 
-#     st.plotly_chart(fig, use_container_width=True) 
+    buf2 = BytesIO()
+    fig2.tight_layout()
+    fig2.savefig(buf2, format="png")
+    fig_col2.image(buf2, width = 400) # changed here to fit better
 
-################################################
-# 5. TODO Multi-page apps (?) this might be for next week/extra
-################################################
+st.header('Push final page to HF')
+st.markdown("""When ready, do:""")
+st.code("""
+git add -A
+git commit -m "final push of day 1"
+git push
+ """)

pages/1_Data_Introduction.py

@@ -0,0 +1,17 @@
+import streamlit as st
+
+st.set_page_config(page_title="Introduction to Data", page_icon=":1234:") # not sure what this adds?
+st.sidebar.header("Introduction to Data")
+
+st.title('Info about our Dataset')
+mobility_url = 'https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/mobility.csv'
+
+st.write("Here is where we could give some background about our dataset.")
+st.write("This would be a good place to include links, references, and images.")
+
+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)

pages/2_Widget_Exploration.py

@@ -0,0 +1,129 @@
+import streamlit as st
+
+st.set_page_config(page_title="Widget Exploration", page_icon=":1234:")
+st.sidebar.header("Widget Exploration")
+
+st.title('Widget Exploration')
+
+st.write("""In a "real" app, we probably wouldn't 
+publish our explorations, but here it is a nice excuse to use pages here :smiley:.""")
+
+
+st.write("How great are you feeling right now?")
+sentiment_mapping = ["one", "two", "three", "four", "five"] # map to these numers
+selected = st.feedback("stars")
+if selected is not None: # make sure we have a selection
+    st.markdown(f"You selected {sentiment_mapping[selected]} star(s).")
+    if selected < 1:
+        st.markdown('Sorry to hear you are so sad :(')
+    elif selected < 3:
+        st.markdown('A solid medium is great!')
+    else:
+        st.markdown('Fantastic you are having such a great day!')
+
+st.subheader('Radio Buttons')
+
+st.markdown("""
+Let's try out a [radio button](https://docs.streamlit.io/develop/api-reference/widgets/st.radio) example.
+""")
+
+favoriteViz = st.radio(
+    "What's your visualization tool so far?",
+    [":rainbow[Streamlit]", "vega-lite :sparkles:", "matplotlib :material/Home:"],
+    captions=[
+        "New and cool!",
+        "So sparkly.",
+        "Familiar and comforting.",
+    ],
+)
+
+if favoriteViz == ":rainbow[Streamlit]":
+    st.write("You selected Streamlit!")
+else:
+    st.write("You didn't select Streamlit but that's ok, Data Viz still likes you :grin:")
+
+st.header('Connecting Plots and Widgets')
+
+import pandas as pd
+import numpy as np
+import matplotlib.pyplot as plt
+from io import BytesIO
+
+
+df = pd.read_csv("https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/mobility.csv")
+
+# vertical alignment so they end up side by side
+fig_col2, controls_col2 = st.columns([2,1], vertical_alignment='center')
+
+bins = np.linspace(df['Student_teacher_ratio'].min(),df['Student_teacher_ratio'].max(), 10)
+table = df.pivot_table(index='State', columns=pd.cut(df['Student_teacher_ratio'], bins), aggfunc='size')
+
+# multi-select
+states_selected2 = controls_col2.multiselect('Which states do you want to view?', 
+                                             table.index.values)#, key='unik1155') 
+#                                            had to pass unique key to have double widgets with same value
+
+# range slider -- added
+student_teacher_ratio_range = controls_col2.slider("Range of student teacher ratio:", 
+                                                   df['Student_teacher_ratio'].min(), 
+                                                   df['Student_teacher_ratio'].max(), 
+                                                   (0.25*df['Student_teacher_ratio'].mean(), 
+                                                    0.75*df['Student_teacher_ratio'].mean()))
+
+# note all the "2's" here, probably will just update the original one
+if len(states_selected2) > 0: # here we set a default value for the slider, so no need to have a tag
+    min_range = student_teacher_ratio_range[0] # added
+    max_range = student_teacher_ratio_range[1] # added
+
+    df_subset2 = df[(df['State'].isin(states_selected2)) & (df['Student_teacher_ratio'] >= min_range) & (df['Student_teacher_ratio']<=max_range)] # changed
+
+    # just 10 bins over the full range --> changed
+    bins2 = 10 #np.linspace(df['Student_teacher_ratio'].min(),df['Student_teacher_ratio'].max(), 10)
+
+    # make pivot table -- changed
+    table_sub2 = df_subset2.pivot_table(index='State', 
+                                  columns=pd.cut(df_subset2['Student_teacher_ratio'], bins2), 
+                                  aggfunc='size')
+
+    base_size = 4
+    fig2,ax2 = plt.subplots(figsize=(base_size,2*base_size)) # this changed too for different size
+    extent2 = [df_subset2['Student_teacher_ratio'].min(), 
+               df_subset2['Student_teacher_ratio'].max(), 
+               0, len(table_sub2.index)]
+    ax2.imshow(table_sub2.values, cmap='hot', interpolation='nearest', extent=extent2)
+    ax2.set_yticks(range(len(table_sub2.index)))
+    ax2.set_yticklabels(table_sub2.index)
+    #ax2.set_xticklabels()
+
+    buf2 = BytesIO()
+    fig2.tight_layout()
+    fig2.savefig(buf2, format="png")
+    fig_col2.image(buf2, width = 400) # changed here to fit better
+else:
+    min_range = student_teacher_ratio_range[0] # added
+    max_range = student_teacher_ratio_range[1] # added
+
+    df_subset2 = df[(df['Student_teacher_ratio'] >= min_range) & (df['Student_teacher_ratio']<=max_range)] # changed
+
+    # just 10 bins over the full range --> changed
+    bins2 = 10 #np.linspace(df['Student_teacher_ratio'].min(),df['Student_teacher_ratio'].max(), 10)
+
+    # make pivot table -- changed
+    table_sub2 = df_subset2.pivot_table(index='State', 
+                                  columns=pd.cut(df_subset2['Student_teacher_ratio'], bins2), 
+                                  aggfunc='size')
+
+    base_size = 4
+    fig2,ax2 = plt.subplots(figsize=(base_size,2*base_size)) # this changed too for different size
+    extent2 = [df_subset2['Student_teacher_ratio'].min(), 
+               df_subset2['Student_teacher_ratio'].max(), 
+               0, len(table_sub2.index)]
+    ax2.imshow(table_sub2.values, cmap='hot', interpolation='nearest', extent=extent2)
+    ax2.set_yticks(range(len(table_sub2.index)))
+    ax2.set_yticklabels(table_sub2.index)
+    #ax2.set_xticklabels()
+
+    buf2 = BytesIO()
+    fig2.tight_layout()
+    fig2.savefig(buf2, format="png")
+    fig_col2.image(buf2, width = 400) # changed here to fit better

pages/3_Altair_Plots.py

@@ -0,0 +1,50 @@
+import streamlit as st
+
+st.set_page_config(page_title="Altair Plots", page_icon=":1234:")
+st.sidebar.header("Altair Plots")
+
+st.title('Altair Plots!')
+st.write("""This is probably the main page we'd be showing in a "real" app.""")
+
+# 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'
+
+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))
+)
+
+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)

pages/4_Other_Tools.py

@@ -0,0 +1,12 @@
+import streamlit as st
+
+st.set_page_config(page_title="Other Tools", page_icon=":1234:")
+st.sidebar.header("Other Tools")
+
+st.title("Other cool things to check out")
+
+st.markdown(""" While we won't have time to cover everything, a few things you might want to check out later:
+1. You can connect databases to Streamlit [like AWS, MongoDB, etc](https://docs.streamlit.io/develop/tutorials/databases)
+1. You can embed Streamlit Spaces [within other webpages](https://huggingface.co/docs/hub/en/spaces-sdks-streamlit#embed-streamlit-spaces-on-other-webpages)
+1. If you have models hosted on HuggingFace, you can build [apps that use those models](https://huggingface.co/blog/streamlit-spaces) (like LLMs) and let others use them.  
+ """)

requirements.txt

@@ -1,4 +1,4 @@
-streamlit
+streamlit==1.39.0
 altair
 numpy
 pandas