Update app.py

app.py

@@ -1,56 +1,71 @@
 import streamlit as st
-import pandas as pd
 import altair as alt
+import pandas as pd
 
-# Load dataset
-DATA_URL = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
+# Title
+st.title("Building Inventory Interactive Visualization")
 
+# Load Dataset
 @st.cache
 def load_data():
-    return pd.read_csv(DATA_URL)
-
-df = load_data()
-
-# Streamlit app title and description
-st.title("Building Inventory Visualization")
-st.markdown("""
-This app visualizes the building inventory dataset. 
-Use the controls in the sidebar to explore the data.
-""")
-
-# Sidebar for user input
-st.sidebar.header("Filter Options")
-state_filter = st.sidebar.multiselect(
-    "Select State(s):",
-    options=df["State"].dropna().unique(),
-    default=df["State"].dropna().unique()
+    url = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
+    return pd.read_csv(url)
+
+data = load_data()
+
+# Data Preview
+if st.sidebar.checkbox("Show Raw Data"):
+    st.subheader("Raw Dataset")
+    st.dataframe(data)
+
+# Add color scale for 'Bldg Status'
+building_status_scale = alt.Scale(
+    domain=["Active", "Inactive", "Unknown"],
+    range=["#1f77b4", "#ff7f0e", "#d62728"]
 )
+color = alt.Color("Bldg Status:N", scale=building_status_scale)
+
+# Selections
+brush = alt.selection_interval(encodings=["x"])
+click = alt.selection_point(encodings=["color"])
 
-agency_filter = st.sidebar.multiselect(
-    "Select Agency(ies):",
-    options=df["Agency Name"].dropna().unique(),
-    default=df["Agency Name"].dropna().unique()
+# Top Panel: Scatter Plot (Year Constructed vs Square Footage)
+scatter = (
+    alt.Chart(data)
+    .mark_point()
+    .encode(
+        alt.X("Year Constructed:Q", title="Year Constructed"),
+        alt.Y("Square Footage:Q", title="Square Footage"),
+        color=alt.condition(brush, color, alt.value("lightgray")),
+        size=alt.Size("Total Floors:Q", scale=alt.Scale(range=[50, 300]), title="Total Floors"),
+        tooltip=["Agency Name", "Location Name", "Square Footage", "Year Constructed"]
+    )
+    .properties(width=550, height=300, title="Building Size by Construction Year")
+    .add_params(brush)
+    .transform_filter(click)
 )
 
-# Apply filters to the data
-filtered_data = df[df["State"].isin(state_filter) & df["Agency Name"].isin(agency_filter)]
-
-# Display filtered data table
-st.subheader("Filtered Data Table")
-st.write(filtered_data)
-
-# Bar chart of buildings by agency
-st.subheader("Buildings by Agency")
-agency_building_counts = filtered_data["Agency Name"].value_counts().reset_index()
-agency_building_counts.columns = ["Agency Name", "Building Count"]
-
-chart = alt.Chart(agency_building_counts).mark_bar().encode(
-    x=alt.X("Building Count", title="Number of Buildings"),
-    y=alt.Y("Agency Name", sort="-x", title="Agency Name"),
-    tooltip=["Agency Name", "Building Count"]
-).properties(
-    width=800,
-    height=400
+# Bottom Panel: Bar Chart (Count of Building Status)
+bar_chart = (
+    alt.Chart(data)
+    .mark_bar()
+    .encode(
+        x="count()",
+        y=alt.Y("Bldg Status:N", title="Building Status"),
+        color=alt.condition(click, color, alt.value("lightgray")),
+    )
+    .transform_filter(brush)
+    .properties(width=550, title="Building Status Distribution")
+    .add_params(click)
 )
 
-st.altair_chart(chart, use_container_width=True)
+# Combined Chart
+chart = alt.vconcat(scatter, bar_chart, title="Building Inventory Insights")
+
+# Tabs for Themes
+tab1, tab2 = st.tabs(["Streamlit Theme", "Altair Native Theme"])
+
+with tab1:
+    st.altair_chart(chart, theme="streamlit", use_container_width=True)
+with tab2:
+    st.altair_chart(chart, theme=None, use_container_width=True)