Update app.py

app.py

@@ -1,33 +1,69 @@
 import streamlit as st
+import altair as alt
 import pandas as pd
-import matplotlib.pyplot as plt
-
-# Title of the app
-st.title("Dataset Visualizer")
-
-# File uploader for CSV files
-url = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
-
-data = pd.read_csv(url)
-    
-    # Display the dataset
-st.subheader("Dataset Preview")
-st.write(data.head())
-    
-    # Display basic statistics
-st.subheader("Dataset Summary")
-st.write(data.describe())
-    
-    # Column selection for visualization
-st.subheader("Data Visualization")
-column = st.selectbox("Select a column for visualization", data.columns)
-    
-if column:
-    # Plot histogram for the selected column
-    st.write(f"Histogram for {column}")
-    fig, ax = plt.subplots()
-    data[column].hist(bins=20, ax=ax, color='skyblue', edgecolor='black')
-    ax.set_title(f"Histogram of {column}")
-    ax.set_xlabel(column)
-    ax.set_ylabel("Frequency")
-    st.pyplot(fig)
+
+# Title
+st.title("Building Inventory Interactive Visualization")
+
+# Load Dataset
+@st.cache
+def load_data():
+    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)
+
+# Selections
+brush = alt.selection_interval(encodings=["x"])
+click = alt.selection_point(encodings=["color"])
+
+# Add color scale for 'Square Footage'
+square_footage_scale = alt.Scale(scheme="blues")
+color = alt.Color("Square Footage:Q", scale=square_footage_scale, title="Square Footage")
+
+# Top Panel: Scatter Plot (Year Acquired vs Square Footage)
+scatter = (
+    alt.Chart(data)
+    .mark_point()
+    .encode(
+        alt.X("Year Acquired:Q", title="Year Acquired"),
+        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 Acquired"]
+    )
+    .properties(width=550, height=300, title="Building Size by Acquisition Year")
+    .add_params(brush)
+    .transform_filter(click)
+)
+
+# Bottom Panel: Bar Chart (Square Footage Distribution by Year Acquired)
+bar_chart = (
+    alt.Chart(data)
+    .mark_bar()
+    .encode(
+        x="Square Footage:Q",
+        y=alt.Y("Year Acquired:Q", title="Year Acquired"),
+        color=alt.condition(click, color, alt.value("lightgray")),
+        tooltip=["Square Footage", "Year Acquired"]
+    )
+    .transform_filter(brush)
+    .properties(width=550, title="Square Footage Distribution by Year Acquired")
+    .add_params(click)
+)
+
+# 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)