受到日本尖峰時段的電車班距及壅擠程度可視化影片啟發，就決定來做一個台北捷運的版本，雖然班次密集程度不算高，但看著路線圖上一個個代表車輛的圓點隨著時間移動著，也是滿療癒的。大概沒什麼實用度，而且文湖線、跟環狀線還不提供時刻表，反正一開始就只是做好玩的。
Data Preparation
為了顯示實時的車輛位置，必須要準備以下資料。
- 各站時刻表
- 路線資料（線路分佈圖、過站順序、走向ID、及終點站ID等）
- 站點資訊（站點座標、名稱等）
原始資料都可以從開放資料中取得，為方便網站程式使用，有另外寫Python做Parsing。需要注意的是各路線的走向ID只有在時刻表裡有紀錄，所以路線別的資料需要特別多後處理。
SVG Implementation
因為地圖是用Illustrator畫的，所以直接用現成的SVG實作最簡單了。一列車輛就用一個圓圈，某時間點下的位置就用站於站之間的內插值來算即可，主要也就為了算這個內插值引用了D3.js。
雖然不難，算了一下同時出現在路線圖上的點數最多大約200多點（欸原來捷運有這麼多班次！），卻開始可以在滾動頁面時看出些微的卡頓，可以前往D3效能演示這個網站看看那個感覺。
Optimization with Canvas
於是乎來個優化，最簡單的做法就是引入Canvas，讓所有繪圖直接上畫布。Boom，讓我們錄一下時間軸就可以發現這效能差異有多大。
其他次要的優化包括減少畫面更新頻率、減少JS中多餘的垃圾回收等等，這部分可以參考Google的文章[^1]。
Epilogue
至於為何改用Canvas的效能會暴增，以後有空再寫文章解釋吧～
Go to page