diff --git a/_site/index.html b/_site/index.html index 19616f7..ea61d46 100644 --- a/_site/index.html +++ b/_site/index.html @@ -1610,12 +1610,8 @@

- - Prep script file, Week 11 + Prep Streamlit App Files, Week 11 -

@@ -1634,7 +1630,7 @@

- In class Streamlit App, Week 10 + In class Streamlit App, Week 11

diff --git a/_site/week10/lecture09p3.html b/_site/week10/lecture09p3.html index 3029eb4..779d106 100644 --- a/_site/week10/lecture09p3.html +++ b/_site/week10/lecture09p3.html @@ -132,6 +132,8 @@

Data Visualization - Fall 2024

huggingface is a place where folks can share code/datasets and also host apps +You got a brief intro to huggingface in Lab 6! + --- ## Spaces on HuggingFace diff --git a/_site/week11/README.html b/_site/week11/README.html new file mode 100644 index 0000000..abcd423 --- /dev/null +++ b/_site/week11/README.html @@ -0,0 +1,153 @@ + + + + + + IS445 - Data Viz - BCU/BCG - Prep notebook -- My Streamlit App + + + + + +Prep notebook – My Streamlit App | IS445 - Data Viz - BCU/BCG + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+
+
+
+

Prep notebook -- My Streamlit App

+

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+ +

Info:

+

This is the “prep” notebook for a introductory Streamlit app for IS445.

+ +

How to teach with this:

+

We will build this “from scratch” during class using the following steps:

+
    +
  1. Make sure your repo is cloned in your PraireLearn (this will be “is445_demo2” with my setup, “is445_demo” for each of the students)
    2. +
  2. Update the README.md if the app.py file has changed names
    3. +
  3. Copy what we did from last week to the app.py file here
    4. +
  4. Update the requirements.txt file to include libraries (see whats in here now)
    5. +
+ +
+
+
+
+ + + + diff --git a/_site/week11/app.py b/_site/week11/app.py new file mode 100644 index 0000000..98460a5 --- /dev/null +++ b/_site/week11/app.py @@ -0,0 +1,149 @@ + + + +# 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 +####################################################### + +# We have a few options for how to proceed. I'll start by showing the process in +# PL and then I'll move to my local installation of my template so that I can make +# sure I am pushing code at various intervals so folks can check that out. + +# See the class notes on this with some photos for reference! +# **this has to be implemented!** + + +################################################################### +# 2. Review of where we got to last time, in template app.py file +################################################################### + + +# 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) + + +################################################ +# 3. Adding features, Pushing to HF +################################################ + +st.header('Requirements, README file, Pushing to HuggingFace') + +### 3.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) + +### 3.2 Push these changes to HF -- requirements.txt ### +# 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. + +# NOTE: for any package you want to use in your app.py file, you must include it in +# the requirements.txt file! + +### 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! + +st.header('Build in HF: README.md & requirements.txt files') + +st.markdown(''' +title: Prep notebook -- My Streamlit App + +emoji: 🏢 + +colorFrom: blue + +colorTo: gray + +sdk: streamlit + +sdk_version: 1.36.0 + +app_file: app.py + +pinned: false + +license: mit +``` +''') + +# Some important things to + +################################################ +# 4. TODO Quick intro to widgets +################################################ + +### 4.1 A few widget examples ### + +### 4.2 Connecting widgets with plots ### + +################################################ +# 5. TODO Multi-page apps (?) this might be for next week/extra +################################################ diff --git a/_site/week11/index.html b/_site/week11/index.html index 0fbe81c..6d4946f 100644 --- a/_site/week11/index.html +++ b/_site/week11/index.html @@ -195,11 +195,8 @@

Examples

- - Prep script file, Week 11 - + Prep Streamlit App Files, Week 11 +

In class notebook @@ -224,7 +221,7 @@

Examples

- In class Streamlit App, Week 10 + In class Streamlit App, Week 11

diff --git a/_site/week11/requirements.txt b/_site/week11/requirements.txt new file mode 100644 index 0000000..bdcd891 --- /dev/null +++ b/_site/week11/requirements.txt @@ -0,0 +1,5 @@ +streamlit +altair +numpy +pandas +matplotlib \ No newline at end of file diff --git a/week10/lecture09p3.md b/week10/lecture09p3.md index b557ba5..46b73ca 100644 --- a/week10/lecture09p3.md +++ b/week10/lecture09p3.md @@ -99,6 +99,8 @@ have folks heard of huggingface? huggingface is a place where folks can share code/datasets and also host apps +You got a brief intro to huggingface in Lab 6! + --- ## Spaces on HuggingFace diff --git a/week11/README.md b/week11/README.md new file mode 100644 index 0000000..ce5d29d --- /dev/null +++ b/week11/README.md @@ -0,0 +1,23 @@ +--- +title: Prep notebook -- My Streamlit App +emoji: 🏢 +colorFrom: blue +colorTo: gray +sdk: streamlit +sdk_version: 1.36.0 +app_file: app.py +pinned: false +license: mit +--- + +Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference + +# Info: +This is the "prep" notebook for a introductory Streamlit app for IS445. + +## How to teach with this: +We will build this "from scratch" during class using the following steps: +1. Make sure your repo is cloned in your PraireLearn (this will be "is445_demo2" with my setup, "is445_demo" for each of the students) +1. Update the README.md if the app.py file has changed names +1. Copy what we did from last week to the app.py file here +1. Update the requirements.txt file to include libraries (see whats in here now) diff --git a/week11/app.py b/week11/app.py new file mode 100644 index 0000000..98460a5 --- /dev/null +++ b/week11/app.py @@ -0,0 +1,149 @@ + + + +# 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 +####################################################### + +# We have a few options for how to proceed. I'll start by showing the process in +# PL and then I'll move to my local installation of my template so that I can make +# sure I am pushing code at various intervals so folks can check that out. + +# See the class notes on this with some photos for reference! +# **this has to be implemented!** + + +################################################################### +# 2. Review of where we got to last time, in template app.py file +################################################################### + + +# 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) + + +################################################ +# 3. Adding features, Pushing to HF +################################################ + +st.header('Requirements, README file, Pushing to HuggingFace') + +### 3.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) + +### 3.2 Push these changes to HF -- requirements.txt ### +# 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. + +# NOTE: for any package you want to use in your app.py file, you must include it in +# the requirements.txt file! + +### 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! + +st.header('Build in HF: README.md & requirements.txt files') + +st.markdown(''' +title: Prep notebook -- My Streamlit App + +emoji: 🏢 + +colorFrom: blue + +colorTo: gray + +sdk: streamlit + +sdk_version: 1.36.0 + +app_file: app.py + +pinned: false + +license: mit +``` +''') + +# Some important things to + +################################################ +# 4. TODO Quick intro to widgets +################################################ + +### 4.1 A few widget examples ### + +### 4.2 Connecting widgets with plots ### + +################################################ +# 5. TODO Multi-page apps (?) this might be for next week/extra +################################################ diff --git a/week11/index.md b/week11/index.md index 40fb030..c784f4e 100755 --- a/week11/index.md +++ b/week11/index.md @@ -4,13 +4,13 @@ visible: true icon: undraw_Books_l33t.svg notitle: true examples: - - filename: prep_script_week11.py - type: py - title: Prep script file, Week 11 + - filename: https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/tree/master/week11/prepMaterials + type: iodide + title: Prep Streamlit App Files, Week 11 description: In class notebook - filename: InClass type: iodide - title: In class Streamlit App, Week 10 + title: In class Streamlit App, Week 11 description: Updating storage of Streamlit files in class link: https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/tree/master/week11/inClass # - filename: inClass_script_week11.py diff --git a/week11/requirements.txt b/week11/requirements.txt new file mode 100644 index 0000000..bdcd891 --- /dev/null +++ b/week11/requirements.txt @@ -0,0 +1,5 @@ +streamlit +altair +numpy +pandas +matplotlib \ No newline at end of file