prep

prep/Hello.py

@@ -0,0 +1,69 @@
+import streamlit as st
+
+
+st.set_page_config(
+    page_title="Hello",
+    page_icon="👋",
+)
+
+st.sidebar.success("Select a Page")
+
+st.title('This is my fancy title for my main page!')
+
+# after this point, things will be a little different if you are on PL or running the code locally on your computer
+# I'll be running locally usually, but let's look at PL first:
+
+# INSTRUCTIONS FOR RUNNING ON PL:
+# 1. Open a "Terminal" by: View --> Terminal OR just the "Terminal" through the hamburger menu
+# 2. run in terminal with: "streamlit run <the app .py file>"
+# 3. click the "Open in Browser" link that pops up OR click on "Ports" and copy the URL
+# 4. Open a Simple Browswer with View --> Command Palette --> Simple Browser: Show
+# 5. use the URL from prior steps as intput into this simple browser
+
+### 1.1 Text in Streamlit ###
+# Let's look at a few more ways to include text in our Streamlit apps.
+# We usually start our app with a title (like what we had above).
+# We can also have headers and subheaders.
+# See: https://docs.streamlit.io/develop/api-reference/text 
+
+st.header('This is a "header"')
+st.subheader('This is a "subheader"')
+
+# On the docs there are several other ways to use text (like LaTeX and Markdown),
+#  but we'll usually just be using the plain text:
+st.text("This is plain text.")
+
+# You can also use "magic" commands like:
+'This is also plain text!!'
+
+# ... but we will be using the "write" command typically for consistency:
+st.write('This is also some text.')
+
+# ... or often we will use Markdown:
+st.markdown("""
+I can also use markdown to write stuff!
+ """)
+
+# You should do whatever makes sense to you!
+
+### 1.2 Layout elements ###
+st.subheader('Layouts')
+# There are several different ways we can layout our text/charts.
+# See: https://docs.streamlit.io/develop/api-reference/layout 
+
+col1, col2 = st.columns(2)
+col1.write('This is me adding in some text to column 1')
+col2.write('This is me adding in some text to column 2')
+
+# Note that in theory we can have multiple columns, but in practice 
+#  the columns will "wrap" after a certain number by default.
+
+# There is a lot of fun stuff here to play with in layouts! 
+# For our purposes, we'll start off with some of the simple defaults.
+
+### 1.3 Images ###
+st.subheader('Images')
+# We can include images with a URL:
+st.image('https://i.redd.it/on-a-scale-of-1-10-how-derpy-is-she-v0-z8gtdwu5n5zb1.jpg?width=3024&format=pjpg&auto=webp&s=345e7e1d5b45f20c733e497a9f746f4cbd3a61da',
+         width=400,
+         caption='A thinly veiled excuse to include a derpy corgi.')

prep/README.md

@@ -0,0 +1,44 @@
+---
+title: Streamlit Template (Shadi's Class)
+emoji: 🏢
+colorFrom: blue
+colorTo: gray
+sdk: streamlit
+sdk_version: 1.39.0
+app_file: Hello.py
+pinned: false
+license: mit
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Install what you need for this notebook
+
+It is recommended you install into a conda environment:
+
+```
+conda create -n DataVizClass python=3.10
+conda activate DataVizClass
+```
+
+Then you can install the correct packages.  If you have downloaded the requirements document you can install directly with:
+
+```
+pip install -r /path/to/requirements.txt
+```
+
+Or you can install one by one with:
+
+```
+pip install streamlit==1.39.0 altair numpy pandas matplotlib
+```
+
+To work with the VSCode interface, be sure that `jupyter` is also installed:
+
+```
+pip install jupyter
+```
+ 
+Or you can install with `conda`.
+
+Note that the package [Streamlit](https://streamlit.io/) that we will be working with requires we use Python scripts, so JupyterLab and/or Jupyter Notebooks won't work for this process.

prep/pages/1_Data_Introduction.py

@@ -0,0 +1,18 @@
+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('This is a title for Data Exploration')
+
+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)

prep/pages/2_Widget_Exploration.py

@@ -0,0 +1,53 @@
+import streamlit as st
+
+st.set_page_config(page_title="Widget Exploration", page_icon=":1234:")
+st.sidebar.header("Widget Exploration")
+
+st.header("Simple Widgets")
+
+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.header("Tying Widgets to Pandas/Matplotlib Plots")
+
+# we can also tie widget interaction to plots
+
+# first, let's just try a simple plot with pandas
+import pandas as pd
+import matplotlib.pyplot as plt
+
+df = pd.read_csv("https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/mobility.csv")
+
+# let's first make a plot
+fig,ax = plt.subplots() # this changed
+df.groupby('State')['Mobility'].mean().plot(kind='bar',ax=ax)
+
+st.pyplot(fig) # this is different
+
+# now, let's remake this plot, but allow for some interactivity by only
+# selecting a subset of states to plot
+# multi-select
+states_selected = st.multiselect('Which states do you want to view?', df['State'].unique())
+
+if len(states_selected) > 0: # if selected
+    df_subset = df[df['State'].isin(states_selected)] 
+
+    fig2,ax2 = plt.subplots() # this changed
+    df_subset.groupby('State')['Mobility'].mean().plot(kind='bar',ax=ax2)
+
+    st.pyplot(fig2) # this is different
+else: # otherwise plot all states
+    fig2,ax2 = plt.subplots() # this changed
+    df.groupby('State')['Mobility'].mean().plot(kind='bar',ax=ax2)
+    st.pyplot(fig2) # this is different

prep/pages/3_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.  
+ """)

prep/requirements.txt

@@ -0,0 +1,5 @@
+streamlit==1.39.0
+altair
+numpy
+pandas
+matplotlib