Update src/streamlit_app.py

src/streamlit_app.py

@@ -4,19 +4,12 @@ import altair as alt
 import json
 import urllib.request
 
-# ── Page config ───────────────────────────────────────────────────────────────
-st.set_page_config(
-    page_title="Crimes in Chicago 2026",
-    page_icon="🔍",
-    layout="wide",
-)
+st.set_page_config(page_title="Crimes in Chicago 2026", page_icon="?", layout="wide")
 
-# ── Header ────────────────────────────────────────────────────────────────────
-st.title("🔍 Crimes in Chicago — 2026")
-st.markdown("**Authors: Xinyi Chen, Zhongyin Wang** · Group 6")
+st.title("Crimes in Chicago - 2026")
+st.markdown("**Authors: Xinyi Chen, Zhongyin Wang** - Group 6")
 st.markdown("---")
 
-# ── Introduction ──────────────────────────────────────────────────────────────
 st.markdown(
     """
     ## What Is This About?
@@ -24,8 +17,8 @@ st.markdown(
     Every day, hundreds of crime incidents are reported across Chicago's 77 community areas.
     But where do they happen? At what time? And does poverty play a role?
 
-    This interactive article walks you through 2026 Chicago crime data — drawn directly from
-    the [Chicago Data Portal](https://data.cityofchicago.org/) — to help you explore the
+    This interactive article walks you through 2026 Chicago crime data drawn directly from
+    the [Chicago Data Portal](https://data.cityofchicago.org/) to help you explore the
     geography, timing, and social context of crime in one of America's largest cities.
 
     The dataset records every reported crime incident in 2026, including the exact location,
@@ -35,14 +28,14 @@ st.markdown(
     """
 )
 
-# ── Data loading ──────────────────────────────────────────────────────────────
-@st.cache_data(show_spinner="Loading Chicago crime data (full dataset)…")
+# ---------------------------------------------------------------------------
+# Data loading
+# ---------------------------------------------------------------------------
+
+@st.cache_data(show_spinner="Loading Chicago crime data (full dataset)...")
 def load_crime_data():
-    """
-    Fetch ALL 2026 records in batches of 50 000.
-    Bar charts, line charts, and heatmaps use the full DataFrame.
-    Only map geo-points are sampled at render time.
-    """
+    """Fetch ALL 2026 records in batches. Bar/line/heatmap use the full df;
+    only geo rendering on maps uses sampling."""
     all_chunks = []
     limit  = 50000
     offset = 0
@@ -74,16 +67,13 @@ def load_crime_data():
     df["date"] = pd.to_datetime(df["date"], errors="coerce")
     for col in ["latitude", "longitude"]:
         df[col] = pd.to_numeric(df.get(col, pd.Series(dtype=float)), errors="coerce")
-    df = df.dropna(subset=["date"])          # keep rows even if coords missing; drop only for map
+    df = df.dropna(subset=["date"])
 
     df["Date_Only"] = df["date"].dt.floor("d")
     df["Hour"]      = df["date"].dt.hour
     df["weekday"]   = df["date"].dt.day_name().str[:3]
 
-    if "primary_type" in df.columns:
-        df["Primary Type"] = df["primary_type"].str.upper()
-    else:
-        df["Primary Type"] = "UNKNOWN"
+    df["Primary Type"] = df["primary_type"].str.upper() if "primary_type" in df.columns else "UNKNOWN"
 
     if "district" in df.columns:
         df["District_Str"] = (
@@ -92,31 +82,25 @@ def load_crime_data():
         )
         df["District"] = df["District_Str"]
     else:
-        df["District_Str"] = "-1"
-        df["District"]     = "-1"
+        df["District_Str"] = df["District"] = "-1"
 
     if "community_area" not in df.columns:
         df["community_area"] = None
 
-    def get_period(hour):
-        if 6 < hour <= 12:
-            return "Morning (6am-12pm)"
-        elif 12 < hour <= 18:
-            return "Afternoon (12pm-6pm)"
-        elif 18 < hour <= 24:
-            return "Evening (6pm-12am)"
-        else:
-            return "Late Night (12am-6am)"
+    def get_period(h):
+        if   6  < h <= 12: return "Morning (6am-12pm)"
+        elif 12 < h <= 18: return "Afternoon (12pm-6pm)"
+        elif 18 < h <= 24: return "Evening (6pm-12am)"
+        else:              return "Late Night (12am-6am)"
 
     df["Period"] = df["Hour"].apply(get_period)
     return df
 
 
-@st.cache_data(show_spinner="Loading socioeconomic data…")
+@st.cache_data(show_spinner="Loading socioeconomic data...")
 def load_socio():
-    url = "https://data.cityofchicago.org/resource/kn9c-c2s2.json"
     try:
-        df = pd.read_json(url)
+        df = pd.read_json("https://data.cityofchicago.org/resource/kn9c-c2s2.json")
         df = df.dropna(subset=["ca"])
         df["ca"] = df["ca"].astype(float).astype(int).astype(str)
         df["poverty_rate"] = pd.to_numeric(df["percent_households_below_poverty"], errors="coerce")
@@ -126,7 +110,7 @@ def load_socio():
         return pd.DataFrame(columns=["ca", "community_area_name", "poverty_rate"])
 
 
-@st.cache_data(show_spinner="Loading boundaries…")
+@st.cache_data(show_spinner="Loading boundaries...")
 def load_geojson(url):
     try:
         with urllib.request.urlopen(url) as r:
@@ -141,24 +125,21 @@ community_geojson = load_geojson("https://data.cityofchicago.org/resource/igwz-8
 
 df       = load_crime_data()
 df_socio = load_socio()
-
 districts   = alt.Data(values=district_geojson["features"])
 communities = alt.Data(values=community_geojson["features"])
 
 if df.empty:
-    st.error("⚠️ Crime data could not be loaded. Please check the Chicago Data Portal.")
+    st.error("Crime data could not be loaded.")
     st.stop()
 
-# Geo-only subset for map points (needs valid coords)
 df_geo = df.dropna(subset=["latitude", "longitude"]).copy()
+st.info(f"Loaded **{len(df):,}** crime records for 2026 ({len(df_geo):,} with coordinates).")
 
-st.info(f"✅ Loaded **{len(df):,}** crime records for 2026 ({len(df_geo):,} with coordinates).")
-
-# ═══════════════════════════════════════════════════════════════════════════════
+# ---------------------------------------------------------------------------
 # SECTION 1 — Linked dashboard
-# ═══════════════════════════════════════════════════════════════════════════════
+# ---------------------------------------------------------------------------
 st.markdown("---")
-st.header("🗺️ Interactive Crime Dashboard")
+st.header("Interactive Crime Dashboard")
 st.markdown(
     """
     This dashboard lets you explore Chicago crime data across three linked views.
@@ -167,8 +148,8 @@ st.markdown(
     You can also **click a crime category** in the bar chart to drill into its temporal trend.
 
     The bottom line chart breaks daily incident counts into four time-of-day periods
-    (plus a grey total line), so you can see not just *where* crime happens but *when* it peaks.
-    The bar chart and line chart use the **full dataset** — no sampling.
+    (plus a grey total line). The bar chart and line chart use the **full dataset** with
+    no sampling; only the map points are sampled to keep the browser responsive.
     """
 )
 
@@ -176,8 +157,7 @@ brush      = alt.selection_interval(name="brush")
 click_type = alt.selection_point(fields=["Primary Type"], name="click_type")
 click_dist = alt.selection_point(fields=["District_Str"], name="click_dist")
 
-# Map: geo points sampled to keep browser responsive; bar + line use full df
-MAP_SAMPLE = 5000
+MAP_SAMPLE   = 5000
 df_map_sample = df_geo.sample(min(MAP_SAMPLE, len(df_geo)), random_state=42)
 
 background = (
@@ -200,18 +180,15 @@ geo_points = (
         latitude="latitude:Q",
         color=alt.condition(
             click_dist,
-            alt.Color(
-                "District:N",
-                scale=alt.Scale(scheme="tableau10"),
-                legend=alt.Legend(title="District", orient="right"),
-            ),
+            alt.Color("District:N", scale=alt.Scale(scheme="tableau10"),
+                      legend=alt.Legend(title="District", orient="right")),
             alt.value("#e0dbd6"),
         ),
         opacity=alt.condition(click_dist, alt.value(0.6), alt.value(0.05)),
         tooltip=[
             alt.Tooltip("Primary Type:N", title="Crime Type"),
-            alt.Tooltip("District:N", title="District"),
-            alt.Tooltip("date:T", title="Date"),
+            alt.Tooltip("District:N",     title="District"),
+            alt.Tooltip("date:T",         title="Date"),
         ],
     )
     .add_params(brush)
@@ -222,7 +199,7 @@ map_layer = (background + geo_points).project(type="mercator").properties(
     title=f"Chicago Crime Map (map shows {MAP_SAMPLE:,} sampled points for performance)",
 )
 
-# Bar chart — FULL df, filtered by brush + district selections
+# Bar chart - full df
 type_chart = (
     alt.Chart(df)
     .mark_bar()
@@ -238,14 +215,9 @@ type_chart = (
     .transform_filter(click_dist)
 )
 
-# Line chart — FULL df, filtered by all three selections
-period_order = [
-    "Morning (6am-12pm)",
-    "Afternoon (12pm-6pm)",
-    "Evening (6pm-12am)",
-    "Late Night (12am-6am)",
-    "Total Daily",
-]
+# Line chart - full df
+period_order = ["Morning (6am-12pm)", "Afternoon (12pm-6pm)",
+                "Evening (6pm-12am)", "Late Night (12am-6am)", "Total Daily"]
 period_range = ["#f4a261", "#e9c46a", "#e76f51", "#264653", "grey"]
 
 period_lines = (
@@ -261,8 +233,8 @@ period_lines = (
         ),
         tooltip=[
             alt.Tooltip("Date_Only:T", title="Date"),
-            alt.Tooltip("Period:N", title="Period"),
-            alt.Tooltip("count:Q", title="Incidents"),
+            alt.Tooltip("Period:N",    title="Period"),
+            alt.Tooltip("count:Q",     title="Incidents"),
         ],
     )
     .transform_filter(brush)
@@ -281,7 +253,7 @@ total_line = (
         color=alt.datum("Total Daily"),
         tooltip=[
             alt.Tooltip("Date_Only:T", title="Date"),
-            alt.Tooltip("count():Q", title="Total Incidents"),
+            alt.Tooltip("count():Q",   title="Total Incidents"),
         ],
     )
     .transform_filter(brush)
@@ -297,82 +269,81 @@ line_chart = (total_line + period_lines).properties(
 dashboard = ((map_layer | type_chart) & line_chart).resolve_scale(color="independent")
 st.altair_chart(dashboard, use_container_width=True)
 
-# ═══════════════════════════════════════════════════════════════════════════════
-# SECTION 2 — When do crimes happen? (standalone heatmap + dropdown)
-# ═══════════════════════════════════════════════════════════════════════════════
+# ---------------------------------------------------------------------------
+# SECTION 2 — When do crimes happen? heatmap + dropdown
+# Pre-aggregate to 7x24 = 168 rows in Python before rendering,
+# so switching crime types is instant - no re-streaming of raw data to browser.
+# ---------------------------------------------------------------------------
 st.markdown("---")
-st.header("🕐 When Do Crimes Happen in Chicago?")
+st.header("When Do Crimes Happen in Chicago?")
 st.markdown(
     """
     Different crimes follow different schedules. Use the **dropdown below** to filter
-    the heatmap to a specific crime category — or leave it on *All* to see the overall
-    pattern. Each cell shows the total number of incidents at that day-of-week × hour-of-day
-    combination across the **full dataset**; darker red means more incidents.
+    the heatmap by crime category, or leave it on *All* to see the overall pattern.
+    Each cell shows the total number of incidents at that day-of-week x hour-of-day
+    combination across the full dataset; darker red means more incidents.
 
-    Across nearly every category, Friday and Saturday evenings (6 pm – midnight)
-    stand out as the most active windows, while the early-morning hours (2–5 am)
+    Across nearly every category, Friday and Saturday evenings (6 pm to midnight)
+    stand out as the most active windows, while the early-morning hours (2 to 5 am)
     are consistently quietest.
     """
 )
 
 top_types_hm = df["Primary Type"].value_counts().head(10).index.tolist()
-selected_hm  = st.selectbox(
-    "Select Crime Type",
-    options=["All"] + top_types_hm,
-    index=0,
-)
+selected_hm  = st.selectbox("Select Crime Type", options=["All"] + top_types_hm, index=0)
 
-hm_df = df if selected_hm == "All" else df[df["Primary Type"] == selected_hm]
+# Key fix: groupby in Python first -> only 168 rows reach Altair -> instant render
 weekday_order = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+hm_source = df if selected_hm == "All" else df[df["Primary Type"] == selected_hm]
+hm_agg = (
+    hm_source
+    .groupby(["weekday", "Hour"])
+    .size()
+    .reset_index(name="crime_count")
+)
 
 heatmap = (
-    alt.Chart(hm_df)
+    alt.Chart(hm_agg)
     .mark_rect()
     .encode(
         x=alt.X("weekday:N", sort=weekday_order, title="Day of Week"),
-        y=alt.Y("Hour:O", title="Hour of Day (0–23)", sort="ascending"),
-        color=alt.Color(
-            "count():Q",
-            scale=alt.Scale(scheme="reds"),
-            title="Number of Crimes",
-        ),
+        y=alt.Y("Hour:O", title="Hour of Day (0-23)", sort="ascending"),
+        color=alt.Color("crime_count:Q", scale=alt.Scale(scheme="reds"), title="Number of Crimes"),
         tooltip=[
-            alt.Tooltip("weekday:N", title="Day"),
-            alt.Tooltip("Hour:O", title="Hour"),
-            alt.Tooltip("count():Q", title="Total Crimes"),
+            alt.Tooltip("weekday:N",     title="Day"),
+            alt.Tooltip("Hour:O",        title="Hour"),
+            alt.Tooltip("crime_count:Q", title="Total Crimes"),
         ],
     )
     .properties(
         width=700, height=380,
-        title=alt.TitleParams(
-            text=f"Crime Heatmap — {selected_hm}",
-            subtitle="Select a crime type above to filter · Full dataset · Darker = more incidents",
-            fontSize=14,
-        ),
+        title=f"Crime Heatmap - {selected_hm} (full dataset, darker = more incidents)",
     )
 )
 st.altair_chart(heatmap, use_container_width=True)
 
-# ═══════════════════════════════════════════════════════════════��═══════════════
+# ---------------------------------------------------------------------------
 # SECTION 3 — Poverty vs. Crime
-# ═══════════════════════════════════════════════════════════════════════════════
+# Left: choropleth + binned geo-heatmap (no sampling, full density visible)
+# Right: scatter with full crime counts per community area
+# ---------------------------------------------------------------------------
 st.markdown("---")
-st.header("💸 Does Poverty Predict Crime?")
+st.header("Does Poverty Predict Crime?")
 st.markdown(
     """
     Socioeconomic inequality is one of the most studied predictors of crime at the
     neighborhood level. The choropleth map on the left shades each of Chicago's 77
-    community areas by their poverty rate — darker orange means higher poverty —
-    with crime incident dots overlaid in blue.
+    community areas by their poverty rate - darker orange means higher poverty -
+    with a binned crime density heatmap overlaid. The heatmap uses the full dataset
+    with no sampling: each cell's color reflects how many incidents fall in that
+    geographic bin, giving a clear picture of crime hotspots.
 
-    A visual comparison suggests that some of the highest-crime community areas,
-    particularly on the South and West sides, also carry the heaviest poverty burden.
-    The scatter plot on the right makes this relationship explicit: each dot is one
-    community area, and the dashed line is a statistical trend. There is a moderate
-    positive correlation, though it is far from deterministic — policy, policing
-    patterns, and reporting rates all play a role.
+    The scatter plot on the right makes the poverty-crime relationship explicit:
+    each dot is one community area, and the dashed line is a statistical trend.
+    There is a moderate positive correlation, though it is far from deterministic -
+    policy, policing patterns, and reporting rates all play a role.
 
-    **Socioeconomic data source:** [Census Data — Chicago Data Portal](https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-Socioeconomic-Indicators-in-C/kn9c-c2s2)
+    **Socioeconomic data source:** [Census Data - Chicago Data Portal](https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-Socioeconomic-Indicators-in-C/kn9c-c2s2)
     """
 )
 
@@ -388,11 +359,8 @@ with col3:
                 from_=alt.LookupData(df_socio, "ca", ["poverty_rate", "community_area_name"]),
             )
             .encode(
-                color=alt.Color(
-                    "poverty_rate:Q",
-                    scale=alt.Scale(scheme="orangered"),
-                    title="Poverty Rate (%)",
-                ),
+                color=alt.Color("poverty_rate:Q", scale=alt.Scale(scheme="orangered"),
+                                title="Poverty Rate (%)"),
                 tooltip=[
                     alt.Tooltip("properties.community:N", title="Community"),
                     alt.Tooltip("poverty_rate:Q", title="Poverty Rate (%)", format=".1f"),
@@ -401,19 +369,34 @@ with col3:
             .project(type="mercator")
             .properties(width=360, height=440, title="Chicago Poverty Rate by Community Area")
         )
-        # Overlay: sample only for rendering dots on the map (visual only, not analysis)
-        crime_overlay = (
-            alt.Chart(df_geo.sample(min(5000, len(df_geo)), random_state=42))
-            .mark_circle(size=3, color="steelblue", opacity=0.3)
-            .encode(longitude="longitude:Q", latitude="latitude:Q")
+
+        # Binned geo-heatmap: full dataset, no sampling needed
+        # maxbins=50 -> ~2500 cells max, renders fast and shows full density
+        crime_density = (
+            alt.Chart(df_geo)
+            .mark_rect(opacity=0.55)
+            .encode(
+                longitude=alt.X("longitude:Q", bin=alt.Bin(maxbins=50)),
+                latitude=alt.Y("latitude:Q",   bin=alt.Bin(maxbins=50)),
+                color=alt.Color(
+                    "count():Q",
+                    scale=alt.Scale(scheme="blues"),
+                    title="Incident Count",
+                    legend=alt.Legend(title="Incidents"),
+                ),
+            )
+        )
+
+        st.altair_chart(
+            (poverty_map + crime_density).resolve_scale(color="independent"),
+            use_container_width=True,
         )
-        st.altair_chart(poverty_map + crime_overlay, use_container_width=True)
     else:
         st.info("Socioeconomic or boundary data unavailable.")
 
 with col4:
     if not df_socio.empty and df["community_area"].notna().any():
-        # Crime count by community uses the FULL df — no sampling
+        # Full df for crime counts - no sampling
         df_crime_count = (
             df.dropna(subset=["community_area"])
             .groupby("community_area").size()
@@ -433,16 +416,13 @@ with col4:
                 .mark_circle(size=80, opacity=0.75)
                 .encode(
                     x=alt.X("poverty_rate:Q", title="Poverty Rate (%)"),
-                    y=alt.Y("crime_count:Q", title="Crime Count (2026)"),
-                    color=alt.Color(
-                        "poverty_rate:Q",
-                        scale=alt.Scale(scheme="orangered"),
-                        legend=None,
-                    ),
+                    y=alt.Y("crime_count:Q",  title="Crime Count (2026)"),
+                    color=alt.Color("poverty_rate:Q", scale=alt.Scale(scheme="orangered"),
+                                    legend=None),
                     tooltip=[
                         alt.Tooltip("community_area_name:N", title="Community"),
-                        alt.Tooltip("poverty_rate:Q", title="Poverty Rate (%)", format=".1f"),
-                        alt.Tooltip("crime_count:Q", title="Crime Count"),
+                        alt.Tooltip("poverty_rate:Q",        title="Poverty Rate (%)", format=".1f"),
+                        alt.Tooltip("crime_count:Q",         title="Crime Count"),
                     ],
                 )
             )
@@ -452,11 +432,7 @@ with col4:
             st.altair_chart(
                 (sc + reg).properties(
                     width=360, height=440,
-                    title=alt.TitleParams(
-                        text="Higher Poverty → More Crimes?",
-                        subtitle="Each dot = one community area  |  Dashed = trend  |  Full dataset counts",
-                        fontSize=13,
-                    ),
+                    title="Higher Poverty -> More Crimes? (each dot = one community area)",
                 ),
                 use_container_width=True,
             )
@@ -465,14 +441,16 @@ with col4:
     else:
         st.info("Community area data not available in this dataset sample.")
 
-# ── Citations ─────────────────────────────────────────────────────────────────
+# ---------------------------------------------------------------------------
+# Citations
+# ---------------------------------------------------------------------------
 st.markdown("---")
-st.header("📚 Data Sources & Citations")
+st.header("Data Sources & Citations")
 st.markdown(
     """
     | Dataset | Source | Link |
     |---|---|---|
-    | Chicago Crimes 2001–Present | City of Chicago Data Portal | [ijzp-q8t2](https://data.cityofchicago.org/Public-Safety/Crimes-2001-to-Present/ijzp-q8t2) |
+    | Chicago Crimes 2001-Present | City of Chicago Data Portal | [ijzp-q8t2](https://data.cityofchicago.org/Public-Safety/Crimes-2001-to-Present/ijzp-q8t2) |
     | Socioeconomic Indicators by Community | City of Chicago Data Portal | [kn9c-c2s2](https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-Socioeconomic-Indicators-in-C/kn9c-c2s2) |
     | Police District Boundaries (GeoJSON) | City of Chicago Data Portal | [24zt-jpfn](https://data.cityofchicago.org/Public-Safety/Boundaries-Police-Districts-current-/24zt-jpfn) |
     | Community Area Boundaries (GeoJSON) | City of Chicago Data Portal | [igwz-8jzy](https://data.cityofchicago.org/Facilities-Geographic-Boundaries/Boundaries-Community-Areas-current-/cauq-8yn6) |