app.py

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


st.title("Building Inventory Visualizations")
st.write("### ")
df = pd.read_csv("https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv", parse_dates=["Year Acquired", "Year Constructed"],
            na_values={"Year Acquired":0, "Square Footage":0, "Year Constructed":0})

st.write("### Visualization 1: Scatter Plot - Square Footage by Year Acquired")
st.write("### ")

scatter_plot = (
    alt.Chart(df)
    .mark_point()
    .encode(
        x=alt.X("Year Acquired:T", title="Year Acquired"),
        y=alt.Y("Square Footage:Q", title="Square Footage", scale=alt.Scale(zero=True)),
        color=alt.Color("Bldg Status:N", legend=alt.Legend(title="Building Status")),
        tooltip=["Location Name", "Square Footage", "Year Acquired", "Bldg Status"]
    )
    .properties(title="Square Footage by Year Acquired", width=600, height=400)
)
st.altair_chart(scatter_plot, use_container_width=True)
multi = """The scatter plot highlights the relationship between the year a building was acquired and its square footage. It provides a visual representation of trends in acquisition sizes over time, with the color encoding distinguishing the building status (e.g., In Use, In Progress, or Abandoned). This allows for a quick identification of whether certain building statuses are more prevalent during specific time periods or with specific building sizes.

The design choices for this plot include using a temporal x-axis (Year Acquired) to showcase the progression of acquisitions over time and a quantitative y-axis (Square Footage) to represent the building size. Points are color-coded by building status for easy differentiation, using a clean legend for interpretation. Tooltips provide interactivity, displaying additional information such as the building's location, status, year acquired, and square footage. If given more time, I would add filters for users to focus on specific statuses or date ranges, and possibly include a trend line to highlight any patterns in the data distribution."""
st.markdown(multi)

st.write("### ")

st.write("### Visualization 2: Bar Chart - Average Square Footage by County")

st.write("### ")


county_avg_sqft = df.groupby("County", as_index=False).agg({"Square Footage": "mean"})

top_counties = county_avg_sqft.nlargest(10, "Square Footage")

bar_chart_top_counties = (
    alt.Chart(top_counties)
    .mark_bar()
    .encode(
        x=alt.X("Square Footage:Q", title="Average Square Footage"),
        y=alt.Y("County:N", sort="-x", title="County"),
        color=alt.Color("Square Footage:Q", scale=alt.Scale(scheme="reds"), title="Average Sq. Ft."),
        tooltip=["County", "Square Footage"]
    )
    .properties(title="Top 10 Counties by Average Square Footage", width=600, height=400)
)

st.altair_chart(bar_chart_top_counties, use_container_width=True)


multi2 = """The bar chart emphasizes the top 10 counties with the highest average square footage, providing insights into geographic trends and highlighting regions with larger or more expansive buildings. By aggregating square footage data, this visualization simplifies the dataset, focusing on significant contributors.

Design choices for this visualization include using a sorted bar chart to rank counties in descending order by their average square footage. The color gradient (reds) visually reinforces the magnitude of average square footage, where darker shades indicate higher values. A tooltip provides exact numerical details for deeper exploration. The decision to limit the view to the top 10 counties ensures that the visualization remains concise and easy to interpret. If more time were available, I would add interactivity to allow users to adjust the number of displayed counties, or compare additional metrics like total building count or median square footage for a richer context.
"""

st.markdown(multi2)