Project 1:Clear Presentation
目標:
將資料內容清楚且直覺地表達。請由助教提供之範例檔進行實作。
說明:
衛生福利部中央健康保險署的健保醫療資料包含 95 - 98 各年度不同年齡階層的死亡人數請將資料透過 d3js 作清楚的展示, 讓使用者可以了解不同性別 不同年齡層 與 不同年度的比例與變化。
請使用助教以下所提供資料檔案,網頁可自由發揮創意,並不限定使用助教所提供之技術來源。
繳交:
發表1000字左右的報告並上傳實作成果,並在課堂上做10分鐘的簡報。
專題可達到以下評核點:
1. 呈現男女個別資料
2. 清楚區分各年齡層人數及文字標示
3. 不同年度 (95/96/97/98) 切換
使用資料 : 下載連結
技術參考: (1) http://140.112.12.21/vie2015/mean_daily_plaza_traffic.html
(2) http://thematicmapping.org/playground/d3/d3.slider/ 或是 http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/
結果參考: 畫面
進階參考: 原始資料及R 前處理程式
將資料內容清楚且直覺地表達。請由助教提供之範例檔進行實作。
說明:
衛生福利部中央健康保險署的健保醫療資料包含 95 - 98 各年度不同年齡階層的死亡人數請將資料透過 d3js 作清楚的展示, 讓使用者可以了解不同性別 不同年齡層 與 不同年度的比例與變化。
請使用助教以下所提供資料檔案,網頁可自由發揮創意,並不限定使用助教所提供之技術來源。
繳交:
發表1000字左右的報告並上傳實作成果,並在課堂上做10分鐘的簡報。
專題可達到以下評核點:
1. 呈現男女個別資料
2. 清楚區分各年齡層人數及文字標示
3. 不同年度 (95/96/97/98) 切換
使用資料 : 下載連結
技術參考: (1) http://140.112.12.21/vie2015/mean_daily_plaza_traffic.html
(2) http://thematicmapping.org/playground/d3/d3.slider/ 或是 http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/
結果參考: 畫面
進階參考: 原始資料及R 前處理程式
How to read our data?
1. 標題(上):Taiwan Death Toll of 2006 - 2009
2. 年度(下): 使用時間軸(西元2006 ~ 2009年)拖曳至各年度,查看該年度資料
3. 資料(左):男性資料(藍色)依年齡層由下往上遞增
4. 資料(右):女性資料(紅色)依年齡層由下往上遞增
** 補充說明:
a. 本資料以10年作為年齡層間隔,提供~10歲(0到10歲)到91~歲(91歲以上),共有10個區間之資訊提供。
b. 圖表下方座標軸提供人數比例尺,協助人數計算。
c. 除了顏色,更以通用之男女代表符號作為圖例,避免色盲者誤認資料。
Is our data “Beauty”?
♠ Informative
資訊正確傳遞:
民國95年至98年期間,臺灣之不同年齡層之死亡人數資料,以人口金字塔方式呈現資訊,清楚傳遞男女、歲數及其各年度之資訊。
專題要求:
(1) 呈現男女個別資料:
a. 以顏色為區分;藍色代表男性、紅色代表女性。
b. 以區塊為區分;左區塊呈現男性資料、右區塊呈現女性資料。
(2) 清楚區分各年齡層人數及文字標示:
a. 排列:以長條圖顯示各年齡層之數值資料,由下至上遞增,有次序性的排列更易閱讀。
b. 標示:文字呈現於長條圖後端,加上千分位逗點更易於計算。
(3) 不同年度切換:
a. 時間軸:以下方時間軸拖曳至不同年度作切換。
b. 轉換效果:年度切換依據資料改變,長條圖產生動態變化,可看出死亡人口變化(51歲以上死亡人口隨時間遞增;50歲以下死亡人 口隨時間遞減)。
♦ Efficient
熟悉模式:
本次專題為(死亡)人口資料呈現,故以人口金字塔呈現,提供熟悉的閱讀模式:男左女右、由下至上歲數遞增。使人能一眼即進入年齡與性別的識別主題中,易於分辨年齡與性別的差異。
資訊掌握:
為增加資訊掌握的效率,本組很細心的將資訊加上符號、顏色或座標軸等輔助工具,讓使用者閱讀時更加快速有效瞭解資訊。
例如:
(1) 人數加上千分位逗點,可增加閱讀計算之速度。
(2) 男女各以藍紅與通用圖例代表,讓人一目瞭然。
(3) 動態的條狀圖讓人在切換年份時能清楚感受到各年齡層之死亡人數增長或減少。
(4) 圖表下方座標軸線(人數比例尺)為男女性資料比對之輔助工具,比起閱讀數字或單純比對長條圖,更為有效提昇判斷準確 率。例如民國95年71~80歲之男女數值分別為20,846與12,597,經過換算得男女比約為1.655:1(約需耗費35秒),但透過比 例尺即可得到男女資料約為20k與12k,比例約為1.6:1(僅需5秒)。
♣ Aesthetic
Simple is beauty
在字體、字型、大小與顏色選擇上,讓資訊清楚呈現之餘,更考量畫面整體平衡例如資料主體以藍、紅兩色呈現,成為讀者聚睛焦點;座標軸輔助線以淺色搭配,避免喧賓奪主。僅提供必要資訊,不讓其他冗餘資訊造成雜訊、影響閱讀。
Reference
1. Julie Steele and Noah Iliinsky, Beautiful Visualization, 2010, O'Reilly Media, ISBN: 978-1-449-37987-2, ch.1 - 2.
2. November 23, 2011. A Bar Chart. Available: http://bl.ocks.org/mbostock/1389927
1. 標題(上):Taiwan Death Toll of 2006 - 2009
2. 年度(下): 使用時間軸(西元2006 ~ 2009年)拖曳至各年度,查看該年度資料
3. 資料(左):男性資料(藍色)依年齡層由下往上遞增
4. 資料(右):女性資料(紅色)依年齡層由下往上遞增
** 補充說明:
a. 本資料以10年作為年齡層間隔,提供~10歲(0到10歲)到91~歲(91歲以上),共有10個區間之資訊提供。
b. 圖表下方座標軸提供人數比例尺,協助人數計算。
c. 除了顏色,更以通用之男女代表符號作為圖例,避免色盲者誤認資料。
Is our data “Beauty”?
♠ Informative
資訊正確傳遞:
民國95年至98年期間,臺灣之不同年齡層之死亡人數資料,以人口金字塔方式呈現資訊,清楚傳遞男女、歲數及其各年度之資訊。
專題要求:
(1) 呈現男女個別資料:
a. 以顏色為區分;藍色代表男性、紅色代表女性。
b. 以區塊為區分;左區塊呈現男性資料、右區塊呈現女性資料。
(2) 清楚區分各年齡層人數及文字標示:
a. 排列:以長條圖顯示各年齡層之數值資料,由下至上遞增,有次序性的排列更易閱讀。
b. 標示:文字呈現於長條圖後端,加上千分位逗點更易於計算。
(3) 不同年度切換:
a. 時間軸:以下方時間軸拖曳至不同年度作切換。
b. 轉換效果:年度切換依據資料改變,長條圖產生動態變化,可看出死亡人口變化(51歲以上死亡人口隨時間遞增;50歲以下死亡人 口隨時間遞減)。
♦ Efficient
熟悉模式:
本次專題為(死亡)人口資料呈現,故以人口金字塔呈現,提供熟悉的閱讀模式:男左女右、由下至上歲數遞增。使人能一眼即進入年齡與性別的識別主題中,易於分辨年齡與性別的差異。
資訊掌握:
為增加資訊掌握的效率,本組很細心的將資訊加上符號、顏色或座標軸等輔助工具,讓使用者閱讀時更加快速有效瞭解資訊。
例如:
(1) 人數加上千分位逗點,可增加閱讀計算之速度。
(2) 男女各以藍紅與通用圖例代表,讓人一目瞭然。
(3) 動態的條狀圖讓人在切換年份時能清楚感受到各年齡層之死亡人數增長或減少。
(4) 圖表下方座標軸線(人數比例尺)為男女性資料比對之輔助工具,比起閱讀數字或單純比對長條圖,更為有效提昇判斷準確 率。例如民國95年71~80歲之男女數值分別為20,846與12,597,經過換算得男女比約為1.655:1(約需耗費35秒),但透過比 例尺即可得到男女資料約為20k與12k,比例約為1.6:1(僅需5秒)。
♣ Aesthetic
Simple is beauty
在字體、字型、大小與顏色選擇上,讓資訊清楚呈現之餘,更考量畫面整體平衡例如資料主體以藍、紅兩色呈現,成為讀者聚睛焦點;座標軸輔助線以淺色搭配,避免喧賓奪主。僅提供必要資訊,不讓其他冗餘資訊造成雜訊、影響閱讀。
Reference
1. Julie Steele and Noah Iliinsky, Beautiful Visualization, 2010, O'Reilly Media, ISBN: 978-1-449-37987-2, ch.1 - 2.
2. November 23, 2011. A Bar Chart. Available: http://bl.ocks.org/mbostock/1389927