app.py

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

# ---------------------------
# PAGE CONFIGURATION
# ---------------------------
st.set_page_config(page_title="Building Inventory Visualization", layout="wide")

st.title("Building Inventory Data Visualization")
st.write("""
This app explores the **State of Illinois Building Inventory dataset**.
It includes two visualizations — one showing the distribution of buildings by county,
and another exploring the relationship between **building size** and **year constructed**.
""")

# ---------------------------
# LOAD DATA
# ---------------------------
@st.cache_data
def load_data():
    url = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
    df = pd.read_csv(url)
    return df

df = load_data()

# Convert fields to numeric
df["Year Constructed"] = pd.to_numeric(df["Year Constructed"], errors="coerce")
df["Square Footage"] = pd.to_numeric(df["Square Footage"], errors="coerce")

# ---------------------------
# VISUALIZATION 1: Buildings by County
# ---------------------------
st.header("Number of Buildings by County")

county_counts = df["County"].value_counts().reset_index()
county_counts.columns = ["County", "Count"]

bar_chart = (
    alt.Chart(county_counts)
    .mark_bar()
    .encode(
        x=alt.X("Count:Q", title="Number of Buildings"),
        y=alt.Y("County:N", sort="-x"),
        color=alt.Color("County:N", legend=None)
    )
    .properties(title="Buildings per County", width=800, height=450)
)

st.altair_chart(bar_chart, use_container_width=True)

# Write-Up 1
st.markdown("""
### **Write-Up for Visualization 1**
This bar chart shows how many buildings are located in each county in Illinois. 
A horizontal bar chart makes it easier to compare counties with longer names, 
and sorting the bars in descending order highlights which counties have the largest number of state buildings.
Color is used to differentiate counties visually. 
If I had more time, I would add filters to break down buildings by agency or usage type.
""")

# ---------------------------
# VISUALIZATION 2: Building Size vs Year Constructed
# ---------------------------
st.header("Building Size vs. Year Constructed")

scatter_df = df.dropna(subset=["Year Constructed", "Square Footage"])

scatter_chart = (
    alt.Chart(scatter_df)
    .mark_circle(size=60, opacity=0.6)
    .encode(
        x=alt.X("Year Constructed:Q", title="Year Constructed"),
        y=alt.Y("Square Footage:Q", title="Square Footage"),
        color=alt.Color("County:N", title="County"),
        tooltip=["Location Name", "County", "Year Constructed", "Square Footage"]
    )
    .properties(title="Building Size vs Year Constructed", width=800, height=450)
)

st.altair_chart(scatter_chart, use_container_width=True)

# Write-Up 2
st.markdown("""
### **Write-Up for Visualization 2**
This scatter plot examines how building size (measured in square footage) relates 
to the year each building was constructed. 
Each point represents a building and is colored by county, allowing regional comparison.
The plot helps reveal whether newer buildings tend to be larger or smaller than older ones.
Interactive tooltips allow users to inspect details about each building.
If I had more time, I would add trend lines or segmentation by building usage type.
""")

# ---------------------------
# FOOTER
# ---------------------------
st.caption("Data Source: https://github.com/UIUC-iSchool-DataViz/is445_data")