設計說明:首先,我們與原始圖表一(列於頁尾處)作比較,原圖表單純使用表格方式呈現前20的排名公司,
以員工平均年薪由高至低排序,每列描述各公司的細節,例如,公司名稱、產業、人數等。
以下為我們改進的重點:
- 由於原圖表只能在第一時間呈現公司排名的資訊,故我們將它以長條圖呈現,不但保持排序的資訊,
同時也很容易可以比較各公司間的差距。
- 因為公司數量眾多,我們以產業作為分類並標示色彩,這邊我們使用d3.schemeCategory10,
好處是這個色彩分類器對人們是有明顯的區別性,易於分辨。
- 增加互動性一,仍保留公司細節資訊,當滑鼠移至(mouseover)長條圖,將有tooltip顯示公司資訊。
- 增加互動性二,當滑鼠點擊(click)長條圖,只顯示相同產業長條圖,更容易辦識相同產業的分佈狀況。
- 右上方提供歸納產業的資訊,以產業別說明進入TOP20的企業數量。
基本圖表說明:y軸為員工平均年薪,以萬元為單位;x軸為公司名稱;長條圖的高度表示公司的平均年薪,而排名(no)列於長修上。
設計說明:這邊的圖表我們與原始圖表二(列於頁尾處)作比較,原圖表依然單純使用表格方式呈現各產業的平均薪資狀況,
以產業平均薪資由高至低排序,表中,列出該產業分別代表最低及最高的平均薪資的公司,對於使用者除了排名產業平均薪資外,
無法比較其他項目。
以下為我們改進的重點:
- 棒棒圖使我們可以將關心的數據點重點標示出來,這邊我們用三個點呈現產業平均、最低及最高的平均薪資。
- 增加互動性一,當我將滑鼠移至(mouserover)點上,依然可以看出其代表的薪資訊息
- 增加互動性二,提供re-order效果,讓我們可以根據產業平均、最低及最高的平均薪資排序
- 由於我們可以很容易計最高及最低差距,所以可以提供額外「最低及最高差距最大的產業」排序,這是原本沒有資訊
基本圖表說明:x軸為產業名稱;y軸為平均薪資,以萬元為單位;右上角說明在棒棒圖上的圓點意義。
設計說明:這邊的原圖表也是原始圖表二(列於頁尾處),與我們上一個圖表二的來源相同,我們希望以不同的實驗方式呈現不同的效果。
以下為我們改進的重點:
- 以對稱長條圖表同時呈現出該產業最高及最低的平均新資,除了將數字具象化,也容易比較以其它產業的差距。
- 長條上列出最高及最低的公司名稱。
- 增加互動性,提供re-order效果,當滑鼠點擊(click)長條圖,則會依照該項目內容進行排序
,若在點擊第二次,將會作反向排序,反之亦然,這個效果提供使用者比較他所關心的項目。
基本圖表說明:最上方分別標示其相對位置的項目說明,分別是「公司名稱(最低平均薪資)」、「產業」及「公司名稱(最高平均薪資)」;
左右y軸分別表示最低及最高的平均薪資,單位為萬元。
此對稱長條圖中,似乎較適合用在呈現兩個屬性值的表現上,例如最高及最低薪資,但有困難將平均薪資(第三個屬性值)放進圖表中;
另外,對稱長條圖也較容易看出最高及最低的明顯差異,這個是棒棒圖比較沒辦法突顯的部份。