城市脉动

# 构建“城市脉动”：纽约市出租车活动（2025 年 1 月）交互式 3D 出行图谱 ## 目标 制作一个单页英文网页可视化，展示纽约在一个月中的运行状态： 31 天、24 小时、263 个出租车分区。用户应能够观看城市的日常节奏， 将任意一天与典型工作日或周末进行对比，并详细查看任意分区。 这是一个描述性分析工具，不是实时或 GPS 产品。每个可视元素都必须说明一个标记代表什么。 ## 数据 公开数据源： - NYC TLC 行程记录数据，Yellow Taxi，2025 年 1 月（Parquet） - NYC TLC 出租车分区（263 个分区，包含形状数据和行政区查询表） - NYC Open Data 建筑轮廓（仅限曼哈顿，用作视觉背景） 预处理（Python + DuckDB 或 pandas），输出小型静态 JSON 文件： - 过滤无效行程：上车时间不在 2025 年 1 月内、行程时长不为正或超过 3 小时、未知分区（264/265）。 - 按天、按分区、按小时统计：上车次数、行程时长中位数。 - 按天、按小时统计：起点 → 终点分区对的主要流向（聚合后的流量，每小时取前 N 项）。 - 按分区和小时计算参考平均值：工作日平均值（23 天）和周末平均值（8 天），按天求均值，节假日保留在工作日组中。 - 全月固定比例尺：取分区-小时上车次数的最大值，所有日期都使用该比例尺，以便比较柱体高度。 - 分区元数据：id、名称、行政区、质心、标签锚点。简化分区几何形状。 文件：month.json（每日总量、比例尺、主要分区）、weekday.json、weekend.json、days/2025-01-DD.json、分区 GeoJSON。 延迟加载当天数据；确保首次渲染保持快速。 ## 技术栈 - 使用一个自包含 HTML 文件（或小型 Vite 应用），搭配 Three.js 0.160（通过 importmap 使用 ES 模块）、OrbitControls、EffectComposer + bloom。 - D3 仅用于比例尺、格式化和小型 SVG 图表。 - 不要求使用框架。运行时不调用外部 API；所有内容均读取静态 JSON。 ## 布局（桌面端 1920×1080 必须在一屏内完整显示，无需滚动） 1. 页头：“CITY PULSE / MOBILITY ATLAS”、“Recorded replay”状态、“Data & methods”链接。 2. 状态栏：“一座正在流动的城市。” + 三项 KPI：全市上车次数（所选小时）、相对比较平均值、行程时长中位数。 3. 月度条：31 个日期按钮，以迷你柱形显示（柱高 = 每日上车次数，并标记周末）、前一天/后一天、日期选择器、“Compare with”选择器（工作日平均值 · 23 天 / 周末平均值 · 8 天）。 4. 故事栏：“每一次移动都会留下规律。”包含 4 个章节（01 观看、02 展开、03 对比、04 分享）和“开始探索”。 5. 视图标签：01 连接、02 城市流量、03 展开 24 小时、04 幽灵城市，以及“分享发现”和“创建简报”。 6. 工作区：3D 地图舞台（左侧）+ 位置洞察检查器（右侧，约 330px，内部滚动）。 7. 时间轴：播放当天、速度（0.25×–4×）、小时拖动条，叠加在所选日期与平均值的 24 小时柱状图上。 地图舞台高度必须根据视口自适应（约在 470px 至 780px 之间限制），确保在 100% 缩放下包括时间轴在内的整个控制台都能显示。 ## 3D 场景 - 深色地面，使用细线绘制分区轮廓，叠加淡化的曼哈顿建筑轮廓作为真实世界背景。 - 摄像机：透视视角，支持环绕和缩放，并提供重新居中按钮。切换视图时保留用户的摄像机状态，但“展开 24 小时”除外，该视图始终重新调整取景以展示完整矩阵。 - 悬停在分区上：显示包含名称和上车次数的工具提示。点击分区：选中该分区（更新检查器和流向）。 视图（每次切换都要有动画，避免突然跳变）： - 01 连接：使用带发光弧线和移动光粒子显示聚合后的分区间行程；粒子密度 ∝ 行程数；为重点流向添加标签（“起点 / Midtown Center → 终点 / Upper East Side North，71 次行程 / 18:00”）。说明文字：“已记录的分区间行程 · 示意性运动。并非 GPS。” - 02 城市流量：将每个分区挤出为立体柱；高度 = 按全月固定比例尺计算的上车次数；高亮所选分区。