城市脈動

# 建立「城市脈動」：紐約市計程車活動的互動式 3D 移動圖譜（2025 年 1 月）

## 目標
製作單頁、英文介面的網頁視覺化，呈現紐約在一個月內如何運轉：
31 天、24 小時、263 個計程車分區。讀者應能觀看城市每日的節奏，
將任一天與典型平日或週末相比較，並詳細檢視任一分區。
這是描述性分析工具，不是即時或 GPS 產品。每個視覺元素都必須說明一個標記代表什麼。

## 資料
來源（公開）：
- NYC TLC Trip Record Data，黃色計程車，2025 年 1 月（Parquet）
- NYC TLC Taxi Zones（263 個分區、形狀與行政區對照表）
- NYC Open Data 建築物輪廓（僅限曼哈頓，作為視覺脈絡）

前處理（Python + DuckDB 或 pandas），輸出小型靜態 JSON 檔案：
- 篩除無效行程：接送時間不在 2025 年 1 月、行程時間不大於 0 或超過 3 小時、未知分區（264/265）。
- 依日、分區與小時統計：接送次數、行程時間中位數。
- 依日與小時統計：起點 → 終點分區配對排行（彙總流量，每小時取前 N 名）。
- 每個分區與小時的參考平均值：平日平均（23 天）與週末平均（8 天），以每日平均計算，假日保留在平日群組中。
- 月度固定比例尺：分區－小時接送次數的最大值，套用於每一天，確保高度可比較。
- 分區中繼資料：ID、名稱、行政區、質心、標籤錨點。簡化分區幾何。
檔案：month.json（每日總計、比例尺、熱門分區）、weekday.json、weekend.json、days/2025-01-DD.json、zones geojson。
以延遲載入方式載入目前日期；讓首次繪製保持快速。

## 技術堆疊
- 單一自包含 HTML 檔案（或小型 Vite 應用程式），搭配 Three.js 0.160（透過 importmap 使用 ES modules）、OrbitControls、EffectComposer + bloom。
- D3 僅用於比例尺、格式化與小型 SVG 圖表。
- 不要求使用框架。執行期間不得呼叫外部 API；所有內容皆讀取靜態 JSON。

## 版面配置（桌面版 1920×1080 必須在單一畫面內完整顯示，不可捲動）
1. 標頭：「CITY PULSE / MOBILITY ATLAS」、「Recorded replay」狀態，以及「Data & methods」連結。
2. 狀態列：「A city, in motion.」+ 三項 KPI：全市接送次數（選定小時）、相較於比較平均值、行程時間中位數。
3. 月份列：31 個日期按鈕，以迷你長條呈現（長條高度 = 每日接送次數，標示週末）、前一天／下一天、日期選擇，以及「Compare with」選擇器（平日平均 · 23 天／週末平均 · 8 天）。
4. 故事列：「Every movement leaves a pattern.」，包含 4 個章節（01 Watch、02 Unfold、03 Compare、04 Share）與「Start the story」。
5. 檢視分頁：01 Connections、02 Volume city、03 Unfold 24h、04 Ghost city，另有「Share finding」與「Create briefing」。
6. 工作區：3D 地圖舞台（左）+ Location Insight 檢視器（右側約 330px，內部可捲動）。
7. 時間軸：播放日期、速度（0.25×–4×）、小時拖曳條，覆蓋於選定日期與平均值的 24 小時長條圖上。
地圖舞台高度必須配合視窗大小調整（約在 470px 至 780px 之間限制），確保在 100% 縮放時，包含時間軸在內的整個控制台都能顯示。

## 3D 場景
- 深色地面、以細線繪製的分區輪廓，以及作為淡化真實世界脈絡的曼哈頓建築物輪廓。
- 相機：透視投影、旋轉與縮放，以及重新置中的按鈕。切換檢視時保留使用者的相機位置，但「Unfold 24h」除外；此檢視必須重新取景以顯示完整矩陣。
- 將游標移到分區上：顯示包含名稱與接送次數的工具提示。點擊分區：選取該分區（更新檢視器與流量）。

檢視（每次切換都要有動畫，不得硬切）：
- 01 Connections：以帶有移動光粒子的發光弧線呈現彙總的分區對分區行程；粒子密度 ∝ 行程次數；為焦點流量加上標籤（「FROM / Midtown Center → TO / Upper East Side North，71 trips / 18:00」）。說明文字：「Recorded zone-to-zone trips · schematic motion. Not GPS.」
- 02 Volume city：將每個分區擠出成 3D 幾何體；高度 = 採用固定月度比例尺的接送次數；以醒目方式標示選定分區。