| import streamlit as st |
| import pandas as pd |
| import altair as alt |
|
|
| st.set_page_config(layout="centered") |
|
|
| |
| 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") |
|
|
| |
| st.markdown("### Dataset Preview") |
| st.dataframe(df.head()) |
|
|
| |
| 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) |
|
|
| |
| 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 |
| ) |
|
|
|
|
| |
| 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) |
|
|
| |
| 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 |
| ) |
|
|
