高雄市戶政資料視覺化 - 使用 c3.js
DESCRIPTION
以高雄市民政局開放資料源, 使用 c3.js 呈現資料視覺化、網站化實作, 專案網址: http://ksdg.me/CabuKcgVisualization Code For Kaohsiung 相關開源專案: https://github.com/CodeForKaohsiungTRANSCRIPT
![Page 1: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/1.jpg)
高雄市人口資料視覺化
利用 Web Front-end 技術
![Page 2: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/2.jpg)
上次聚會出生與死亡率的故事大家還記得嗎 ?
![Page 3: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/3.jpg)
就是那個聽說某中央會議亂婊的
![Page 4: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/4.jpg)
關於數字的迷思 , 最近也有個小插圖 ..
![Page 5: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/5.jpg)
https://www.facebook.com/nagee.tw/photos/a.10151409298917312.1073741829.353390642311/10152262445242312/
![Page 6: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/6.jpg)
所以來提一下 用 Javascript chart/visualization/graphic library 來幫
助資料視覺化
![Page 7: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/7.jpg)
這類 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
![Page 8: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/8.jpg)
既然是來複習這個
![Page 9: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/9.jpg)
就從資料來源開始• http://cabu.kcg.gov.tw/– 更多人口統計 => 高雄市戶籍人口統計查詢
=> 出生與死亡統計– http://cabu.kcg.gov.tw/cabu2/
statis61D2.aspx
![Page 10: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/10.jpg)
大概長這樣
![Page 11: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/11.jpg)
這邊要推薦一個好棒的資料工具 !Open Office!!!
![Page 12: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/12.jpg)
我不知道它為什麼處理資料格式轉換容錯度比 MS Office 好很多
![Page 13: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/13.jpg)
也不知道它為什麼比姊妹專案 LibreOffice 轉檔跟編碼處理問題少
一些
![Page 14: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/14.jpg)
把資料來源抽出來
![Page 15: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/15.jpg)
在 Open Office 中貼上
![Page 16: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/16.jpg)
• [OpenOffice] 另存成 CSV• 下載 & 設定 c3.js
http://c3js.org/gettingstarted.html• 直接來看 code 吧 !
https://github.com/KSDG/CabuKcgVisualization
![Page 17: 高雄市戶政資料視覺化 - 使用 C3.js](https://reader036.vdocuments.site/reader036/viewer/2022081716/547e43edb4af9fa0158b55f8/html5/thumbnails/17.jpg)
THANKS官方網站http://mopcon.org/
粉絲群http://fb.me/mopcon