prep streamlit

UIUC-iSchool-DataViz · Oct 8, 2024 · 22faf3c · 22faf3c
1 parent e403be9
commit 22faf3c
Show file tree

Hide file tree

Showing 11 changed files with 497 additions and 16 deletions.
diff --git a/_site/index.html b/_site/index.html
@@ -1610,12 +1610,8 @@ <h3 class="subtitle">
                     <p>
             <!-- for notebooks, we want to make sure we link to the GITHUB version, for auto-updates to propigate -->
 
-                        <!--
-                            <a href="%2Fis445_bcubcg_fall2024%2Fprep_script_week11.py">Prep script file, Week 11</a> 
-                        -->
-                            <a href="https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/blob/main/week11//prep_script_week11.py">Prep script file, Week 11</a> <!-- HERE -->
+                        <a href="">Prep Streamlit App Files, Week 11</a>	
 
-
                     </p>
                 </div>
             </div>
@@ -1634,7 +1630,7 @@ <h3 class="subtitle">
                     <p>
             <!-- for notebooks, we want to make sure we link to the GITHUB version, for auto-updates to propigate -->
 
-                        <a href="https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/tree/master/week11/inClass">In class Streamlit App, Week 10</a>	
+                        <a href="https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/tree/master/week11/inClass">In class Streamlit App, Week 11</a>	
 
                     </p>
                 </div>

diff --git a/_site/week10/lecture09p3.html b/_site/week10/lecture09p3.html
@@ -132,6 +132,8 @@ <h2>Data Visualization - Fall 2024</h2>
 
 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
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <title>IS445 - Data Viz - BCU/BCG - Prep notebook -- My Streamlit App</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
+    <link rel="stylesheet" href="/is445_bcubcg_fall2024/assets/style.css" />
+    <!-- Begin Jekyll SEO tag v2.8.0 -->
+<title>Prep notebook – My Streamlit App | IS445 - Data Viz - BCU/BCG</title>
+<meta name="generator" content="Jekyll v3.9.5" />
+<meta property="og:title" content="Prep notebook – My Streamlit App" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="This is the course website for IS445-BCU/BCG in Fall 2024" />
+<meta property="og:description" content="This is the course website for IS445-BCU/BCG in Fall 2024" />
+<link rel="canonical" href="http://localhost:4009/is445_bcubcg_fall2024/week11/README.html" />
+<meta property="og:url" content="http://localhost:4009/is445_bcubcg_fall2024/week11/README.html" />
+<meta property="og:site_name" content="IS445 - Data Viz - BCU/BCG" />
+<meta property="og:type" content="website" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="Prep notebook – My Streamlit App" />
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"WebPage","description":"This is the course website for IS445-BCU/BCG in Fall 2024","headline":"Prep notebook – My Streamlit App","url":"http://localhost:4009/is445_bcubcg_fall2024/week11/README.html"}</script>
+<!-- End Jekyll SEO tag -->
+
+
+</head>
+
+    <body>
+<header>
+    <nav class="navbar" role="navigation">
+        <div class="container">
+            <div class="navbar-brand">
+                <a href="/is445_bcubcg_fall2024/" title="home" class="navbar-item">
+                    <span class="icon is-large">
+                        <i class="fas fa-home"></i>
+                    </span>
+                    IS445
+                </a>
+                <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+                  <span aria-hidden="true"></span>
+                  <span aria-hidden="true"></span>
+                  <span aria-hidden="true"></span>
+                </a>
+            </div>
+            <div class="navbar-menu">
+                <div class="navbar-start">
+
+
+                    <a href="/is445_bcubcg_fall2024/syllabus" class="navbar-item">
+                        <span class="icon is-large">
+                            <i class="fas fa-book"></i>
+                        </span>
+                        Syllabus
+                    </a>
+
+                    <a href="https://is445-fall2023.slack.com/" class="navbar-item">
+                        <span class="icon is-large">
+                            <i class="fab fa-slack"></i>
+                        </span>
+                        Slack
+                    </a>
+
+                    <a href="https://canvas.illinois.edu/courses/37444" class="navbar-item">
+                        <span class="icon is-large">
+                            <i class="fas fa-school"></i>
+                        </span>
+                        Canvas
+                    </a>
+
+                </div>
+                <div class="navbar-end">
+                    <!--<a href="https://github.com/pages/UIUC-iSchool-DataViz.github.io/is445_bcubcg_fall2024" class="navbar-item">-->
+                    <a href="https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024" class="navbar-item">
+                        <span class="icon is-large">
+                            <i class="fab fa-github"></i>
+                        </span>
+                        GitHub
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+
+            // Get all "navbar-burger" elements
+            const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+            // Check if there are any navbar burgers
+            if ($navbarBurgers.length > 0) {
+
+                // Add a click event on each of them
+                $navbarBurgers.forEach( el => {
+                    el.addEventListener('click', () => {
+
+                        // Get the target from the "data-target" attribute
+                        const target = el.dataset.target;
+                        const $target = document.getElementById(target);
+
+                        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+                        el.classList.toggle('is-active');
+                        $target.classList.toggle('is-active');
+
+                    });
+                });
+            }
+
+        });
+    </script>
+</header>
+
+        <main>
+            <div class="container">
+                <div class="section">
+                    <div class="content">
+                        <h1>Prep notebook -- My Streamlit App</h1>
+                        <p>Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference</p>
+
+<h1 id="info">Info:</h1>
+<p>This is the “prep” notebook for a introductory Streamlit app for IS445.</p>
+
+<h2 id="how-to-teach-with-this">How to teach with this:</h2>
+<p>We will build this “from scratch” during class using the following steps:</p>
+<ol>
+  <li>Make sure your repo is cloned in your PraireLearn (this will be “is445_demo2” with my setup, “is445_demo” for each of the students)</li>
+  <li>Update the README.md if the app.py file has changed names</li>
+  <li>Copy what we did from last week to the app.py file here</li>
+  <li>Update the requirements.txt file to include libraries (see whats in here now)</li>
+</ol>
+
+                    </div>
+                </div>
+            </div>
+        </main>
+        <footer class="footer">
+    <div class="is-centered columns has-text-centered">
+        <div class="column is-6">
+            <p>
+                This course developed collaboratively by 
+                <a href="https://astronaiman.com/">Jill Naiman</a> and <a href="https://matthewturk.github.io/">Matthew Turk</a>
+		at the University of Illinois Urbana-Champaign
+                <a href="https://ischool.illinois.edu/">School of Information Sciences</a>.
+                The source code is released under a BSD 3-Clause license, allowing for reuse and redistribution.
+            </p>
+        </div>
+    </div>
+</footer>
+
+    </body>
+</html>
diff --git a/_site/week11/app.py 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
@@ -195,11 +195,8 @@ <h2 class="subtitle">Examples</h2>
             <div class="media-content">
                 <p>
 
-                  <!--
-                     <a href="%2Fis445_bcubcg_fall2024%2Fweek11%2Fprep_script_week11.py">Prep script file, Week 11</a> 
-                 -->
-                    <a href="https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/blob/main/week11//prep_script_week11.py">Prep script file, Week 11</a> <!-- HERE -->
-
+                     <a href="">Prep Streamlit App Files, Week 11</a>		    
+
                 </p>
                 <p>
                     In class notebook
@@ -224,7 +221,7 @@ <h2 class="subtitle">Examples</h2>
             <div class="media-content">
                 <p>
 
-                     <a href="https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/tree/master/week11/inClass">In class Streamlit App, Week 10</a>		    
+                     <a href="https://github.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2024/tree/master/week11/inClass">In class Streamlit App, Week 11</a>		    
 
                 </p>
                 <p>

diff --git a/_site/week11/requirements.txt b/_site/week11/requirements.txt
@@ -0,0 +1,5 @@
+streamlit
+altair
+numpy
+pandas
+matplotlib
diff --git 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
@@ -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)
-Original file line number
+Diff line change
@@ Expand Up / @@ -132,6 +132,8 @@ <h2>Data Visualization - Fall 2024</h2> @@
     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
@@ Expand Down @@