什么是矩形樹圖

說到樹圖绘趋，我們可能第一時(shí)間就會(huì)想到樹狀圖（Tree diagram），它的外形就像一棵“倒立”的大樹。樹狀圖通過一枝枝“樹杈”連接起具有層級(jí)關(guān)系的數(shù)據(jù)隅居，展示上下級(jí)止后、同級(jí)的數(shù)據(jù)關(guān)系瞎惫。

樹狀圖

今天要分享的不是這種樹狀圖，而是矩形樹圖（Treemap）译株。
矩形樹圖把樹狀結(jié)構(gòu)轉(zhuǎn)化為平面矩形的狀態(tài)瓜喇，雖然長(zhǎng)得一點(diǎn)都不像“樹”，但能表示數(shù)據(jù)間的層級(jí)關(guān)系歉糜，還可以展示數(shù)據(jù)的權(quán)重關(guān)系乘寒。

矩形樹圖

這棵“樹”還不到30歲

與有著悠久歷史的餅圖、柱狀圖不同匪补，矩形樹圖還很年輕伞辛。20世紀(jì)90年代初，為了找到一種有效了解磁盤空間使用情況的方法夯缺，馬里蘭大學(xué)人機(jī)交互實(shí)驗(yàn)室教授Ben Shneiderman和他的團(tuán)隊(duì)通過調(diào)整樹狀圖蚤氏，發(fā)明了矩形樹圖。

磁盤空間使用情況

1999年踊兜，Martin Wattenberg在SmartMoney上發(fā)布了《市場(chǎng)智能貨幣地圖》竿滨，用矩形樹圖展示了美國股市中幾百家公司的數(shù)據(jù)。圖中矩形的面積與公司的市值相對(duì)應(yīng)捏境，顏色則代表自上次收市以來股價(jià)的變化情況于游。矩形樹圖也由此逐漸被用于可視化財(cái)務(wù)數(shù)據(jù)。

市場(chǎng)智能貨幣地圖

在Marcos Weskamp創(chuàng)建了展示新聞?lì)^條的矩形樹圖之后垫言，矩形樹圖開始被主流媒體使用曙砂。

Newsmap

如何發(fā)現(xiàn)“樹”中之?dāng)?shù)

矩形樹圖把具有層次關(guān)系的數(shù)據(jù)可視化為一組嵌套的矩形，所有矩形的面積之和代表了整體的大小骏掀，各個(gè)小矩形的面積表示每個(gè)子數(shù)據(jù)的占比大小——矩形面積越大鸠澈，表示子數(shù)據(jù)在整體中的占比越大柱告。

最簡(jiǎn)單的矩形樹圖只展示一個(gè)類別的數(shù)據(jù)占比，每個(gè)矩形的面積代表了各數(shù)據(jù)在整體中的比重笑陈。比如澎湃美數(shù)課欄目就用了這類矩形樹圖际度，清楚地展現(xiàn)了雙一流學(xué)科建設(shè)情況。

“雙一流”學(xué)科建設(shè)哪家強(qiáng)涵妥？

矩形樹圖還可以表示兩個(gè)層級(jí)的數(shù)據(jù)結(jié)構(gòu)乖菱，不同類別的數(shù)據(jù)通常用不同顏色展示。OEC（The Observatory of Economic Complexity）用一個(gè)大型的矩形樹圖展示了具有兩個(gè)層級(jí)關(guān)系的數(shù)據(jù)結(jié)構(gòu)蓬网。

2016年窒所，中國出口了什么？

所有矩形之和表示2016年中國出口總額帆锋，顏色代表了全年出口物品的種類（父類別）吵取，例如藍(lán)色代表了機(jī)械類，深綠色代表了紡織品锯厢。藍(lán)色部分的機(jī)械類出口數(shù)額在所有種類中占比最大皮官，因此在所有矩形中，藍(lán)色矩形面積最大实辑。在機(jī)械類的分類下捺氢，電腦出口數(shù)額（子類別）占比最大，因此在藍(lán)色矩形中剪撬，代表電腦的矩形面積最大摄乒。

用矩形樹圖表達(dá)具有兩個(gè)層級(jí)關(guān)系的數(shù)據(jù)結(jié)構(gòu)。整體矩形展示了在911事件發(fā)生后3年內(nèi)残黑，各方的賠償和撫恤數(shù)額情況馍佑。

《美國賠償：慈善高效，保險(xiǎn)守諾萍摊，政府靠譜》

顏色區(qū)分了受害者獲得的撫恤金的來源挤茄，黃色矩形所代表的保險(xiǎn)公司面積最大，支出的賠償數(shù)額最多冰木。其中穷劈，面積最大的黃色矩形代表了保險(xiǎn)公司的大部分賠償都支付給“業(yè)務(wù)受影響的企業(yè)”。

“樹”業(yè)有專攻

矩形樹圖在誕生的一刻踊沸，就具有展示帶有權(quán)重的樹狀數(shù)據(jù)的優(yōu)勢(shì)歇终。而且相對(duì)于樹狀圖，矩形樹圖能更有效地利用空間逼龟。與其他通過長(zhǎng)度來比較占比大小的圖表相比评凝，矩形樹圖通過面積就能清晰地比較數(shù)據(jù)的占比關(guān)系。

北上廣三省幼師學(xué)歷情況（堆疊柱狀圖）

上圖是用堆疊柱狀圖展示北上廣三省幼師學(xué)歷情況腺律。對(duì)比矩形樹圖奕短，堆疊柱狀圖在展現(xiàn)研究生和高中以下學(xué)歷的幼師占比情況上并不清晰宜肉。但矩形樹圖就能把這種占比情況清晰展現(xiàn)出來。

北上廣三省幼師學(xué)歷情況（矩形樹圖）

但是與每種圖表一樣翎碑，矩形樹圖也并不是“全能選手”

擅長(zhǎng)可視化帶權(quán)重的數(shù)據(jù)關(guān)系

在展示不帶有權(quán)重的層級(jí)關(guān)系數(shù)據(jù)時(shí)谬返，使用矩形樹圖會(huì)顯得層次不清。例如日杈，在展示公司的部門組成時(shí)遣铝，運(yùn)用矩形樹圖會(huì)模糊層次關(guān)系，但樹狀圖就能清晰地表達(dá)莉擒。

矩形樹圖表達(dá)單純層次關(guān)系

樹狀圖表達(dá)單純層次關(guān)系

矩形面積要適當(dāng)

當(dāng)小矩形所代表的類別占比太小時(shí)酿炸，文本會(huì)變得很難排布。

image

2015年手機(jī)品牌及其下屬手機(jī)型號(hào)的銷量情況

遇到這種情況涨冀，我們可以采用提示工具填硕，顯示矩形所代表的數(shù)據(jù)。

2015年手機(jī)品牌及其下屬手機(jī)型號(hào)的銷量情況

或者考慮給小矩形編號(hào)蝇裤，用注釋的方式說明矩形所代表的數(shù)據(jù)廷支。網(wǎng)易數(shù)讀欄目在利用矩形樹圖展示比爾及梅林達(dá)·蓋茨基金會(huì)的捐款用處時(shí)频鉴，就采用了這樣的方法栓辜。

蓋茨基金會(huì)捐款承諾

只用于表達(dá)正值

由于矩形的大小不能為負(fù)值，所以矩形樹圖中代表矩形大小的變量只能是正值垛孔。

專注展示占比關(guān)系

作為表示占比的圖表類型藕甩，矩形樹圖無法展示占比隨時(shí)間變化的情況。如果要展示占比的幅度變化周荐，堆疊柱狀圖（Stack Column）和百分比堆疊面積圖（Percent Stacked Area Chart）都是不錯(cuò)的選擇狭莱。

百分比堆疊面積圖