feat: 第二题基本完成

app.py

@@ -8,7 +8,7 @@ this_directory = this_file.parent
 data_cangzhou_folder = this_directory / "data/Cangzhou"
 data_static_folder = data_cangzhou_folder / "static"
 
-# 数据文件夹路径
+# 数据文件夹路径（静态数据）
 data_folder = data_static_folder
 
 # 然后
@@ -17,72 +17,133 @@ import pandas as pd
 import os
 from datetime import datetime
 
-# 设置页面配置为宽屏模式，以便更好地显示三个图表
+import plotly.graph_objects as go
+import plotly.express as px
+
+# 设置页面配置为宽屏模式，以便能同时显示三个图表
 st.set_page_config(layout="wide")
 
-# 设置应用标题
-st.title("多图表可视化展示")
+# 设置应用标题，参考数据集介绍，反映作业要求
+st.title("S&M-HSTPM2d5数据集可视化——清华大学数据可视化课程作业1")
 
-# 创建三个等宽的列
+# 创建三个等宽的列，分别展示图(a)、图(b)和图(c)
 col1, col2, col3 = st.columns(3)
 
-
-# 加载和过滤数据的函数
-def load_and_filter_data(file_path):
-    # 根据提供的CSV格式，第一列是时间戳但没有列名
+@st.cache_data
+def load_and_filter_data(file_path, start_time, end_time):
+    # 根据CSV格式，第一列作为时间戳（无列名），后续列依次为pm2d5、lat、lon
     df = pd.read_csv(file_path, header=0, names=['timestamp', 'pm2d5', 'lat', 'lon'])
-    
-    # 确保时间戳列是datetime格式
+    # 转换为datetime格式
     df['timestamp'] = pd.to_datetime(df['timestamp'])
-    
-    # 过滤2019-01-01 00:00:00到2019-01-01 12:00:00之间的数据
-    start_time = datetime(2019, 1, 1, 0, 0, 0)
-    end_time = datetime(2019, 1, 1, 12, 0, 0)
+    # 过滤指定区间数据
     filtered_df = df[(df['timestamp'] >= start_time) & (df['timestamp'] <= end_time)]
-    
     return filtered_df
 
-# 第一列：PM2.5随时间变化的折线图
+# 图(a): PM2.5随时间变化折线图（静态传感器数据）
 with col1:
-    st.header("PM2.5随时间变化")
+    st.header("（a）折线图：展示 PM2.5 浓度水平随时间的变化")
+    with st.expander("绘制要求"):
+        st.markdown("1. 使用 static 文件夹中的 .csv 文件，并筛选出时间戳在 2019-01-01 00:00:00 到 2019-01-01 12:00:00 之间的数据。")
+        st.markdown("2. X 轴和 Y 轴分别表示时间和 PM2.5 浓度水平。")
+        st.markdown("3. 为每个静态传感器绘制一条折线，并用不同颜色进行区分。")
+
+    # 定义过滤时间段
+    start_dt = datetime(2019, 1, 1, 0, 0, 0)
+    end_dt = datetime(2019, 1, 1, 12, 0, 0)
     
-    # 获取数据文件夹中的所有CSV文件
+    # 获取静态数据文件夹中CSV文件
     csv_files = [f for f in os.listdir(data_folder) if f.endswith('.csv')]
-    
-    # 创建字典存储每个传感器的数据
     sensor_data = {}
-    
-    # 加载并过滤每个传感器的数据
     for file in csv_files:
         file_path = os.path.join(data_folder, file)
-        sensor_name = file.split('.')[0]  # 从文件名提取传感器名称
-        sensor_data[sensor_name] = load_and_filter_data(file_path)
+        sensor_name = file.split('.')[0]
+        sensor_data[sensor_name] = load_and_filter_data(file_path, start_dt, end_dt)
     
-    # 准备可视化数据
-    # 创建一个以时间戳为索引，每个传感器的PM2.5值为列的数据框
+    # 整理数据：以时间戳为索引，每个传感器的PM2.5为一列
     chart_data = pd.DataFrame()
-    
     for sensor, data in sensor_data.items():
-        # 使用pm2d5列作为PM2.5数据
         chart_data[sensor] = data.set_index('timestamp')['pm2d5']
     
-    # 绘制折线图
-    st.line_chart(
-        chart_data,
-        x=None,  # 使用索引(timestamp)作为x轴
-        y=list(sensor_data.keys()),  # 使用所有传感器名称作为y列
-        x_label="时间",
-        y_label="PM2.5水平"
-    )
+    # 绘制折线图（添加图表标题及图例标签）
+    fig_line = px.line(chart_data, 
+                       title="PM2.5随时间变化折线图",
+                       labels={"variable": "传感器", "value": "PM2.5", "index": "时间"})
+    fig_line.update_layout(xaxis_title="时间", yaxis_title="PM2.5水平")
+    st.plotly_chart(fig_line, use_container_width=True)
 
-# 第二列：第二个图表（您可以根据需要自定义）
+    with st.expander("详细说明"):
+        st.markdown("**描述：** 本图展示了各静态传感器在2019年1月1日0:00至12:00期间的PM2.5浓度随时间变化的趋势。横轴表示时间，纵轴表示PM2.5数值，不同折线代表不同传感器的数据。")
+        st.markdown("**解读：** 曲线波动反映了空气质量的时段变化，峰值可能预示短期污染事件，而持续低值表明空气较为清洁。传感器数据对比有助于区域污染差异的分析。")
+    
+# 图(b): 车辆移动散点图（移动传感器数据）
 with col2:
-    st.header("第二个图表")
-    # 这里添加第二个图表的代码
-    st.write("在这里添加您的第二个图表")
+    st.header("(b) A Scatter Plot that shows how vehicles carrying mobile sensors move in the city.")
+    with st.expander("绘制要求"):
+        st.markdown("1. 使用 mobile 文件夹中的 .csv 文件，并筛选出时间戳在 2019-01-02 10:00:00 到 2019-01-02 10:20:00 之间的数据。")
+        st.markdown("2. X 轴和 Y 轴分别表示经度和纬度。")
+        st.markdown("3. 使用散点图展示车辆传感器的位置，用不同颜色区分各传感器，并通过调整透明度（早期数据更透明）表达时间演变。")
+        
+    # 定义mobile数据文件夹路径
+    mobile_folder = str(this_directory / "data/Cangzhou/Mobile")
+    csv_files_mobile = [f for f in os.listdir(mobile_folder) if f.endswith('.csv')]
+    mobile_sensor_data = {}
+    start_mobile = datetime(2019, 1, 2, 10, 0, 0)
+    end_mobile = datetime(2019, 1, 2, 10, 20, 0)
+    
+    for file in csv_files_mobile:
+        sensor_name = file.split('.')[0]
+        file_path = os.path.join(mobile_folder, file)
+        df = load_and_filter_data(file_path, start_mobile, end_mobile)
+        if not df.empty:
+            mobile_sensor_data[sensor_name] = df
+            
+    # 使用Plotly绘制散点图并根据时间调整透明度
+    fig2 = go.Figure()
+    colors = px.colors.qualitative.Plotly
+    def hex_to_rgba(hex_color, alpha):
+        hex_color = hex_color.lstrip('#')
+        r = int(hex_color[0:2], 16)
+        g = int(hex_color[2:4], 16)
+        b = int(hex_color[4:6], 16)
+        return f"rgba({r}, {g}, {b}, {alpha})"
+    
+    total_time = (end_mobile - start_mobile).total_seconds()
+    sensor_index = 0
+    for sensor, data in mobile_sensor_data.items():
+        base_color = colors[sensor_index % len(colors)]
+        sensor_index += 1
+        custom_colors = []
+        for ts in data['timestamp']:
+            dt_seconds = (ts - start_mobile).total_seconds()
+            normalized = dt_seconds / total_time if total_time > 0 else 0
+            # 透明度：早期数据较透明（alpha值较低），后期较不透明
+            alpha = 0.3 + 0.7 * normalized
+            custom_colors.append(hex_to_rgba(base_color, alpha))
+        fig2.add_trace(go.Scatter(
+            x = data['lon'],
+            y = data['lat'],
+            mode = 'markers',
+            marker = dict(color = custom_colors, size = 10),
+            name = sensor
+        ))
+    
+    fig2.update_layout(
+        xaxis_title="经度",
+        yaxis_title="纬度",
+        title="车辆移动散点图"
+    )
+    
+    st.plotly_chart(fig2, use_container_width=True)
+
+    with st.expander("详细说明"):
+        st.markdown("**描述：** 本图利用Mobile文件夹中的CSV数据，在2019年1月2日10:00至10:20期间展示车辆传感器的位置分布。横轴表示经度，纵轴表示纬度，不同颜色代表不同传感器。")
+        st.markdown("**解读：** 通过调整散点透明度（早期数据较透明），图中显示了车辆移动的时间演变趋势，为探索城市中车辆行驶路径提供依据。")
+
 
-# 第三列：第三个图表（您可以根据需要自定义）
+# 图(c): 第三个图表（预留，用于展示其他分析）
 with col3:
-    st.header("第三个图表")
-    # 这里添加第三个图表的代码
-    st.write("在这里添加您的第三个图表")
+    st.header("(c) [预留] 第三个图表")
+    with st.expander("详细说明"):
+        st.markdown("**描述：** 此图为预留图表，可用于展示PM2.5分布或其他数据分析结果。")
+        st.markdown("**解读：** 后续将根据数据分析补充图表内容及详细解释。")
+    st.write("在这里添加您的第三个图表")