/ 程式JavaScript視覺化Hackathon開放資料

高雄市 1999 市政儀表板:用 Open1999 開放資料做視覺化

高雄市的 Open1999 開放資料算是很友善的了,不僅有 API 可以拿 JSON 欄位,也支援 https 請求。最近參加了高市府(2018)的比賽,把 1999 的派工資料做了一些整理:先是透過分析歷史資料做文字分析,並預測這件事情的受理單位應該是哪個局處;再把開放資料做了一些視覺化應用,即時呈現這些資料。

這篇先講視覺化怎麼做好了,過幾天再補派工資料分析的作法。

首先透過 Open1999派工受理案件歷史(history)資料 這個資料集提供的 API 去取得資料(每 30 秒取得一次最新資料),接著再透過不同套件去處理資料。

市政儀表板

這個部分是先把資料透過 informDesc 欄位分成十二個分類(分類依據是用 高雄一指通 App 內的分類)、以及 24 個小時,接著再用 Chart.js 的 Line Chart 畫出來。

line_chart

而下方的則是先整理出各個行政區的案件數(資料及內的 zipName),並透過 Google Maps 和開放資料集的行政區圖畫出高雄市的各行政區,把案件數量做成熱區圖。

maps

再來就是分時、分區處理畫折線圖和圓餅圖,並透過資料集內的 status 算出案件的處理完成率、解除管制率和平均處理時間。

cards

這一頁做得像好幾張卡片,其實是透過 CSS 的 grid 做到的。

all

報案總覽

報案總覽其實就是表格,從資料集中挑出一些比較重要的欄位把它列出來而已。每個 <tr> 最左邊的顏色,則是透過不同顏色呈現不同階段的 status,其中紅色是尚未處理、綠色是解除管制。

list

上方做了一條十二個分類的按鈕,透過 filter 功能篩選出屬於某個類別的事件。

list

報案時空分佈圖

這頁是滿版的 Google Maps,畢竟資料及內有提供經緯度,我們將 FontAwesome 的圖示(加過顏色)透過 Google Maps 中的 MarkerImage 做出的地標放在地圖上。

後來又透過時間資料,做出了一個時間軸和播放功能,可以看出事件是以什麼順序出現在地圖上的哪個地方。

maps

不過這邊做的比較趕,時間軸和類別篩選是會衝突的。目前沒辦法選一個類別播放時間軸。

報案類型量化波形圖

這裡則是模仿紐約 311 的圖,我們整理近四個月的歷史資料,算出各個時間、各種案件出現的數量,並畫出量化波形圖(Streamgraph)。

原本紐約 311 的圖:

ff_311_newyork1b_f

我們做出來的 Streamgraph:

stramgraph

畫這個圖也是一波三折,嘗試過 Streamgraph.js 和 Chart.Streamgraph 等等,都沒辦法畫出很理想的圖(技術問題);後來是找 人家寫好的 d3.js 下去改,所以原本要整理當日波形圖的後來也沒做完 XD

結語

這次拿 1999 即時資料來做視覺化,剛好也把之前的視覺化教學都用上;這資料還算欄位挺多的,該有的資料都有,可惜不提供 CORS 請求,還另外用 proxy 去處理資料。

然後這次的成品在這裡:https://1999.noob.tw,原始碼則附在下面的連結。雖然比賽結束了,但你有什麼建議還是歡迎發 PR(但不要鞭我的 code,或鞭小力一點),一起加入開放資料、開放原始碼的世界 XD

下一篇文章再來講我們如何處理 Open1999 的歷史資料,並做成分案系統的模組。

相關連結