MRT Liveboard

MRT Liveboard

受到日本尖峰時段的電車班距及壅擠程度可視化影片啟發,就決定來做一個台北捷運的版本,雖然班次密集程度不算高,但看著路線圖上一個個代表車輛的圓點隨著時間移動著,也是滿療癒的。大概沒什麼實用度,而且文湖線、跟環狀線還不提供時刻表,反正一開始就只是做好玩的。

 

Data Preparation

為了顯示實時的車輛位置,必須要準備以下資料。

  • 各站時刻表
  • 路線資料(線路分佈圖、過站順序、走向ID、及終點站ID等)
  • 站點資訊(站點座標、名稱等)

原始資料都可以從開放資料中取得,為方便網站程式使用,有另外寫Python做Parsing。需要注意的是各路線的走向ID只有在時刻表裡有紀錄,所以路線別的資料需要特別多後處理。

 

SVG Implementation

因為地圖是用Illustrator畫的,所以直接用現成的SVG實作最簡單了。一列車輛就用一個圓圈,某時間點下的位置就用站於站之間的內插值來算即可,主要也就為了算這個內插值引用了D3.js。

雖然不難,算了一下同時出現在路線圖上的點數最多大約200多點(欸原來捷運有這麼多班次!),卻開始可以在滾動頁面時看出些微的卡頓,可以前往D3效能演示這個網站看看那個感覺。

 

Optimization with Canvas

於是乎來個優化,最簡單的做法就是引入Canvas,讓所有繪圖直接上畫布。Boom,讓我們錄一下時間軸就可以發現這效能差異有多大。

Performance comparison: SVG and Canvas

其他次要的優化包括減少畫面更新頻率、減少JS中多餘的垃圾回收等等,這部分可以參考Google的文章[^1]。

 

Epilogue

至於為何改用Canvas的效能會暴增,以後有空再寫文章解釋吧~

 

Go to page

 

References

  1. 解決內存問題 | Tools for Web Developers