IDCC Final Project - Metro Visualization

R05921035 陳奕安
R05921043 林哲賢

Introduction

我們的系統發想於平常在搭捷運的時候，常常希望能夠不浪費每分每秒，能把等待捷運的時間縮到最短，而目前現有的系統似乎都比較像是表格是呈現捷運進站時間，就覺得這樣的介面對我們來說非常不吸引人因此我們就想要完成一個將捷運目前位置畫在地圖上的系統。

Implementation

Data Preprocessing

由於我們要能讓捷運沿著軌道移動，我們必須先有軌道的資訊。我們使用OpenStreetMap的open source資料，得到散亂的捷運軌道片段，再寫一個簡單的演算法將同一條路線的片段連接起來，變成網頁裡繪圖的根據。

Cloud Streaming

我們的資料來源為data.Taiei上捷運到站即時資訊的API。我們在Google Dataproc上跑Spark的程式，每隔一固定時間就連接data.Taipei的API取得最新的捷運位置資訊，將結果更新到Firebase上。由於Firebase能夠有notification callback的功能，因此透過更新Firebase的資料，我們的前端網頁可以自動透過callback重繪我們的畫面。這樣的流程免去我們的前端網站必須主動連接資料庫檢查是否資料更新的不便。

Location Prediction

受限於資料的即時性，我們使用的API每5分鐘才更新一次，不符合我們的需要。因此，為了能在這五分鐘內能讓捷運位置能改變，我們利用捷運車站的估計到達時間來預測捷運當前的位置。預測方法為簡單的內差法。其公式為

r=TC−TN−tatm

其中TC為目前時間，TN為上次到達車站時間，ta為停留車站時間，tm為路線行走時間。所得的ratio r就是我們要在軌道上內差捷運目前位置的比例。

Front-End

我們採用react-redux、react-googlemap、boostrap作為前端主要的工具。

react-redux

由於react的特性，是利用dom的diff去render畫面，因此採用react對我們的work來說在瀏覽器端效率可以最大化，redux則是負責處理我們所有與firebase sync的interface，讓我們的資料流非常簡單明瞭，並也可以在redux devtool觀察到firebase觸發的event。

react-googlemap

react將googlemap做整合成一個component的套件，讓我們能夠render一個marker在地圖正確的位置上，並可以客制marker的style，讓我們能夠很輕鬆的完成geo-info的visualization。

Result

Discussion

經過測試後，我們的系統會有一些在使用者體驗上的瑕疵：

  1. 由於前端畫面每一秒重繪一次，因此捷運的marker無法平滑的在地圖上移動。另外，在後端Firebase資料庫更新的時候，捷運的位置從我們預測的位置變成真實的位置，造成這樣的glitch會更嚴重。
  2. 由於我們使用OpenStreetMap的資料，但是畫在GoogleMap上，因而造成路線的誤差。改進的方法為手動利用工具改進路線。

Appendix