updates

app.py

@@ -2,86 +2,90 @@ import streamlit as st
 import pandas as pd
 import altair as alt
 
+# Set page configuration
 st.set_page_config(layout="wide")
 
 # App title
-st.title('Building Inventory Visualization – IS445 Homework')
+st.title('Building Inventory Data Visualization – IS445 Homework')
 
-# Load dataset
+# Load the dataset
 DATA_URL = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
 df = pd.read_csv(DATA_URL)
+
+# Clean up column names (strip any extra spaces)
 df.columns = df.columns.str.strip()
 
-# Dataset preview
-st.markdown("### Dataset Preview")
+# Display dataset preview
+st.markdown("### Dataset Overview")
 st.dataframe(df.head())
 
-# === Chart 1: Number of Buildings by Usage Description ===
-st.markdown("### 1. Number of Buildings by Usage Description")
+# === Chart 1: Distribution of Buildings by Usage Type ===
+st.markdown("### 1. Distribution of Buildings by Usage Type")
 
 chart1 = (
     alt.Chart(df)
     .mark_bar()
     .encode(
-        x=alt.X('Usage Description:N', sort='-y', title='Usage Description'),
+        x=alt.X('Usage Description:N', sort='-y', title='Building Usage Type'),
         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")
+    .properties(width=700, height=400, title="Distribution of Buildings by Usage Type")
 )
 
 st.altair_chart(chart1, use_container_width=True)
 
-# === Write-up for Chart 1 (Humanized + Justified) ===
-st.markdown("#### Write-up for Chart 1")
+# === Write-up for Chart 1 (Detailed Explanation) ===
+st.markdown("#### Explanation 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.
+    This bar chart illustrates the distribution of buildings according to their designated usage types, such as storage, 
+    education, or business. I chose a bar chart as it’s effective for comparing categories and visualizing frequencies. 
+    The categories are arranged in descending order, which helps in quickly identifying the most common usage types. 
+    I used color coding for each usage type to visually separate them, eliminating the need for an additional legend.
+
+    If I had more time, I would implement filters for location, such as by city or county, so that users could focus on 
+    specific regions. Additionally, I would consider grouping similar usage categories to simplify the chart and make it more 
+    digestible for viewers.
     </div>
     """,
     unsafe_allow_html=True
 )
 
-# === Chart 2: Average Square Footage by Usage Description ===
-st.markdown("### 2. Average Square Footage by Usage Description")
+# === Chart 2: Average Square Footage by Usage Type ===
+st.markdown("### 2. Average Square Footage for Different Usage Types")
 
+# Calculate average square footage by usage type
 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'),
+        x=alt.X('Usage Description:N', sort='-y', title='Building Usage Type'),
         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")
+    .properties(width=700, height=400, title="Average Square Footage by Usage Type")
 )
 
 st.altair_chart(chart2, use_container_width=True)
 
-# === Write-up for Chart 2 (Humanized + Justified) ===
-st.markdown("#### Write-up for Chart 2")
+# === Write-up for Chart 2 (Detailed Explanation) ===
+st.markdown("#### Explanation 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.
+    This chart visualizes the average size of buildings based on their usage type. For example, educational buildings 
+    are generally much larger than those used for utilities or public services. I used a bar chart for consistency, 
+    sorting from the largest to the smallest values for easier comparison across the categories.
+
+    If I had more time, I would incorporate additional features, such as tooltips or data labels, to display the total 
+    number of buildings in each category. This would offer more context to the average size data. I also might consider 
+    switching to a box plot to show the variation in building sizes rather than just the average. An interactive dropdown 
+    could allow users to toggle between the mean and median, providing more flexibility in understanding the data.
     </div>
     """,
     unsafe_allow_html=True
-)
+)