網站Cookies的使用

我們與第三方合作,在我們的網站上放置cookies。 這些Cookies有助於提供使用者客製化內容、投放廣告和分析網站流量。以進而提供您更好的網頁瀏覽體驗。藉由點選“同意”或繼續瀏覽網頁的方式,您同意我們使用網站Cookies。之後,您仍可以管理是否要繼續使用網站與第三方合作的Cookies。

詳細資訊
資料視覺化工具 EP5.拆解圖形與資料的『分佈+占比』關係(下)

資料視覺化工具 EP5. 拆解圖形與資料的『分佈+占比』關係(上)

EP4.拆解圖形與資料的『分佈+占比』關係(上)

系列文 | Jones 2019-10-08

前言


上一篇介紹 《EP4. 拆解圖形與資料的『比較』關係(下)》此篇開始介紹適合『分佈+占比』資料關係的視覺化元件,有些視覺化元件跟比較相同,但是這邊會利用分佈、占比的角度來介紹七種分佈+占比的視覺化元件。


「分佈+占比」資料

常使用的圖表如下:




  1. 直條圖(視覺化控制項>Chart):
  2. 直條圖除了可用於『比較』的資料呈現,也適合用於『分佈+占比』的資料呈現。

    例如:顯示各地區對於商品販售分佈的情形,對於不同的商品售出的占比做顯示,都是很好呈現的元件,像下圖所示,Smart eVision 也可以設定標準線,使用者就可以一眼判定各地區分佈結果,是否達到標準

    直條圖(視覺化控制項>Chart):

    分佈的直條圖結果想要縮小範圍,將直條圖設定成子母視窗模式,就有利用拖拉選取想要看的分佈範圍(如下圖)。

    直條圖(視覺化控制項>Chart):

    分佈的圖表想要文字的搭配,切換資料列表模式,就可以馬上在圖表的下方顯示數值,方便使用者看到詳細的數值。(如下圖)

    直條圖(視覺化控制項>Chart):

    使用時機:

    用於顯示一段時間,或是區域的數值變化都非常適合使用。




  3. 柏拉圖(視覺化控制項>Chart>直條圖>柏拉圖):
  4. 為品質管理上經常使用的一種圖表方法。應用於品管當中。按照發生的頻度排序,顯示了多少結果是由每一個識別出來的原因產生。(如下圖)

    柏拉圖(視覺化控制項>Chart>直條圖>柏拉圖)

    使用時機:

    以發生的頻率累計或佔比結果來排序呈現,通常套用80/20法則,例如:公司80%的營業額由哪些商品銷售組成的,或者是產品生產不良率過高時,80%造成問題原因是哪些,可以透過這個圖形清楚直觀表達。




  5. 曲線圖(視覺化控制項>Chart>折線圖>曲線圖):
  6. 以圓滑的線條來成呈現連續資料的趨勢變化(如下圖),一樣可以快速套用樣板,可以參考上的直條圖。

    曲線圖(Chart>折線圖>曲線圖)

    中間的節點可以選擇不同形狀呈現,假如有多個曲線圖呈現,可以設定不同的形狀,利於區分各種線條。

    曲線圖(Chart>折線圖>曲線圖)

    使用時機:

    曲線圖適合搭配一段時間內的連續資料呈現分佈變化。




  7. 散佈圖(視覺化控制項>Chart>散佈圖):
  8. 主要是將兩個連續變量數據置於縱軸和橫軸上,繪製出交叉位置點,藉由了解兩個變量的分布情況或者分布趨勢相關關係。例如: 本期的商品利潤跟上期的成長值是否有關聯,分佈在那邊跟上期比是否有成長。

    圖中可以設定X、Y軸的基準線,能加快區分各項數值的分佈。

    散佈圖(Chart>散佈圖)

    使用時機:

    主要是將兩個連續變量數據置於縱軸和橫軸上,繪製出交叉位置點,藉由了解兩個變量的分布情況或者分布趨勢相關關係




  9. 泡泡圖(視覺化控制項>Chart>泡泡圖):
  10. 散佈圖的延伸類型,加入第3個變量數值作為數據標籤,提升視覺感以分辨數據標記大小的差異。

    圖中可以設定X、Y軸的基準線,能加快區分各項數值的分佈。

    泡泡圖(Chart>泡泡圖)

    使用時機:

    散佈圖的延伸類型,加入第3個變量數值作為數據標籤,提升視覺感以分辨數據標記大小的差異。




  11. 橫條圖(視覺化控制項>Chart):
  12. 若要從上到下表現出各項目的縱向排列比較,條列式是最適合的圖表。另一個原因,假如要比較的項目名超長,直條圖下方的空間很難塞的下去。橫條圖較容易解讀差異小的數值,特別適合項目多或名稱長時使用,遇到差異數值太接近用圖表分不出來,也可以勾選資料標籤,讓圖表顯示數值,並可以調整圖表中細節,例如:設計數值的字型顏色、大小,調整成使用者適合閱讀的呈現,也是非常適合用於呈現分佈+占比的資料。

    橫條圖(視覺化控制項>Chart)

    使用時機:

    想要顯示項目名稱較長的數值分佈或是占比可以利用橫條圖顯示。




  13. TreeMap (D3控制項>TreeMap):
  14. TreeMap 可以利用矩形的區塊或是環狀圖的大小、顏色的深淺,去比較數值的多寡,也可以用 TreeMap 看出同階層資料分佈情形與佔比,當該區塊範圍越大,代表該資料數值越大、越多。

    此元件特點是具有向下鑽研資料的功能,可設定關聯的階層,可以透過廣的角度(大類)利用單一點擊某個區塊,向下鑽研下層看細部的資料(小類),能延展到三層的資料階層,當 Drill down 細部的區塊愈大及顏色愈深,代表著數值愈大。

    TreeMap (D3控制項>TreeMap)

    TreeMap的旭日圖(放射環狀圖)呈現畫面。

    TreeMap (D3控制項>TreeMap)

    使用時機:

    資料具有維度階層需要展現時,使用者可以透過區塊大小、顏色深淺、搭配點擊區塊,可看出資料間的大小類階層關聯、各階層區塊的資料分佈、占比。

下一篇,將會為各位介紹,拆解圖形與資料關係的『分佈+占比』(下),敬請期待!透過 Smart eVision 商業智慧BI工具能協助您快速完成設計,使用者也可以輕鬆理解資料,讓資料視覺化可以輕鬆完成。

如果想要看實際頁面呈現效果,可以點選➽範例展示,加入聯銓會員即可免費觀看,我們不定時還會寄送聯銓相關資訊給您!


此篇分類於:#SmarteVision #資料視覺化 #資料視覺化元件 #資料視覺工具 #資訊圖表 #分佈+占比 #直條圖 #柏拉圖 #曲線圖 #散佈圖 #泡泡圖 #橫條圖 #TreeMap


更多Smart eVision學習資訊

我們的官方網站

我們的臉書粉絲團

我們的官方YouTube頻道