Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import altair as alt | |
| import pandas as pd | |
| # Title | |
| st.title("Building Inventory Interactive Visualization") | |
| # Load Dataset | |
| def load_data(): | |
| url = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv" | |
| return pd.read_csv(url) | |
| data = load_data() | |
| # Data Preview | |
| if st.sidebar.checkbox("Show Raw Data"): | |
| st.subheader("Raw Dataset") | |
| st.dataframe(data) | |
| # Selections | |
| brush = alt.selection_interval(encodings=["x"]) | |
| click = alt.selection_point(encodings=["color"]) | |
| # Add color scale for 'Square Footage' | |
| square_footage_scale = alt.Scale(scheme="blues") | |
| color = alt.Color("Square Footage:Q", scale=square_footage_scale, title="Square Footage") | |
| # Top Panel: Scatter Plot (Year Acquired vs Square Footage) | |
| scatter = ( | |
| alt.Chart(data) | |
| .mark_point() | |
| .encode( | |
| alt.X("Year Acquired:Q", title="Year Acquired"), | |
| alt.Y("Square Footage:Q", title="Square Footage"), | |
| color=alt.condition(brush, color, alt.value("lightgray")), | |
| size=alt.Size("Total Floors:Q", scale=alt.Scale(range=[50, 300]), title="Total Floors"), | |
| tooltip=["Agency Name", "Location Name", "Square Footage", "Year Acquired"] | |
| ) | |
| .properties(width=550, height=300, title="Building Size by Acquisition Year") | |
| .add_params(brush) | |
| .transform_filter(click) | |
| ) | |
| # Bottom Panel: Bar Chart (Square Footage Distribution by Year Acquired) | |
| bar_chart = ( | |
| alt.Chart(data) | |
| .mark_bar() | |
| .encode( | |
| x="Agency Name:O", | |
| y=alt.Y("Year Acquired:Q", title="Year Acquired"), | |
| color=alt.condition(click, color, alt.value("lightgray")), | |
| tooltip=["Agency Name", "Year Acquired"] | |
| ) | |
| .transform_filter(brush) | |
| .properties(width=550, title="Agency Name Distribution by Year Acquired") | |
| .add_params(click) | |
| ) | |
| st.markdown(""" | |
| **This bar chart visualizes the distribution of Agency Name based on their acquisition year. | |
| Design choices: | |
| - X-axis displays the Agency Name. | |
| - Y-axis displays the Year Acquired. | |
| This bar chart visualizes which agency acquired the count of buildings in which Year. | |
| The Agency Name is taken as the ordinal value.** | |
| """) | |
| # Combined Chart | |
| chart = alt.vconcat(scatter, bar_chart, title="Building Inventory Insights") | |
| # Tabs for Themes | |
| tab1, tab2 = st.tabs(["Streamlit Theme", "Altair Native Theme"]) | |
| with tab1: | |
| st.altair_chart(chart, theme="streamlit", use_container_width=True) | |
| st.caption(""" | |
| This scatter plot visualizes the distribution of building size based on their acquisition year. | |
| Design choices: | |
| - X-axis displays the years acquired sorted in descending order. | |
| - Y-axis displays the square footage. | |
| This scatter plot visualizes the relationship between year-acquired and Square Footage of buildings, | |
| with Total Floors encoded as the size of the points. | |
| """) | |
| with tab2: | |
| st.altair_chart(chart, theme=None, use_container_width=True) | |