折線競速圖

概述

「Line race」 圖會在時間軸上為多條序列做動畫，凸顯其相對位置與數值如何變化。隨著年份推進，折線會隨收入上升或下降，呈現經濟競爭與成長模式的動態畫面。這種手法讓歷史資料更生動，便於發現領跑者、後起之秀與排名的劇烈轉折。

何時使用

• 展示國家或地區經濟指標的競爭演變
• 揭示長期內相對表現的劇烈變化
• 用歷史趨勢講述引人入勝的故事
• 突出數十年間的領先者與落後者
• 呈現收入不平等或收斂
• 讓長週期資料更易被記住

不適用

• 只需靜態比較的情境
• 觀眾希望自行控制節奏的場合
• 精確數值比相對位置更重要時
• 無法播放動畫的印刷或靜態媒介
• 同時超過 10 條序列（會變得混亂）

關鍵變體

• 動畫速度（每十年 2–10 秒）
• 末端標籤顯示各系列的值
• 平滑曲線 vs 直線段
• 突出當前領跑者
• 互動控制用於播放或探索

使用場景

• 自 1950 年起的歐洲各國收入演變
• 不同年代的人均 GDP 排名
• 區域經濟收斂/發散的比較
• 依產業比較收入成長
• 各國科技採用率
• 各國壽命提升

資料 (CSV)

Year,Finland,France,Germany,Iceland,Norway,Poland,Russia,United Kingdom
1950,8200,9500,7100,10500,11200,5400,6100,9800
...
2020,36900,40200,42100,44800,49800,30100,28300,38100

圖表配置 (JSON)

設計提示

• 為每個國家使用獨特顏色，並在動畫全程保持一致
• 開啟末端標籤以顯示排名與最終數值
• 70 年跨度建議設為 8–12 秒
• 保持 smooth: false 以尊重歷史量測
• 在右側預留 120–150 px 放置末端標籤
• 可啟用滑鼠懸停的強調以便逐條查看

效能提示

• 控制在 5–8 條序列內以保持清晰
• 若時間點超過 50 個，可每 5 年取樣一次
• 使用 showPoints: false 以改善繪製效能
• 根據受眾調整動畫速度；太快會讓人困惑

常見問題

動畫節奏多少合適？ 對數十年資料，8–12 秒總長較合適（約 0.15–0.2 秒/年）；週期短時 3–5 秒即可。

末端標籤如何運作？ 它們出現在右側，包含名稱與最終值，無需依賴圖例即可看到最終排名。

需要一次顯示所有線嗎？ 需要，競速效果仰賴同時呈現。若超過 8 條，考慮只顯示前 5 名並加一條比較線。

線條交叉很多怎麼辦？ 這會增加視覺趣味。使用高區分度的顏色，並啟用懸停強調方便追蹤特定系列。

可以暫停或重播嗎？ 雖然設定寫在 Markdown 中，多數圖表庫可透過事件加入播放/暫停或重置按鈕。

數值差距過大怎麼處理？ 若某條線是另一條的 10 倍，可改用對數軸或展示成長率 (%)；也可把故事拆成多個階段或刻度。