樹(shù)形圖：復(fù)雜層次結(jié)構(gòu)的數(shù)據(jù)可視化

作者：Page Laubheimer[1]

樹(shù)形圖是一種復(fù)雜的，基于區(qū)域的數(shù)據(jù)可視化，用于復(fù)雜層次結(jié)構(gòu)的數(shù)據(jù)，可能難以精確解釋。在許多情況下，最好使用更簡(jiǎn)單的可視化效果（例如條形圖）。

樹(shù)形圖是用于大型分層數(shù)據(jù)的數(shù)據(jù)可視化技術(shù)。它們捕獲數(shù)據(jù)中的兩種信息：（1）單個(gè)數(shù)據(jù)點(diǎn)的值；（2）層次結(jié)構(gòu)。

樹(shù)形圖是分層數(shù)據(jù)的可視化。它們由一系列嵌套矩形組成，這些矩形的大小與相應(yīng)的數(shù)據(jù)值成比例。大矩形代表數(shù)據(jù)樹(shù)的一個(gè)分支，然后細(xì)分為較小的矩形，這些矩形代表該分支內(nèi)每個(gè)節(jié)點(diǎn)的大小。

分層樹(shù)形圖，顯示了S＆P 500的結(jié)構(gòu)。此結(jié)構(gòu)是以下所示樹(shù)形圖的基礎(chǔ)。

FinViz市場(chǎng)地圖使用與上述S＆P 500數(shù)據(jù)集樹(shù)狀結(jié)構(gòu)相對(duì)應(yīng)的樹(shù)狀圖。黃色標(biāo)記為（A），（B），（C），（D）的項(xiàng)目對(duì)應(yīng)于上面樹(shù)形圖中標(biāo)有那些字母的項(xiàng)目。（A）代表整個(gè)標(biāo)普500指數(shù)，并且與樹(shù)的根相同。矩形（B）是技術(shù)領(lǐng)域。在技術(shù)部門(mén)內(nèi)，一個(gè)較小的矩形是通信設(shè)備（C）。最后，在“ 通信設(shè)備”矩形中，所有較小的矩形代表該部門(mén)內(nèi)的各個(gè)公司，例如思科系統(tǒng)公司（D），高通公司等等。每個(gè)矩形的顏色表示該股票的價(jià)格是向上還是向下移動(dòng)–非常亮的紅色表示向下大幅波動(dòng)，非常亮的綠色表示向上大幅波動(dòng)。

每個(gè)矩形的大小代表該股票，行業(yè)或部門(mén)的市值（價(jià)值）。在層次結(jié)構(gòu)的最低級(jí)別（單個(gè)公司），Google（E）的市值大于Facebook（F）的市值，因此其相對(duì)矩形的大小適當(dāng)。在層次結(jié)構(gòu)（行業(yè)）的上一層，整個(gè)Internet信息提供商（G）類(lèi)別大于應(yīng)用程序軟件（H），并且它們的矩形大小也適當(dāng)?shù)仫@示了差異。

樹(shù)形圖的主要用途

樹(shù)形圖通常在數(shù)據(jù)儀表板上。樹(shù)形圖是一個(gè)復(fù)雜的可視化對(duì)象，它給快速理解帶來(lái)了許多障礙（這是在儀表板上顯示任何信息的主要要求）。

樹(shù)形圖通常用于銷(xiāo)售數(shù)據(jù)，因?yàn)樗鼈兛梢圆东@數(shù)據(jù)類(lèi)別的相對(duì)大小，從而可以快速了解構(gòu)成每個(gè)類(lèi)別重要內(nèi)容的項(xiàng)目。顏色可以識(shí)別出與同一類(lèi)別的同級(jí)產(chǎn)品相比效果欠佳（或性能不佳）的項(xiàng)目。這就是為什么FinViz的“市場(chǎng)地圖”是樹(shù)形地圖持久的示例的原因：它使用戶能夠識(shí)別表現(xiàn)優(yōu)于行業(yè)同行的公司，即使它們的總股票價(jià)值可能很小。

當(dāng)層次結(jié)構(gòu)數(shù)據(jù)具有兩個(gè)要可視化的主要維度時(shí)，樹(shù)形圖可以很好地工作：

1、一個(gè)積極的定量值，將被表示為矩形的面積（因?yàn)槊娣e不能為負(fù)，則不能使用樹(shù)狀圖的可視化像收益/損失，它可以有正反兩方面的值的變量。）

2、類(lèi)別或第二定量值，這將被表示為單獨(dú)的矩形的顏色。如果使用顏色表示定量值，則強(qiáng)烈建議僅使用一種顏色（如果所有數(shù)字均為正）或兩種顏色（一種用于負(fù)數(shù)，一種用于正數(shù)），并改變顏色的強(qiáng)度以表達(dá)精確值。由于人類(lèi)不會(huì)感知顏色具有固有順序，因此我們強(qiáng)烈建議不要使用多種顏色來(lái)代表一定范圍的數(shù)字。

在樹(shù)形圖中使用顏色不佳的一個(gè)例子：在歐洲不同地區(qū)，幾種不同的顏色用于顯示65歲以上人口的百分比；每種顏色表示不同的百分比范圍（藍(lán)色標(biāo)記為低范圍，黃色標(biāo)記為中范圍，紅色標(biāo)記為高范圍）。不幸的是，沒(méi)有通用的自然映射,表示藍(lán)色小于黃色或紅色。相反，如果使用單色的強(qiáng)度來(lái)表示百分比，那就更好了。

如果顏色表示分類(lèi)變量，則可以將不同的顏色用于不同的可能值，因?yàn)橛脩魺o(wú)需將特定顏色解釋為比另一種顏色“高”或“低”。但是，與在數(shù)據(jù)可視化中使用顏色一樣，強(qiáng)烈建議限制顏色數(shù)量！

無(wú)論如何在樹(shù)形圖中使用顏色，請(qǐng)為色盲用戶提供以下可訪問(wèn)性：

• 避免在同一樹(shù)形圖中同時(shí)使用紅色和綠色（尤其是對(duì)于需要快速區(qū)分的值）。
• 使用對(duì)色盲人員安全的調(diào)色板。
• 使用可模擬色盲用戶體驗(yàn)的工具來(lái)測(cè)試設(shè)計(jì)
• 使用輔助信號(hào)（例如矩形內(nèi)的文本或懸停時(shí)出現(xiàn)的文本）用于通過(guò)彩色捕獲的數(shù)據(jù)方面

（左）FinViz的市場(chǎng)地圖使用紅色和綠色編碼股票價(jià)值的變化（綠色上升，紅色下降）。（右圖）顯示出具有色盲和弱視人士所感知到的圖像：紅色和綠色很難區(qū)分。在此設(shè)計(jì)中，某些（但不是全部）矩形確實(shí)包含建議的替代提示：例如，上方中間的AMZN矩形標(biāo)有“ + 1.28％”，即使用戶可以，也通知用戶該庫(kù)存已用完。告訴它是綠色的。（第二個(gè)圖像來(lái)自色盲模擬器[2]）。

以下是創(chuàng)建可用樹(shù)形圖的更多準(zhǔn)則：

• 較高級(jí)別類(lèi)別周?chē)曈X(jué)上明顯的邊框可幫助用戶識(shí)別頂級(jí)分組。
• 高對(duì)比度文本確保人們可以閱讀樹(shù)形圖矩形內(nèi)的標(biāo)簽。
• 用戶將鼠標(biāo)懸停（或點(diǎn)擊）一個(gè)矩形時(shí)達(dá)到的一種視覺(jué)上獨(dú)特的選擇狀態(tài)，可以幫助- - 用戶確認(rèn)他們?cè)趯ふ艺_的數(shù)據(jù)點(diǎn)。
• 有關(guān)所選矩形（顯示在覆蓋中）的其他詳細(xì)信息，例如變量的名稱(chēng)，值，使用戶可以深入數(shù)據(jù)。

在FinViz樹(shù)形圖的選定部分周?chē)?使用視覺(jué)上明顯的邊框,以及在彈出窗口中有關(guān)該扇區(qū)的其他詳細(xì)信息的一個(gè)很好的示例。

樹(shù)形圖的缺點(diǎn)

樹(shù)形圖數(shù)據(jù)特定比較困難

人腦能夠?qū)Ｗ⒌靥幚砟承┮曈X(jué)信息：可以快速，準(zhǔn)確地掌握諸如長(zhǎng)度之類(lèi)的屬性，并且?guī)缀鯚o(wú)需認(rèn)知即可比較這些屬性的值。不幸的是，面積不是這些注意的屬性之一。樹(shù)狀圖依賴于區(qū)域（可能還包括顏色）來(lái)編碼變量的值，因此，盡管樹(shù)狀圖可以傳達(dá)大型數(shù)據(jù)集中的整體關(guān)系，但它們并不適合涉及精確比較的任務(wù)。

該界面包括一個(gè)樹(shù)狀圖，該樹(shù)狀圖顯示了四個(gè)工廠各種產(chǎn)品的生產(chǎn)水平。顏色用于表示不同的工廠，尺寸用于顯示生產(chǎn)輸出。盡管此可視化將大量數(shù)據(jù)壓縮到一個(gè)很小的空間中，但它有效傳達(dá)的信息卻是非常高級(jí)的-例如，很容易確定每個(gè)類(lèi)別中的佼佼者。但是，要確定總體表現(xiàn)最好的前五名既困難又費(fèi)時(shí)。條形圖將比樹(shù)形圖更準(zhǔn)確，更快速地傳達(dá)此信息。

（A）或（B）哪個(gè)更大？由于此可視化使用區(qū)域來(lái)傳達(dá)變量的大小，因此它不容易實(shí)現(xiàn)項(xiàng)目之間的特定比較。進(jìn)行比較需要將鼠標(biāo)懸停在一個(gè)部分上，等待帶有該值的工具提示出現(xiàn)，然后將該信息保留在短期記憶中，同時(shí)在另一部分上重復(fù)相同的過(guò)程。

樹(shù)形圖對(duì)于非分層數(shù)據(jù)效率低下

如果數(shù)據(jù)不是分層的，則不應(yīng)該使用樹(shù)形圖：在這種情況下，樹(shù)形圖在功能上等同于餅形圖-僅顯示零件與整個(gè)零件的關(guān)系。（餅圖也不是很好的可視化工具-就像樹(shù)形圖一樣，它們是基于面積和角度的，不是很專(zhuān)心的屬性。它們僅應(yīng)用于傳達(dá)一個(gè)或兩個(gè)項(xiàng)目比其余項(xiàng)目大得多，而不是用于比較相對(duì)餡餅的大小。）

視覺(jué)上壓倒性

樹(shù)形圖通常用于可視化非常大的數(shù)據(jù)集，其中包含數(shù)百或數(shù)千個(gè)項(xiàng)目。如此大量的信息可能會(huì)在視覺(jué)上使用戶不知所措-樹(shù)形圖變成了許多矩形的海洋，許多矩形太小而無(wú)法帶有文本標(biāo)簽。此外，在復(fù)雜的樹(shù)圖中，整個(gè)層次結(jié)構(gòu)很容易變得難以區(qū)分。解決方案是漸變樹(shù)形圖，它使用紋理使每個(gè)矩形在中間看起來(lái)像在坐墊上“凸起”，并逐漸變細(xì)到邊緣。這種視覺(jué)效果利用了人類(lèi)將這種類(lèi)型的陰影解釋為凸起表面的趨勢(shì)，從而可以更快地識(shí)別出不同的矩形。

在漸變樹(shù)形圖中，每個(gè)矩形從邊緣到中心都有一個(gè)輕微的漸變。此效果有助于從視覺(jué)上識(shí)別小項(xiàng)目以及由幾個(gè)矩形組成的較大類(lèi)別。

不適用于平衡樹(shù)

對(duì)于條目大小接近的數(shù)據(jù)集（即平衡樹(shù)），樹(shù)形圖也不是很好的選擇。在這些情況下，樹(shù)形圖的主要目的（快速識(shí)別給定類(lèi)別中最大的項(xiàng)）變得非常困難。最后，用于創(chuàng)建樹(shù)形圖的標(biāo)準(zhǔn)算法試圖使矩形盡可能地為正方形，以便使尺寸比較稍微容易些，并且不易出錯(cuò)。但是，在顯示隨時(shí)間變化的交互式可視化中，此算法的缺陷是矩形可能會(huì)隨著大小的變化而移動(dòng)。結(jié)果，隨著時(shí)間的過(guò)去跟蹤特定項(xiàng)目變得非常困難。

樹(shù)形圖的替代品

在許多情況下，樹(shù)形圖可以用表示所關(guān)注變量的條形圖（對(duì)于具有一個(gè)定量和一個(gè)分類(lèi)變量的數(shù)據(jù)）或散點(diǎn)圖（對(duì)于具有兩個(gè)定量變量的數(shù)據(jù)）代替。

但是，此過(guò)程需要了解用戶的首要任務(wù)；對(duì)于試圖識(shí)別具有高銷(xiāo)量和高利潤(rùn)率的產(chǎn)品以便高調(diào)地宣傳它們的高管來(lái)說(shuō)，二維散點(diǎn)圖比樹(shù)形圖更好。但是，如果用戶主要關(guān)心整體銷(xiāo)售額，則排序的條形圖比樹(shù)形圖更好。（排序通常沒(méi)有得到足夠的重視，但它是最容易識(shí)別具有最大和最小值的項(xiàng)的最簡(jiǎn)單方法之一。）

對(duì)于具有2個(gè)定量變量的數(shù)據(jù)可視化而言，散點(diǎn)圖通常比樹(shù)形圖更好，因?yàn)槿祟?lèi)視覺(jué)系統(tǒng)可以快速準(zhǔn)確地檢測(cè)2D位置。此散點(diǎn)圖 還添加了第三個(gè)分類(lèi)變量，以顏色表示。

參考資料

[1]

Page Laubheimer: https://www.nngroup.com/articles/treemaps/

[2]

色盲模擬器: http://www.color-blindness.com/coblis-color-blindness-simulator

總結(jié)

以上是生活随笔為你收集整理的下拉菜单实现树状结构_树形图：复杂层次结构的数据可视化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。