File size: 2,912 Bytes
3ddfd7a
8ab4e61
82504bd
8ab4e61
 
 
 
 
4daa6f7
8ab4e61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a1f51d9
a7207fc
8ab4e61
71fb4b9
b021e70
71fb4b9
 
b021e70
 
71fb4b9
b021e70
71fb4b9
 
b021e70
71fb4b9
8ab4e61
38dadaf
 
a7207fc
 
 
38dadaf
 
a7207fc
8ab4e61
 
 
 
 
 
 
 
a1f51d9
 
 
 
 
 
 
 
8ab4e61
 
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import streamlit as st
import altair as alt
import pandas as pd

# Title
st.title("Building Inventory Interactive Visualization")

# Load Dataset
@st.cache_data
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)