忘記什麼時候開始聽過 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 上。


arrow
arrow
    創作者介紹
    創作者 repeat ❤️ 的頭像
    repeat ❤️

    旅行的記憶

    repeat ❤️ 發表在 痞客邦 留言(2) 人氣()