旅行的記憶

忘記什麼時候開始聽過 d3.js 的名號了，推測應該是某個專案裡用到一堆圖表時聽到的。

某天突然有個想法是不曉得能不能拿 d3.js 來畫鐵路運行圖，於是就把這個想法先放在心裡了。

直到今年年初在寫今年年度目標時，就把這個想法當做目標之一來完成。

1. 找鐵路運行圖需要的資料。因為台灣高鐵停站少，車次規則也比較有規則，就拿它來練習。

2. 整理時刻表。由於找不到合適的檔案來源，於是用工人智慧一行一行輸入成 CSV 檔，結果就是在畫資料時抓出幾個不合理的停站時刻，再回頭去校對時刻表。

3. 找 d3.js 的折線圖範例。在這邊遇到一些挫折，有些範例是用 v3 畫的，但是最新版已經是 v4 了，一開始沒有注意到這點，所以耗了不少時間在試問題在哪。

4. 花了一些時間研究 d3.csv 取得的檔案資料和畫折線的格式，才發現原來 javascript 的 array 中看起來 key 像字串的資料其實是指定 property ，怪不得以前怎麼試都試不出來正確的結果。知道畫折線的格式以後，就手動仿造一個看起來和 d3.csv 會回傳的格式相同的 array 做各種實驗。（竟然在這邊用到 mock …）

5. 畫出前幾條線後發現和印象中的鐵路運行圖不大一樣，再手動減去各站的停站時間。

6. 由於官方並沒有對不同停車模式的列車標記顏色，於是借用日本東京 Metro 地鐵的 9 種顏色，替鐵路運行圖上色。

7. 調整 X 軸座標成固定每 10 分鐘一格，調整 Y 軸座標成非固定間距，對應出各車站的相對位置。

到這裡就已經完成一半以上了，剩下的就是微調座標系統讓它更像鐵路運行圖了。

擷個目前為止的半成品運行圖，之後如果有時間應該會繼續微調，沒有時間應該就這樣子了。XD

整個專案和中間的過程想法都放在 github 上。