File size: 2,570 Bytes
721862c 18899fe 721862c 7f8230f 721862c 18899fe 721862c 403d348 721862c fa24a40 721862c 403d348 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import streamlit as st
import pandas as pd
import altair as alt
st.set_page_config(layout="centered")
# Load data
url = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
df = pd.read_csv(url)
df.columns = df.columns.str.strip()
st.title("Building Inventory Visualization")
# Dataset preview
st.markdown("### Dataset Preview")
st.dataframe(df.head())
# ---- Visualization 1 ----
st.subheader("Visualization 1: Average Square Footage by County")
chart1 = alt.Chart(df).mark_bar().encode(
x=alt.X('County:O', sort='-y'),
y=alt.Y('mean(Square Footage):Q'),
tooltip=['County', 'mean(Square Footage):Q']
).properties(width=600, height=400)
st.altair_chart(chart1, use_container_width=True)
# Write-up for Plot 2
st.markdown("#### Write-up for Visualization 1")
st.markdown(
"""
<div style='text-align: justify'>
This bar chart shows the average square footage of buildings in each county. I chose a bar mark because it
clearly shows comparisons across counties. I used ordinal encoding on the x-axis for county names and a quantitative
scale on the y-axis to represent average square footage. Tooltips help provide exact values on hover. If I had more time,
I would group counties by region or use color to cluster similar square footage ranges for better visual grouping.
</div>
""",
unsafe_allow_html=True
)
# ---- Visualization 2 ----
st.subheader("Visualization 2: Number of Buildings by Usage")
usage_count = df['Usage Description'].value_counts().reset_index()
usage_count.columns = ['Usage', 'Count']
chart2 = alt.Chart(usage_count.head(10)).mark_bar().encode(
x=alt.X('Usage:O', sort='-y'),
y=alt.Y('Count:Q'),
color='Usage:N',
tooltip=['Usage', 'Count']
).properties(width=600, height=400)
st.altair_chart(chart2, use_container_width=True)
# Write-up for Plot 2
st.markdown("#### Write-up for Visualization 2")
st.markdown(
"""
<div style='text-align: justify'>
The second chart is an interactive line graph showing how the average square footage of the top five building usage
types changed over time, grouped into 5-year intervals. The color scheme separates each usage type, and a dropdown lets
users highlight one at a time. The size of the line increases for the selected category to make it stand out. I used symlog
scaling for better visibility of trends. If I had more time, I’d improve tooltip details to include total building count and perhaps allow filtering by county.
</div>
""",
unsafe_allow_html=True
)
|