app.py

# put streamlit code here as needed

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

url = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
data = pd.read_csv(url)
# print(data.head())

st.title("Building Inventory Visualization")
st.markdown("Displayed here are the data visuals from Building Inventory dataset.")
st.write(data.head())

# Visualization 1: Buildings by Usage Description
st.subheader("Buildings by Usage Description")
usage_data = data['Usage Description'].value_counts().reset_index()
usage_data.columns = ['Usage Description', 'Count']

chart5 = alt.Chart(usage_data).mark_bar().encode(
    x=alt.X('Count:Q', title='Number of Buildings'),
    y=alt.Y('Usage Description:N', sort='-x', title='Usage Description'),
    color=alt.Color('Usage Description:N', legend=None),
    tooltip=['Usage Description', 'Count']
).properties(
    width=600,
    height=400,
    title="Buildings by Usage Description"
)

st.altair_chart(chart5, use_container_width=True)

# Write-up for Visualization 1
st.write("Buildings by Usage Description")
st.write(
    "This bar chart represents the distribution of buildings based on their usage descriptions. "
    "The x-axis displays the number of buildings, while the y-axis lists the various usage categories. "
    "Each bar reflects the count of buildings in a specific usage type, with distinct colors to enhance readability and tooltips to show precise values."
)
st.write(
    "I chose a bar chart because it effectively highlights the differences in building usage, making comparisons straightforward. "
    "This visualization allows users to quickly identify the most common and least common usage types. "
    "If I had more time, I would add advanced interactivity, such as a dropdown menu or filter, to explore specific usage categories or group similar types for deeper insights."
)


# Visualization 2: Floor Count Distribution
st.subheader("Distribution of Number of Floors")
floor_count_data = data['Total Floors'].dropna().value_counts().reset_index()
floor_count_data.columns = ['Total Floors', 'Count']

chart4 = alt.Chart(floor_count_data).mark_bar().encode(
    x=alt.X('Total Floors:O', title='Number of Floors'),
    y=alt.Y('Count:Q', title='Number of Buildings'),
    color=alt.Color('Total Floors:O', legend=None),
    tooltip=['Total Floors', 'Count']
).properties(
    width=600,
    height=400,
    title="Distribution of Number of Floors in Buildings"
)

st.altair_chart(chart4, use_container_width=True)




# Write-up for Visualization 2
st.write("Distribution of Number of Floors")
st.write(
    "This bar chart visualizes the distribution of buildings based on the number of floors. "
    "The x-axis represents the total number of floors, while the y-axis displays the count of buildings with that floor count. "
    "Each bar is color-coded to improve visual appeal, and tooltips provide exact counts for added interactivity."
)
st.write(
    "I chose a bar chart for this visualization because it effectively captures the distribution of floor counts and allows users to identify trends, "
    "such as the most common floor counts. This visualization makes it easy to compare the data and spot unusual patterns. "
    "If I had more time, I would incorporate filters or sliders to let users explore specific floor ranges or analyze the data further by other building attributes such as usage type or region."
)