Update src/streamlit_app.py

src/streamlit_app.py

@@ -27,25 +27,16 @@ st.markdown(
 # Data loading (Now using local CSV for extreme speedup)
 # ---------------------------------------------------------------------------
 @st.cache_data(show_spinner="Loading local Chicago crime data...")
-@st.cache_data(show_spinner="Loading local Chicago crime data...")
 def load_crime_data():
     """Robust loading for Hugging Face Spaces (handles path issues)."""
     import os
 
     try:
-        # ✅ 获取当前脚本所在目录（关键！！）
+        # 获取当前脚本所在目录
         BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-
-        # ✅ 构造绝对路径
         file_path = os.path.join(BASE_DIR, "Crimes_-_2026_20260417.csv")
 
-        # ✅ Debug信息（第一次部署时非常重要）
-        st.write("📂 Current working dir:", os.getcwd())
-        st.write("📂 BASE_DIR:", BASE_DIR)
-        st.write("📄 Files in BASE_DIR:", os.listdir(BASE_DIR))
-        st.write("📄 Trying to read:", file_path)
-
-        # ✅ 读取 CSV
+        # 读取 CSV
         df = pd.read_csv(file_path)
 
         # 标准化列名
@@ -58,9 +49,7 @@ def load_crime_data():
         st.error(f"❌ Failed to read CSV: {e}")
         return pd.DataFrame()
 
-    # -------------------------
-    # 后处理（你原来的逻辑）
-    # -------------------------
+    # 后处理
     df["date"] = pd.to_datetime(df["date"], errors="coerce")
 
     for col in ["latitude", "longitude"]:
@@ -150,9 +139,9 @@ st.markdown(
     **Drag a box on the map** to select a geographic area, or **click a district boundary**
     to highlight it — both actions filter the bar chart on the right and the timeline below.
     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). The bar chart and line chart use the **full dataset** with
-    no sampling; only the map points are sampled to keep the browser responsive.
+    
+    *(Note: If the map points look like a strict grid, it is because the Chicago Police Department 
+    anonymizes crime locations to the nearest block level, aligning perfectly with Chicago's grid street system!)*
     """
 )
 
@@ -272,50 +261,58 @@ dashboard = ((map_layer | type_chart) & line_chart).resolve_scale(color="indepen
 st.altair_chart(dashboard, use_container_width=True)
 
 # ---------------------------------------------------------------------------
-# SECTION 2 — When do crimes happen? heatmap + dropdown
+# SECTION 2 — When do crimes happen? heatmap + dropdown (NOW LAG-FREE)
 # ---------------------------------------------------------------------------
 st.markdown("---")
 st.header("When Do Crimes Happen in Chicago?")
 st.markdown(
     """
     Different crimes follow different schedules. Use the **dropdown below** to filter
-    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 to midnight)
-    stand out as the most active windows, while the early-morning hours (2 to 5 am)
-    are consistently quietest.
+    the heatmap by crime category. 
+    *(This is now fully interactive in your browser, filtering happens instantly without lag!)*
     """
 )
 
+# 提取前10大罪案类型
 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)
 
-weekday_order = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
-hm_source = df if selected_hm == "All" else df[df["Primary Type"] == selected_hm]
+# 在 Python 预先计算所有 (Primary Type, weekday, Hour) 的聚合数量，减少传到前端的数据量
 hm_agg = (
-    hm_source
-    .groupby(["weekday", "Hour"])
+    df.dropna(subset=["Primary Type"])
+    .groupby(["Primary Type", "weekday", "Hour"])
     .size()
     .reset_index(name="crime_count")
 )
 
+# 🔥 核心提速秘籍：创建一个 Altair 原生的下拉绑定，把过滤操作全推给前端浏览器做，不重启 Streamlit！
+dropdown = alt.binding_select(
+    options=[None] + top_types_hm,
+    labels=["All"] + top_types_hm,
+    name="Filter by Crime Type: "
+)
+type_select = alt.selection_point(fields=["Primary Type"], bind=dropdown)
+
+weekday_order = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+
 heatmap = (
     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("crime_count:Q", scale=alt.Scale(scheme="reds"), title="Number of Crimes"),
+        # 使用 sum(crime_count) 确保选 All 的时候数字正确累加
+        color=alt.Color("sum(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("crime_count:Q", title="Total Crimes"),
+            alt.Tooltip("weekday:N", title="Day"),
+            alt.Tooltip("Hour:O", title="Hour"),
+            alt.Tooltip("sum(crime_count):Q", title="Total Crimes"),
         ],
     )
+    .add_params(type_select)          # 绑定前端选择器
+    .transform_filter(type_select)    # 让图表根据选择器过滤数据
     .properties(
         width=700, height=380,
-        title=f"Crime Heatmap - {selected_hm} (full dataset, darker = more incidents)",
+        title="Crime Heatmap (Instantly filterable)",
     )
 )
 st.altair_chart(heatmap, use_container_width=True)
@@ -366,19 +363,19 @@ with col3:
             .properties(width=360, height=440, title="Chicago Poverty Rate by Community Area")
         )
         
-        # --- Pre-aggregate data for geographic binning in Pandas ---
-        # 舍入到 2 位小数创建了与 maxbins=50 相似的地理网格
+        # --- FIX: 改成了更高精度的 round(3) 结合 mark_circle 来实现细腻的热力图外观 ---
         df_geo_binned = df_geo.copy()
-        df_geo_binned['lat_bin'] = df_geo_binned['latitude'].round(2)
-        df_geo_binned['lon_bin'] = df_geo_binned['longitude'].round(2)
+        # round(3) 大约对应100米的网格，比原来的 1.1公里 (round 2) 精细很多
+        df_geo_binned['lat_bin'] = df_geo_binned['latitude'].round(3)
+        df_geo_binned['lon_bin'] = df_geo_binned['longitude'].round(3)
         
-        # 统计每个坐标网格的案件数量
+        # 统计每个细微网格的案件数量
         density_agg = df_geo_binned.groupby(['lat_bin', 'lon_bin']).size().reset_index(name='incident_count')
 
-        # Binned geo-heatmap: 使用 mark_square 模拟网格热力图
+        # Binned geo-heatmap: 使用半透明的小圆点(mark_circle)模拟完美的热力云图
         crime_density = (
             alt.Chart(density_agg)
-            .mark_square(opacity=0.65, size=80) 
+            .mark_circle(opacity=0.6, size=15)  # 调小了size，换成了圆形
             .encode(
                 longitude="lon_bin:Q",
                 latitude="lat_bin:Q",