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) | |
| ) | |
| st.text(""" | |
| 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. The interactive brush tool allows users to select subsets of the data, dynamically highlighting specific ranges of years or square footage. | |
| """) | |
| # 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.text(""" | |
| 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 the Which agency acquired the count of buidings 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) | |
| with tab2: | |
| st.altair_chart(chart, theme=None, use_container_width=True) | |