以高雄市民政局開放資料源, 使用 c3.js 呈現資料視覺化、網站化實作, 專案網址: http://ksdg.me/CabuKcgVisualization Code For Kaohsiung 相關開源專案: https://github.com/CodeForKaohsiung

1. 高雄市人口資料視覺化
利用Web Front-end 技術

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

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

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

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

6. 所以來提一下用Javascript
chart/visualization/graphic library 來幫助資料
視覺化

7. 這類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

8. 既然是來複習這個

9. 就從資料來源開始
• http://cabu.kcg.gov.tw/
– 更多人口統計=> 高雄市戶籍人口統計查詢
=> 出生與死亡統計
– http://cabu.kcg.gov.tw/cabu2/statis61D2.aspx

10. 大概長這樣

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

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

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

14. 把資料來源抽出來

15. 在Open Office 中貼上

16. • [OpenOffice] 另存成CSV
• 下載& 設定c3.js
http://c3js.org/gettingstarted.html
• 直接來看code 吧!
https://github.com/KSDG/CabuKcgVisualization

17. THANKS
官方網站
http://mopcon.org/
粉絲群
http://fb.me/mopcon