高雄市人口資料視覺化

利用 Web Front-end 技術

上次聚會出生與死亡率的故事大家還記得嗎 ?

就是那個聽說某中央會議亂婊的

關於數字的迷思 , 最近也有個小插圖 ..

https://www.facebook.com/nagee.tw/photos/a.10151409298917312.1073741829.353390642311/10152262445242312/

所以來提一下 用 Javascript chart/visualization/graphic library 來幫

助資料視覺化

這類 library 歷史悠久 , 種類繁多

• C3.js (http://c3js.org/)• D3.js (http://d3js.org/)• Snap.svg (http://snapsvg.io/)• Raphaël (http://raphaeljs.com/)• Sencha Touch Charts, YUI Charts,

Dojo Charting, jQuery-Visualize, jQuery Sparklines, BonsaiJS, XKCD, JSGL… blah

既然是來複習這個

就從資料來源開始• http://cabu.kcg.gov.tw/– 更多人口統計 => 高雄市戶籍人口統計查詢

=> 出生與死亡統計– http://cabu.kcg.gov.tw/cabu2/

statis61D2.aspx

大概長這樣

這邊要推薦一個好棒的資料工具 !Open Office!!!

我不知道它為什麼處理資料格式轉換容錯度比 MS Office 好很多

也不知道它為什麼比姊妹專案 LibreOffice 轉檔跟編碼處理問題少

一些

把資料來源抽出來

在 Open Office 中貼上

• [OpenOffice] 另存成 CSV• 下載 & 設定 c3.js

http://c3js.org/gettingstarted.html• 直接來看 code 吧 !

https://github.com/KSDG/CabuKcgVisualization

THANKS官方網站http://mopcon.org/

粉絲群http://fb.me/mopcon