專題1:Clear Presentation
專題說明
專題一的內容為將衛生福利部中央健康保險署的健保醫療資料包含 95 - 98 各年度
不同年齡階層的死亡人數透過 d3.js 作清楚的展示,讓使用者可以了解不同性別 不同年齡層與不同年度的比例與變化。
按照著課堂上的範例,我們組別使用類似人口金字塔的圖表來進行呈現,
以此來觀察針對某一性別根據不同年齡區間而在年度死亡人數上的差異與變化。
圖表說明
最上方有一選擇器可選擇檢視不同年度的資料。
x 軸方向為年度死亡人數,y 軸方向為年齡區間;
水平方向分左右兩欄左側女性右側男性,並使用不同的顏色來作區別。
顏色的選用使用 flatuicolors.com 提供的 Flat UI color,是扁平化設計目前最常使用的一組色票。
背景使用淡色格線輔助,方便視覺上能迅速判斷左右欄數字大小差異。
使用技術
css 部分引入 bootstrap 來做欄位架構;
javascript 部分除主要的 d3.js 來處理資料之外,也引入 jQuery 來綁定年度的選擇器。
資料判讀
- 女性普遍較男性長壽。
- 男性死亡人數總是比女性多。(看起來圖總是歪一邊!)
- 無論男女,壽命皆有逐年增加的趨勢。
學習成果
- 整理與呈現資料的方法
搭配課堂所教之資料呈現要點,來回檢核是否符合「深度、極簡、好用、忠實」。
- html/css 輔助資料呈現排版的方式
- d3.js 基礎使用(引入並渲染資料等等)
其他的小特點(嗎)
- 切換年度時的圖表動態變化很任性。
- 區塊太窄而文字太寬的時候,會調整出現位置。
- 我們在程式碼註解裡藏了一根香蕉,紀念 323 事件一週年。