Update src/streamlit_app.py

src/streamlit_app.py

@@ -4,7 +4,7 @@ import altair as alt
 import json
 import urllib.request
 
-# ── Page config ──────────────────────────────────────────────────────────────
+# ── Page config ───────────────────────────────────────────────────────────────
 st.set_page_config(
     page_title="Crimes in Chicago 2026",
     page_icon="🔍",
@@ -16,7 +16,7 @@ st.title("🔍 Crimes in Chicago — 2026")
 st.markdown("**Authors: Xinyi Chen, Zhongyin Wang** · Group 6")
 st.markdown("---")
 
-# ── Introduction ─────────────────────────────────────────────────────────────
+# ── Introduction ──────────────────────────────────────────────────────────────
 st.markdown(
     """
     ## What Is This About?
@@ -39,74 +39,104 @@ st.markdown(
 # ── Data loading ──────────────────────────────────────────────────────────────
 @st.cache_data(show_spinner="Loading Chicago crime data…")
 def load_crime_data():
-    url = "https://data.cityofchicago.org/resource/ijzp-q8t2.json?$where=year=2026&$limit=10000&$order=date DESC"
-    df = pd.read_json(url)
+    # Use %20 for space in $order — bare spaces cause InvalidURL in Python 3.13
+    url = (
+        "https://data.cityofchicago.org/resource/ijzp-q8t2.json"
+        "?$where=year=2026"
+        "&$limit=10000"
+        "&$order=date%20DESC"
+    )
+    try:
+        df = pd.read_json(url)
+    except Exception as e:
+        st.error(f"Failed to load crime data: {e}")
+        return pd.DataFrame()
+
     df["date"] = pd.to_datetime(df["date"], errors="coerce")
-    df["latitude"] = pd.to_numeric(df.get("latitude", pd.Series(dtype=float)), errors="coerce")
-    df["longitude"] = pd.to_numeric(df.get("longitude", pd.Series(dtype=float)), 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=["latitude", "longitude", "date"])
     df["date_only"] = df["date"].dt.floor("d")
     df["hour"] = df["date"].dt.hour
     df["month"] = df["date"].dt.month
     df["weekday"] = df["date"].dt.day_name().str[:3]
-    df["primary_type"] = df.get("primary_type", pd.Series(dtype=str)).str.title()
-    df["district"] = pd.to_numeric(df.get("district", pd.Series(dtype=str)), errors="coerce").fillna(-1).astype(int).astype(str)
+    df["primary_type"] = df.get("primary_type", pd.Series(dtype=str)).str.title().fillna("Unknown")
+    df["district"] = (
+        pd.to_numeric(df.get("district", pd.Series(dtype=str)), errors="coerce")
+        .fillna(-1).astype(int).astype(str)
+    )
+    if "community_area" not in df.columns:
+        df["community_area"] = None
     return df
 
+
 @st.cache_data(show_spinner="Loading CTA station data…")
 def load_cta():
     url = "https://data.cityofchicago.org/resource/8pix-ypme.json"
-    df = pd.read_json(url)
-    df["lat"] = df["location"].apply(lambda x: float(x["latitude"]) if isinstance(x, dict) else None)
-    df["lon"] = df["location"].apply(lambda x: float(x["longitude"]) if isinstance(x, dict) else None)
-    return df.dropna(subset=["lat", "lon"])
+    try:
+        df = pd.read_json(url)
+        df["lat"] = df["location"].apply(lambda x: float(x["latitude"]) if isinstance(x, dict) else None)
+        df["lon"] = df["location"].apply(lambda x: float(x["longitude"]) if isinstance(x, dict) else None)
+        return df.dropna(subset=["lat", "lon"])
+    except Exception as e:
+        st.warning(f"Could not load CTA data: {e}")
+        return pd.DataFrame(columns=["lat", "lon", "station_name"])
+
 
 @st.cache_data(show_spinner="Loading socioeconomic data…")
 def load_socio():
     url = "https://data.cityofchicago.org/resource/kn9c-c2s2.json"
-    df = pd.read_json(url)
-    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")
-    return df
-
-@st.cache_data(show_spinner="Loading district boundaries…")
-def load_districts():
-    url = "https://data.cityofchicago.org/resource/24zt-jpfn.geojson"
-    with urllib.request.urlopen(url) as r:
-        return json.loads(r.read())
-
-@st.cache_data(show_spinner="Loading community boundaries…")
-def load_communities():
-    url = "https://data.cityofchicago.org/resource/igwz-8jzy.geojson"
-    with urllib.request.urlopen(url) as r:
-        return json.loads(r.read())
-
-df = load_crime_data()
-df_cta = load_cta()
+    try:
+        df = pd.read_json(url)
+        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")
+        return df
+    except Exception as e:
+        st.warning(f"Could not load socioeconomic data: {e}")
+        return pd.DataFrame(columns=["ca", "community_area_name", "poverty_rate"])
+
+
+@st.cache_data(show_spinner="Loading boundaries…")
+def load_geojson(url):
+    try:
+        with urllib.request.urlopen(url) as r:
+            return json.loads(r.read())
+    except Exception as e:
+        st.warning(f"Could not load GeoJSON: {e}")
+        return {"features": []}
+
+
+district_geojson  = load_geojson("https://data.cityofchicago.org/resource/24zt-jpfn.geojson")
+community_geojson = load_geojson("https://data.cityofchicago.org/resource/igwz-8jzy.geojson")
+
+df       = load_crime_data()
+df_cta   = load_cta()
 df_socio = load_socio()
-district_geojson = load_districts()
-community_geojson = load_communities()
 
-districts = alt.Data(values=district_geojson["features"])
+districts   = alt.Data(values=district_geojson["features"])
 communities = alt.Data(values=community_geojson["features"])
 
-# ── Section 1: Interactive main dashboard ────────────────────────────────────
+if df.empty:
+    st.error("⚠️ Crime data could not be loaded. Please check the Chicago Data Portal.")
+    st.stop()
+
+# ── Section 1: Interactive dashboard ─────────────────────────────────────────
 st.markdown("---")
 st.header("🗺️ Explore Chicago Crime Interactively")
 st.markdown(
     """
-    Use the filters below to slice the data by crime type. The map shows where crimes
-    happened, the bar chart shows the breakdown by type, and the heatmap at the bottom
-    reveals *when* crime peaks — by day of week and hour of day.
+    Use the filter below to focus on specific crime types. The map shows where crimes
+    happened across Chicago's police districts, while the bar chart ranks the most common
+    crime categories. The day × hour heatmap at the bottom reveals *when* crime peaks —
+    darker cells mean more incidents at that time slot.
 
-    **How to read this:** Darker cells in the heatmap mean more incidents at that
-    day-and-hour combination. Fridays and Saturdays in the afternoon tend to be
-    particularly active.
+    **Tip:** Fridays and Saturdays in the afternoon and evening consistently show
+    elevated activity across most crime categories.
     """
 )
 
-# Filter controls
 top_types = df["primary_type"].value_counts().head(12).index.tolist()
 selected_types = st.multiselect(
     "Filter by Crime Type (leave blank = show all)",
@@ -118,13 +148,10 @@ filtered_df = df[df["primary_type"].isin(selected_types)] if selected_types else
 col1, col2 = st.columns([1.2, 1])
 
 with col1:
-    # Crime map
-    background = (
-        alt.Chart(districts)
-        .mark_geoshape(fill="#f0f0f0", stroke="#aaa", strokeWidth=0.5)
-    )
-    crime_pts = (
-        alt.Chart(filtered_df.sample(min(3000, len(filtered_df)), random_state=42))
+    bg = alt.Chart(districts).mark_geoshape(fill="#f0f0f0", stroke="#aaa", strokeWidth=0.5)
+    n = min(3000, len(filtered_df))
+    pts = (
+        alt.Chart(filtered_df.sample(n, random_state=42))
         .mark_circle(size=4, opacity=0.35, color="crimson")
         .encode(
             longitude="longitude:Q",
@@ -135,14 +162,16 @@ with col1:
             ],
         )
     )
-    crime_map = (background + crime_pts).project(type="mercator").properties(
-        width=480, height=450, title="Crime Incident Locations (sample up to 3 000)"
+    st.altair_chart(
+        (bg + pts).project(type="mercator").properties(
+            width=480, height=450,
+            title=f"Crime Incident Locations (showing {n:,} points)"
+        ),
+        use_container_width=True,
     )
-    st.altair_chart(crime_map, use_container_width=True)
 
 with col2:
-    # Crime type bar chart
-    bar = (
+    st.altair_chart(
         alt.Chart(filtered_df)
         .mark_bar(color="steelblue")
         .encode(
@@ -150,13 +179,12 @@ with col2:
             y=alt.Y("primary_type:N", sort="-x", title="Crime Type"),
             tooltip=["primary_type:N", "count():Q"],
         )
-        .properties(width=380, height=450, title="Incidents by Crime Type")
+        .properties(width=380, height=450, title="Incidents by Crime Type"),
+        use_container_width=True,
     )
-    st.altair_chart(bar, use_container_width=True)
 
-# When-do-crimes-happen heatmap
 weekday_order = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
-heatmap = (
+st.altair_chart(
     alt.Chart(filtered_df)
     .mark_rect()
     .encode(
@@ -170,34 +198,34 @@ heatmap = (
         ],
     )
     .properties(
-        width=700,
-        height=300,
+        width=700, height=300,
         title=alt.TitleParams(
             text="When Do Crimes Happen in Chicago?",
             subtitle="Darker = more incidents at that day × hour combination",
             fontSize=14,
         ),
-    )
+    ),
+    use_container_width=True,
 )
-st.altair_chart(heatmap, use_container_width=True)
 
-# ── Section 2: Monthly trend ─────────────────────────────────────────────────
+# ── Section 2: Monthly trend ──────────────────────────────────────────────────
 st.markdown("---")
 st.header("📅 Monthly Crime Trends")
 st.markdown(
     """
     Crime in Chicago is not evenly distributed across the calendar. The bar chart below
-    shows how total reported incidents vary month by month. Warmer months — typically
-    May through August — tend to see elevated activity, a pattern observed consistently
-    in cities across the United States and attributed to more people spending time outdoors.
+    shows how total reported incidents vary month by month in 2026. Warmer months —
+    typically May through August — tend to see elevated activity, a pattern observed
+    consistently in cities across the United States and attributed to more people spending
+    time outdoors and in public spaces.
 
     This seasonal pattern is important context: a spike in summer crime does not
     necessarily mean the city is becoming more dangerous overall; it may simply reflect
-    the rhythm of urban life.
+    the rhythm of urban life. Conversely, lower numbers in winter months partly reflect
+    people staying indoors, which reduces opportunities for certain street crimes.
     """
 )
-
-monthly = (
+st.altair_chart(
     alt.Chart(df)
     .mark_bar(color="#4a90d9")
     .encode(
@@ -205,9 +233,9 @@ monthly = (
         y=alt.Y("count():Q", title="Total Incidents"),
         tooltip=[alt.Tooltip("month:O", title="Month"), alt.Tooltip("count():Q", title="Incidents")],
     )
-    .properties(width=700, height=300, title="Monthly Crime Counts — Chicago 2026")
+    .properties(width=700, height=300, title="Monthly Crime Counts — Chicago 2026"),
+    use_container_width=True,
 )
-st.altair_chart(monthly, use_container_width=True)
 
 # ── Section 3: CTA overlay ────────────────────────────────────────────────────
 st.markdown("---")
@@ -217,8 +245,7 @@ st.markdown(
     Chicago's 'L' elevated rail network connects the entire city — but do transit hubs
     attract crime? The map below overlays CTA 'L' station locations (orange circles) on
     top of crime incident dots (crimson). Dense red areas near orange circles would suggest
-    a transit-crime relationship, while sparse red areas far from stations would suggest
-    the opposite.
+    a transit-crime relationship.
 
     The data shows that many high-crime areas coincide with station-dense corridors
     (especially the Loop and the Red Line), though causation is complex: these are also
@@ -228,32 +255,35 @@ st.markdown(
     **Data source:** [CTA 'L' Stops — Chicago Data Portal](https://data.cityofchicago.org/Transportation/CTA-System-Information-List-of-L-Stops/8pix-ypme)
     """
 )
-
-cta_bg = alt.Chart(districts).mark_geoshape(fill="#f0f0f0", stroke="#aaa", strokeWidth=0.5)
-crime_layer = (
-    alt.Chart(df.sample(min(4000, len(df)), random_state=1))
-    .mark_circle(size=4, opacity=0.25, color="crimson")
-    .encode(longitude="longitude:Q", latitude="latitude:Q")
-)
-cta_layer = (
-    alt.Chart(df_cta)
-    .mark_circle(size=50, color="orange", opacity=0.85, stroke="white", strokeWidth=0.8)
-    .encode(
-        longitude="lon:Q",
-        latitude="lat:Q",
-        tooltip=[alt.Tooltip("station_name:N", title="Station")],
+if not df_cta.empty:
+    cta_bg = alt.Chart(districts).mark_geoshape(fill="#f0f0f0", stroke="#aaa", strokeWidth=0.5)
+    crime_layer = (
+        alt.Chart(df.sample(min(4000, len(df)), random_state=1))
+        .mark_circle(size=4, opacity=0.25, color="crimson")
+        .encode(longitude="longitude:Q", latitude="latitude:Q")
     )
-)
-cta_map = (cta_bg + crime_layer + cta_layer).project(type="mercator").properties(
-    width=700,
-    height=500,
-    title=alt.TitleParams(
-        text="Chicago Crime vs. CTA 'L' Stations",
-        subtitle="Crimson dots = crime incidents  |  Orange circles = 'L' stations",
-        fontSize=14,
-    ),
-)
-st.altair_chart(cta_map, use_container_width=True)
+    cta_layer = (
+        alt.Chart(df_cta)
+        .mark_circle(size=50, color="orange", opacity=0.85, stroke="white", strokeWidth=0.8)
+        .encode(
+            longitude="lon:Q",
+            latitude="lat:Q",
+            tooltip=[alt.Tooltip("station_name:N", title="Station")],
+        )
+    )
+    st.altair_chart(
+        (cta_bg + crime_layer + cta_layer).project(type="mercator").properties(
+            width=700, height=500,
+            title=alt.TitleParams(
+                text="Chicago Crime vs. CTA 'L' Stations",
+                subtitle="Crimson dots = crime incidents  |  Orange circles = 'L' stations",
+                fontSize=14,
+            ),
+        ),
+        use_container_width=True,
+    )
+else:
+    st.info("CTA station data unavailable.")
 
 # ── Section 4: Poverty choropleth + scatter ───────────────────────────────────
 st.markdown("---")
@@ -269,82 +299,88 @@ st.markdown(
     particularly on the South and West sides — also carry the heaviest poverty burden.
     The scatter plot on the right makes this relationship more explicit: each dot is one
     community area, and the dashed line is a statistical trend line. There is a moderate
-    positive correlation, though the relationship is far from deterministic — some
-    lower-poverty areas still report significant crime, and vice versa.
+    positive correlation, though the relationship is far from deterministic.
 
-    **Socioeconomic data source:** [Census Data — Selected Socioeconomic Indicators, 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)
     """
 )
 
 col3, col4 = st.columns(2)
 
 with col3:
-    poverty_map = (
-        alt.Chart(communities)
-        .mark_geoshape(stroke="white", strokeWidth=0.4)
-        .transform_lookup(
-            lookup="properties.area_num_1",
-            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 (%)"),
-            tooltip=[
-                alt.Tooltip("properties.community:N", title="Community"),
-                alt.Tooltip("poverty_rate:Q", title="Poverty Rate (%)", format=".1f"),
-            ],
-        )
-        .project(type="mercator")
-        .properties(width=360, height=440, title="Chicago Poverty Rate by Community Area")
-    )
-    crime_dots_overlay = (
-        alt.Chart(df.sample(min(5000, len(df)), random_state=42))
-        .mark_circle(size=3, color="steelblue", opacity=0.3)
-        .encode(longitude="longitude:Q", latitude="latitude:Q")
-    )
-    st.altair_chart(poverty_map + crime_dots_overlay, use_container_width=True)
-
-with col4:
-    df_crime_count = df.groupby("community_area").size().reset_index(name="crime_count")
-    df_crime_count["ca"] = df_crime_count["community_area"].astype(str)
-    df_scatter = pd.merge(
-        df_socio[["ca", "community_area_name", "poverty_rate"]],
-        df_crime_count,
-        on="ca",
-        how="inner",
-    )
-
-    if len(df_scatter) > 5:
-        scatter = (
-            alt.Chart(df_scatter)
-            .mark_circle(size=80, opacity=0.75)
+    if not df_socio.empty and community_geojson["features"]:
+        poverty_map = (
+            alt.Chart(communities)
+            .mark_geoshape(stroke="white", strokeWidth=0.4)
+            .transform_lookup(
+                lookup="properties.area_num_1",
+                from_=alt.LookupData(df_socio, "ca", ["poverty_rate", "community_area_name"]),
+            )
             .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),
+                color=alt.Color("poverty_rate:Q", scale=alt.Scale(scheme="orangered"), title="Poverty Rate (%)"),
                 tooltip=[
-                    alt.Tooltip("community_area_name:N", title="Community"),
+                    alt.Tooltip("properties.community:N", title="Community"),
                     alt.Tooltip("poverty_rate:Q", title="Poverty Rate (%)", format=".1f"),
-                    alt.Tooltip("crime_count:Q", title="Crime Count"),
                 ],
             )
+            .project(type="mercator")
+            .properties(width=360, height=440, title="Chicago Poverty Rate by Community Area")
         )
-        regression = scatter.transform_regression("poverty_rate", "crime_count").mark_line(
-            color="gray", strokeDash=[4, 4], strokeWidth=1.5
+        crime_overlay = (
+            alt.Chart(df.sample(min(5000, len(df)), random_state=42))
+            .mark_circle(size=3, color="steelblue", opacity=0.3)
+            .encode(longitude="longitude:Q", latitude="latitude:Q")
         )
-        st.altair_chart(
-            (scatter + regression).properties(
-                width=360,
-                height=440,
-                title=alt.TitleParams(
-                    text="Higher Poverty → More Crimes?",
-                    subtitle="Each dot = one community area  |  Dashed = trend",
-                    fontSize=13,
-                ),
-            ),
-            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():
+        df_crime_count = (
+            df.dropna(subset=["community_area"])
+            .groupby("community_area").size()
+            .reset_index(name="crime_count")
+        )
+        df_crime_count["ca"] = df_crime_count["community_area"].astype(float).astype(int).astype(str)
+        df_scatter = pd.merge(
+            df_socio[["ca", "community_area_name", "poverty_rate"]],
+            df_crime_count[["ca", "crime_count"]],
+            on="ca", how="inner",
         )
+        if len(df_scatter) > 5:
+            sc = (
+                alt.Chart(df_scatter)
+                .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),
+                    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"),
+                    ],
+                )
+            )
+            reg = sc.transform_regression("poverty_rate", "crime_count").mark_line(
+                color="gray", strokeDash=[4, 4], strokeWidth=1.5
+            )
+            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",
+                        fontSize=13,
+                    ),
+                ),
+                use_container_width=True,
+            )
+        else:
+            st.info("Not enough community-level overlap to render scatter plot.")
     else:
-        st.info("Not enough community-level data to render scatter plot with this dataset sample.")
+        st.info("Community area data not available in this dataset sample.")
 
 # ── Citations ─────────────────────────────────────────────────────────────────
 st.markdown("---")
@@ -353,7 +389,7 @@ st.markdown(
     """
     | Dataset | Source | Link |
     |---|---|---|
-    | Chicago Crimes 2026 | 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) |
     | CTA 'L' Stop Locations | City of Chicago Data Portal | [8pix-ypme](https://data.cityofchicago.org/Transportation/CTA-System-Information-List-of-L-Stops/8pix-ypme) |
     | 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) |