app.py

import streamlit as st
import altair as alt
import pandas as pd

st.title("Building Inventory Insights")

# Load Dataset
@st.cache_data
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="Agency Name:O",
        y=alt.Y("Year Acquired:Q", title="Year Acquired"),
        color=alt.condition(click, color, alt.value("lightgray")),
        tooltip=["Agency Name", "Year Acquired"]
    )
    .transform_filter(brush)
    .properties(width=550, title="Agency Name Distribution by Year Acquired")
    .add_params(click)
)

# Combined Chart
chart = alt.vconcat(scatter, bar_chart)

# Tabs for Themes
tab1, tab2 = st.tabs(["Streamlit Theme", "Altair Native Theme"])

with tab1:
    st.caption("""
    The scatter plot visualizes the distribution of building size based on their acquisition year.
    Design choices:
    - X-axis displays the years acquired sorted in descending order.
    - Y-axis displays the square footage.
    This scatter plot visualizes the relationship between year-acquired and Square Footage of buildings, 
    with Total Floors encoded as the size of the points.
    """)
    st.altair_chart(chart, theme="streamlit", use_container_width=True)
    
    st.caption("""
    The bar chart visualizes the distribution of Agency Name based on their acquisition year.
    Design choices:
    - X-axis displays the Agency Name.
    - Y-axis displays the Year Acquired.
    This bar chart visualizes which agency acquired the count of buildings in which Year.
    The Agency Name is taken as the ordinal value.
    """)
with tab2:
    st.caption("""
    The scatter plot visualizes the distribution of building size based on their acquisition year.
    Design choices:
    - X-axis displays the years acquired sorted in descending order.
    - Y-axis displays the square footage.
    This scatter plot visualizes the relationship between year-acquired and Square Footage of buildings, 
    with Total Floors encoded as the size of the points.
    """)
    st.altair_chart(chart, theme=None, use_container_width=True)
    
    st.caption("""
    The bar chart visualizes the distribution of Agency Name based on their acquisition year.
    Design choices:
    - X-axis displays the Agency Name.
    - Y-axis displays the Year Acquired.
    This bar chart visualizes which agency acquired the count of buildings in which Year.
    The Agency Name is taken as the ordinal value.
    """)