Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,146 +1,144 @@
 import streamlit as st
 import pandas as pd
 import altair as alt
+import urllib.request
 import json
 
-# ================= 1. 页面基本设置 =================
-st.set_page_config(
-    page_title="Chicago Crime Analysis 2026",
-    layout="wide"
-)
+# ================= 1. 页面配置 =================
+st.set_page_config(page_title="Chicago Crime 2026 Analysis", layout="wide")
+
+st.title("Rhythms of the City: A 2026 Chicago Crime Perspective")
+st.markdown("**Authors: Group 6 (Xinyi Chen, Zhongyin Wang)**")
 
-# ================= 2. 数据加载与清理 (使用缓存) =================
+# ================= 2. 数据加载与预处理 =================
 @st.cache_data
-def load_data():
-    # 注意：请确保你的 CSV 文件名与此处一致
-    file_path = "Crimes_-_2026_20260417.csv" 
-    
+def load_all_data():
+    # A. 犯罪数据
+    crime_file = "Crimes_-_2026_20260417.csv"
     try:
-        df = pd.read_csv(file_path, low_memory=False)
+        df = pd.read_csv(crime_file, low_memory=False)
     except:
-        # 如果本地没找到，可以尝试从你的 GitHub raw 链接读取作为备用
         url = "https://raw.githubusercontent.com/xinyic11/IS445_Final/main/Crimes_-_2026_20260417.csv"
         df = pd.read_csv(url, low_memory=False)
-
-    # 基础清理
-    df['Date'] = pd.to_datetime(df['Date'], format='%m/%d/%Y %I:%M:%S %p', errors='coerce')
-    clean_df = df.dropna(subset=['Longitude', 'Latitude']).copy()
     
-    # 🌟 修复 1：使用大写 'D' 消除 Pandas 弃用警告
-    clean_df['Date_Only'] = clean_df['Date'].dt.floor('D')
-    clean_df['District_Str'] = pd.to_numeric(clean_df['District'], errors='coerce').fillna(-1).astype(int).astype(str)
+    df['Date'] = pd.to_datetime(df['Date'], format='%m/%d/%Y %I:%M:%S %p', errors='coerce')
+    df = df.dropna(subset=['Longitude', 'Latitude']).copy()
+    df['Date_Only'] = df['Date'].dt.floor('D')
+    df['District_Str'] = pd.to_numeric(df['District'], errors='coerce').fillna(-1).astype(int).astype(str)
     
-    # 计算时段 Period
-    clean_df['Hour'] = clean_df['Date'].dt.hour
-    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)'
-    clean_df['Period'] = clean_df['Hour'].apply(get_period)
+    # B. 经济社会数据 (用于散点图)
+    socio_url = "https://data.cityofchicago.org/resource/kn9c-c2s2.json"
+    df_socio = pd.read_json(socio_url)
+    df_socio['ca'] = df_socio['ca'].astype(float).astype(int).astype(str)
     
-    # --- 数据瘦身：只保留画图需要的列 ---
-    cols_to_keep = ['Longitude', 'Latitude', 'District', 'District_Str', 'Primary Type', 'Date_Only', 'Period', 'Hour']
-    return clean_df[cols_to_keep]
-
-# 加载数据
-data = load_data()
-
-# ================= 3. 页面标题与导言 =================
-st.title("Rhythms of the City: A 2026 Chicago Crime Perspective")
-st.markdown("### Authors: Group 6 (Xinyi Chen, Zhongyin Wang)")
+    return df, df_socio
 
-st.markdown("""
-Crime is rarely a random occurrence; it is a complex tapestry woven from geography, time, and social conditions. 
-This report dives into tens of thousands of crime records from the 2026 Chicago dataset to uncover where, when, and why these incidents happen.
-""")
+df_crime, df_socio = load_all_data()
 
-# ================= 4. 核心交互图表 (Dashboard) =================
+# ================= 3. 中央交互 Dashboard (修复点击变白问题) =================
 st.header("1. Central Exploration: The Crime Landscape")
-st.write("点击地图上的警区（District）或右侧的犯罪类型（Crime Type）来联动筛选下方的时间轴。")
+st.write("点击地图上的警区，或点击右侧条形图中的犯罪类型，下方时间轴会随之联动。")
 
-# --- 准备 Dashboard 的交互参数 ---
+# 准备交互选择器
 click_dist = alt.selection_point(fields=['District_Str'])
 click_type = alt.selection_point(fields=['Primary Type'])
 
-# --- A. 填色地图 (优化方案，秒开不卡顿) ---
-df_dist_counts = data.groupby('District_Str').size().reset_index(name='crime_count')
+# A. 填色地图
 geojson_url = 'https://data.cityofchicago.org/resource/24zt-jpfn.geojson'
 districts_geo = alt.Data(url=geojson_url, format=alt.DataFormat(property='features', type='json'))
+df_dist_counts = df_crime.groupby('District_Str').size().reset_index(name='crime_count')
 
-choropleth = alt.Chart(districts_geo).mark_geoshape(
+map_chart = alt.Chart(districts_geo).mark_geoshape(
     stroke='white', strokeWidth=1
+).transform_calculate(
+    # 关键修复：确保地理数据的字段名与犯罪数据的 District_Str 匹配
+    District_Str = "datum.properties.dist_num"
 ).transform_lookup(
-    lookup='properties.dist_num',
+    lookup='District_Str',
     from_=alt.LookupData(df_dist_counts, 'District_Str', ['crime_count'])
 ).encode(
     color=alt.condition(click_dist, 
-                        alt.Color('crime_count:Q', scale=alt.Scale(scheme='reds'), title='Crimes'),
+                        alt.Color('crime_count:Q', scale=alt.Scale(scheme='reds'), title='案件数'),
                         alt.value('lightgrey')),
-    tooltip=[alt.Tooltip('properties.dist_num:N', title='District'), 
-             alt.Tooltip('crime_count:Q', title='Total Crimes')]
-).add_params(click_dist).properties(width=380, height=400)
+    tooltip=[alt.Tooltip('properties.dist_num:N', title='警区'), alt.Tooltip('crime_count:Q', title='总案件数')]
+).add_params(click_dist).properties(width=400, height=450)
 
-# --- B. 犯罪类型柱状图 ---
-type_chart = alt.Chart(data).mark_bar().encode(
-    x=alt.X('count():Q', title='Number of Crimes'),
+# B. 柱状图
+type_chart = alt.Chart(df_crime).mark_bar().encode(
+    x=alt.X('count():Q', title='案件数量'),
     y=alt.Y('Primary Type:N', sort='-x', title=None),
     color=alt.condition(click_type, alt.value('steelblue'), alt.value('lightgray')),
     tooltip=['Primary Type', 'count()']
-).add_params(click_type).transform_filter(click_dist).properties(width=250, height=400)
-
-# --- C. 时间趋势图 (含灰色总线) ---
-period_order = ['Morning (6am-12pm)', 'Afternoon (12pm-6pm)', 'Evening (6pm-12am)', 'Late Night (12am-6am)', 'Total Daily']
-period_range = ['#f4a261', '#e9c46a', '#e76f51', '#264653', '#888888']
-
-period_lines = alt.Chart(data).mark_line(strokeWidth=1.5).encode(
-    x=alt.X('Date_Only:T', title='Timeline'),
-    y=alt.Y('count:Q', title='Incidents'),
-    color=alt.Color('Period:N', scale=alt.Scale(domain=period_order, range=period_range), legend=alt.Legend(title='Time of Day')),
-    tooltip=['Date_Only:T', 'Period:N', 'count:Q']
-).transform_filter(click_dist).transform_filter(click_type).transform_aggregate(
-    count='count()', groupby=['Date_Only', 'Period']
-)
+).add_params(click_type).transform_filter(click_dist).properties(width=300, height=450)
+
+# C. 时间线图
+df_crime['Hour'] = df_crime['Date'].dt.hour
+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_crime['Period'] = df_crime['Hour'].apply(get_period)
+
+line_chart = alt.Chart(df_crime).mark_line().encode(
+    x=alt.X('Date_Only:T', title='时间轴'),
+    y=alt.Y('count():Q', title='案件数'),
+    color=alt.Color('Period:N', scale=alt.Scale(scheme='category10'), title='时段'),
+    tooltip=['Date_Only:T', 'count():Q']
+).transform_filter(click_dist).transform_filter(click_type).properties(width=800, height=250)
+
+st.altair_chart((map_chart | type_chart) & line_chart, theme=None)
+
+# ================= 4. Heatmap (修复下拉框缺失问题) =================
+st.header("2. Temporal Patterns: The City's Heartbeat")
 
-total_line = alt.Chart(data).mark_line(opacity=0.3, strokeWidth=3).encode(
-    x=alt.X('Date_Only:T'),
-    y=alt.Y('count():Q'),
-    color=alt.datum('Total Daily'),
-    tooltip=[alt.Tooltip('Date_Only:T', title='Date'), alt.Tooltip('count():Q', title='Total')]
-).transform_filter(click_dist).transform_filter(click_type)
+# 在 Streamlit 中，使用 st.selectbox 代替 Vega 内部 binding 效果更好
+top_types = df_crime['Primary Type'].value_counts().head(10).index.tolist()
+selected_crime = st.selectbox("选择犯罪类型进行分析:", ["All"] + top_types)
 
-line_chart = (total_line + period_lines).properties(width=700, height=250).resolve_scale(color='shared')
+# 过滤数据
+df_heatmap = df_crime.copy()
+if selected_crime != "All":
+    df_heatmap = df_heatmap[df_heatmap['Primary Type'] == selected_crime]
 
-# 🌟 修复 3a：使用 width='content' 消除 Streamlit 警告
-st.altair_chart((choropleth | type_chart) & line_chart, width='content')
+df_heatmap['Weekday'] = df_heatmap['Date'].dt.day_name().str[:3]
+df_heatmap['Hour'] = df_heatmap['Date'].dt.hour
+weekday_order = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 
+heatmap = alt.Chart(df_heatmap).mark_rect().encode(
+    x=alt.X('Weekday:N', sort=weekday_order, title='星期'),
+    y=alt.Y('Hour:O', title='小时'),
+    color=alt.Color('count():Q', scale=alt.Scale(scheme='reds'), title='案件数'),
+    tooltip=['Weekday', 'Hour', 'count()']
+).properties(width=700, height=400, title=f"犯罪时间分布: {selected_crime}")
 
-# ================= 5. 上下文图表 (Heatmap) =================
-st.header("2. Temporal Patterns: The City's Heartbeat")
-st.markdown("分析每周各时段的犯罪频率，揭示犯罪的高发窗口。")
+st.altair_chart(heatmap, use_container_width=True)
 
-weekday_order = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
-top_10 = data['Primary Type'].value_counts().head(10).index.tolist()
-df_heatmap = data[data['Primary Type'].isin(top_10)].copy()
+# ================= 5. 经济贫困散点图 (还原缺失的分析) =================
+st.header("3. Socioeconomic Roots: Poverty and Safety")
 
-# 🌟 修复 2：使用 Date_Only 提取星期几，消除 KeyError: 'Date' 报错
-df_heatmap['Weekday_Name'] = df_heatmap['Date_Only'].dt.day_name().str[:3]
+# 数据聚合与合并逻辑
+df_crime_count = df_crime.groupby('Community Area').size().reset_index(name='crime_count')
+df_crime_count['ca'] = df_crime_count['Community Area'].astype(float).astype(int).astype(str)
 
-heatmap = alt.Chart(df_heatmap).mark_rect().encode(
-    x=alt.X('Weekday_Name:N', sort=weekday_order, title='Day of Week'),
-    y=alt.Y('Hour:O', title='Hour of Day'),
-    color=alt.Color('count():Q', scale=alt.Scale(scheme='reds'), title='Crimes'),
-    tooltip=['Weekday_Name', 'Hour', 'count()']
-).properties(width=600, height=400)
+df_scatter = pd.merge(
+    df_socio[['ca', 'community_area_name', 'poverty_rate']], 
+    df_crime_count, on='ca', how='inner'
+)
+
+scatter = 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='案件总数 (2026)'),
+    color=alt.Color('poverty_rate:Q', scale=alt.Scale(scheme='orangered'), legend=None),
+    tooltip=['community_area_name:N', 'poverty_rate:Q', 'crime_count:Q']
+)
 
-# 🌟 修复 3b：使用 width='stretch' 消除 Streamlit 警告
-st.altair_chart(heatmap, width='stretch')
+regression = scatter.transform_regression(
+    'poverty_rate', 'crime_count'
+).mark_line(color='gray', strokeDash=[4, 4])
 
+st.altair_chart((scatter + regression).properties(width=800, height=400), use_container_width=True)
 
-# ================= 6. 数据来源与引用 =================
+# ================= 6. 数据来源 =================
 st.markdown("---")
-st.markdown("""
-**Data Sources:**
-- Crimes - 2026 (Preliminary): [City of Chicago Data Portal](https://data.cityofchicago.org/)
-- Boundaries - Police Districts: [City of Chicago Data Portal](https://data.cityofchicago.org/resource/24zt-jpfn.geojson)
-""")
+st.markdown("数据来源于 [Chicago Data Portal](https://data.cityofchicago.org/)。")