1st commit

app.py

@@ -0,0 +1,87 @@
+import streamlit as st
+import pandas as pd
+import altair as alt
+
+st.set_page_config(layout="wide")
+
+# App title
+st.title('Building Inventory Visualization – IS445 Homework')
+
+# Load dataset
+DATA_URL = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
+df = pd.read_csv(DATA_URL)
+df.columns = df.columns.str.strip()
+
+# Dataset preview
+st.markdown("### Dataset Preview")
+st.dataframe(df.head())
+
+# === Chart 1: Number of Buildings by Usage Description ===
+st.markdown("### 1. Number of Buildings by Usage Description")
+
+chart1 = (
+    alt.Chart(df)
+    .mark_bar()
+    .encode(
+        x=alt.X('Usage Description:N', sort='-y', title='Usage Description'),
+        y=alt.Y('count()', title='Number of Buildings'),
+        color=alt.Color('Usage Description:N', legend=None)
+    )
+    .properties(width=700, height=400, title="Number of Buildings by Usage Description")
+)
+
+st.altair_chart(chart1, use_container_width=True)
+
+# === Write-up for Chart 1 (Humanized + Justified) ===
+st.markdown("#### Write-up for Chart 1")
+st.markdown(
+    """
+    <div style='text-align: justify'>
+    This chart displays how many buildings are assigned to each type of use, like storage, education, or business. 
+    I picked a bar chart for this because it makes it easy to compare different categories at a glance. The categories 
+    are sorted from most to least frequent so that it’s easier to see which uses are most common. I also used colors 
+    to help distinguish between them visually, without adding a separate legend.
+
+    If I had more time, I would try to add filters for different locations like city or county. That way, people could 
+    explore the building usage more specifically. I also think some usage categories are very similar, so grouping them 
+    might make things cleaner and more understandable.
+    </div>
+    """,
+    unsafe_allow_html=True
+)
+
+# === Chart 2: Average Square Footage by Usage Description ===
+st.markdown("### 2. Average Square Footage by Usage Description")
+
+avg_sqft = df.groupby("Usage Description")["Square Footage"].mean().reset_index()
+
+chart2 = (
+    alt.Chart(avg_sqft)
+    .mark_bar()
+    .encode(
+        x=alt.X('Usage Description:N', sort='-y', title='Usage Description'),
+        y=alt.Y('Square Footage:Q', title='Average Square Footage'),
+        color=alt.Color('Usage Description:N', legend=None)
+    )
+    .properties(width=700, height=400, title="Average Square Footage by Usage Description")
+)
+
+st.altair_chart(chart2, use_container_width=True)
+
+# === Write-up for Chart 2 (Humanized + Justified) ===
+st.markdown("#### Write-up for Chart 2")
+st.markdown(
+    """
+    <div style='text-align: justify'>
+    This chart shows how big the buildings are on average, depending on what they’re used for. Education buildings, 
+    for example, tend to be a lot bigger than something like utility or public use buildings. I stuck with a bar 
+    chart again for consistency, and sorted it from largest to smallest so you can quickly pick out the biggest categories.
+
+    If I had more time, I would include a tooltip or label that shows how many buildings are in each group, since 
+    average size alone doesn’t always give the full picture. Maybe I’d even try a box plot instead of a bar chart 
+    to show the range of building sizes, not just the average. An interactive dropdown to toggle between mean and 
+    median could also make this more flexible for the user.
+    </div>
+    """,
+    unsafe_allow_html=True
+)