reminder

做對每一件小事,做對每一個細節,能夠做到一百分的事,就不要只做六十分敷衍過去。

即將消失的自助新村.眷村裡迷路舊草嶺環狀自行車道 20 公里行.西部小旅行:阿里山森林鐵路車庫園區&北門車站台糖烏樹林休閒園區永保安康&橋頭糖廠打狗鐵道故事館&駁二旗山里港&屏東彰化扇形車庫大肚成功.出島計畫:馬公北環湖西+南環馬公.支線之旅:平溪舊山線林口線鼻頭角步道野柳地質公園猴硐.七堵鐵道公園一滴水紀念館.淡水淡水天元宮賞櫻烏來土城桐花祭三芝天使光桃園忠烈祠.南部旅行:板橋→台南台南→永康→保安→橋頭→左營→鼓山→旗津→鳳山鳳山→竹田→枋寮→加祿→古莊→鳳山鳳山→台南→台中→新竹→板橋.一個人環島:楔子台北→花蓮花蓮→台東台東→枋寮→南州→鳳山→高雄→鳳山鳳山→高雄→二水→集集→車埕→台中台中→新竹→竹東→內灣→竹東→新竹→板橋

未完待續…

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


文章標籤
創作者介紹

旅行的記憶

repeat<')">< 發表在 痞客邦 PIXNET 留言(1) 人氣()

留言列表 (1)

發表留言
  • David Lin
  • 不好意思,請問可否變更顏色組合?
    1xx用銀座線橘色,2xx用有樂町線金色/黃色,3xx用淺草線朱色,5xx用南北線藍綠色,6xx用半藏門線紫色,8xx用東西線藍色

    小弟看了眼有點花,深淺不一造成視覺焦點被轉移,尤其最鮮豔的紅色放在2xx感覺怪怪的,3xx日比谷線銀色又看不清楚...

    但是大大的作品還是要給個讚!!
  • 我也很納悶,明明在路線圖上看起來好好的顏色組合到了鐵路運行圖就有說不出來的怪…
    可能是因為 SVG 的「金色」和路線圖的「金色」有明顯的落差導致 https://codepen.io/anon/pen/RZZKXq
    總之先用滴管吸取 PDF 的方式校正使用到的顏色,其他的顏色也稍微調整過,然後照你的建議換了一下順序,一樣放 github。

    repeat<')">< 於 2017/08/12 11:08 回覆

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼