如何可視化數百個類別的傾斜數據？ 我一直在嘗試一種新的圖表形式，可以幫助解決這個問題。 我稱之為“擁擠的酒吧”。它是有序條形圖和樹形圖的綜合。 以下是包含最新 S&P 500 市值數據的堆積條形圖。
藍色“主”條和軸形成一個規則的有序條形圖，顯示市值最大的 12 家公司。 每個灰色“輔助”條代表其他公司之一。 如果空間允許，可以對一些輔助欄進行標記，但它們的主要目的是為主要欄提供上下文。 這個想法是為了支持焦點+背景數據可視化原理。
我們可以粗略地了解二級類別有多少個，它們的總大小是多少，甚至大小是如何分佈的。 由於它們與主條的比例相同，我們甚至可以根據它們在軸上跨越的長度來估計一些值。 在動態顯示中，可以通過懸停標籤訪問二級類別的類別標籤和值。
右邊緣並不總是那麼均勻，但通過從左到右首先放置較大的輔助條，通常效果很好。
例子
有時，這些值是如此傾斜，以致於輔助填充不會超過主要條形。 按名義國內生產總值繪製世界經濟圖表時就是這種情況。 該條形圖突出顯示了 192 個世界經濟體中排名前七的經濟體。 （與G7 ， 順便一提）。
僅選擇四個主要類別突顯了這樣一個事實：美國經濟約佔世界名義 GDP 的四分之一。
如果次要類別的總和與主要條形的比例相同，則可以將它們打包到單獨的條形中，如下所示。
經濟學並不是扭曲數據的唯一來源。 以下是尼卡地平藥物試驗數據的副作用計數。
條形的大小代表出現的次數，顏色代表平均嚴重程度。 次要顏色仍然會褪色，以保持主要類別的焦點，但如果更真實的顏色表示很重要，則不必如此。
讓我走上這條道路的數據集是紐約市註冊的狗名的集合。 這是我的創作，突出顯示了 16,000 多個名字中的前 25 個名字。
與其他打包條形示例不同，二級類別按字母順序逐行放置，以支持查找特定的狗名稱（借助懸停標籤）。 這種佈置的缺點是右邊緣明顯不太均勻。
擁有真正的 x 軸（與樹形圖不同）的一個優點是能夠估計整個總體的總和。 在本例中，我們有 25 行，每行在計數軸上的數量剛好超過 4,000。 我們可以估計狗的數量為 25 x 4,000+ = 100,000+。
尼卡地平示例顯示了條形圖使用連續色標。 使用分類著色，褪色不太可能使顏色解釋複雜化。 在狗名字的視圖中，我使用橙色來表示以“y”音結尾的名字。
變化
我一直在嘗試各種變化，上面的例子展示了其中的許多變化。 在構建打包條形圖時，我們可以選擇以下選項：
有多少行？ 有沒有一個好的通用默認值？ 像 10 這樣的整數可以很容易地應用乘法技巧來獲得總和，但縱橫比可能更重要。
按大小從左到右放置輔助欄還是按字母順序逐行放置？ 按大小從左到右意味著每個輔助條的左邊緣位置對應於按大小排序順序，無論行如何。 條形越大，距離左側越遠。 從某種意義上說，這與按尺寸排序的主條是一致的，並且具有更乾淨的右邊緣的優點。 將相似的大小放在一起可能有助於理解分佈。 逐行字母順序對於在交互式顯示中查找特定類別更有用。 輔助欄按字母順序從左到右放置之內每行，從頂行開始。
輔助條的顏色？ 我一直在嘗試隨機灰色、褪色和真實顏色。 隨機化灰色使得分隔線變得不必要（避免連續重複的灰色）。
主條的標籤？ 將標籤放在圖表區域之外的軸上可以避免在條形圖內擬合的約束。 但將主要標籤放在條形內有助於將其與堆疊條形圖區分開來，並且更節省空間。
二級鋼筋的標籤？ 我最初不喜歡使用輔助標籤來強調它們語境角色，但擁有一些標籤似乎對不太確定發生了什麼的新觀眾有很大幫助。
次要鋼筋的單獨堆棧？ 當數據如此傾斜以至於所有輔助值的總和與主條形的比例相同時，“其他”堆棧是可行的。
將所有或部分次要條合併到一個實體“其他”區域？ 這將保留大部分上下文，使右邊緣平滑，並使顯示噪音更少。 但它放棄了一些有關次要大小的基數和分佈的信息。
備擇方案
與可視化具有多個類別的傾斜數據的其他方法相比，填充條形圖如何？
- 相比於條形圖對於頂級類別，打包條形圖獲得其餘類別的上下文。 主要缺點是輔助條形圖使圖表變大（或主條形圖縮小）並佔用可用於標籤或註釋的空間。
- 相比樹形圖，打包條形通常具有更準確的數據表示（軸上的條形長度與沒有任何軸的區域的長度），但更大的優勢是查看主要類別，這些類別具有突出的標籤和軸對齊的尺寸。 但是，樹形圖支持嵌套和真正的空間填充（無鋸齒狀右邊緣）。 微小的值可能會在樹狀圖中得到更好的表示，因為 3x4 像素的矩形比 1x12 像素的條更容易看到。 雖然堆積條中的軸帶來了準確性，但它們確實佔用了空間，從而使樹形圖更加節省空間。
- 相比堆積的氣泡（如在原始狗的名字氣泡圖），壓縮條具有更規則的掃描位置，並且在表示數據值時長度相對於圓形區域具有感知優勢。 然而，與樹形圖一樣，微小的值可能更容易被識別為氣泡（4 像素直徑的圓圈與 1x12 像素的條形圖）。
- 相比於一維散點圖，包裝條為主要類別和累積總和的意義添加突出的、對齊的標籤。 散點圖的優點是對所有值使用精確的位置編碼，並保持大小通道可用於另一個變量；但過度打擊必須通過抖動或閃避來應對，這對於非常傾斜的數據可能會出現問題。
- 相比包裹條，將條形重新組織為多列，打包條形更節省空間，這有助於支持更多類別（1,000 個而不是 100 個），並且打包條形增加了總面積的感覺。 包裹條支持更準確的讀取“次要”條形圖值，因為它們的基數是對齊的，而包裹條形圖應該具有較低的學習曲線，因為它們看起來更像常規條形圖。
缺點
對擁擠的酒吧的主要批評是類似於堆疊條，這使人們相信每一行中的條形彼此相關。 我將堆棧之間的間隙設置得比堆疊條形圖的典型間隙小，試圖減少潛在的混亂，但我不確定它是否可以消除。 我希望優勢能夠克服障礙。
其他缺點主要是權衡，可以通過上面列出的選項中的選擇來解決。 例如，如果隨機灰色看起來太分散注意力，則可以以其他方式對輔助條進行著色或將其合併在一起作為有意的簡化。
帶註釋的指南
下一張照片不適合你；它是為那些瀏覽帖子只看圖片的人準備的。
在 JMP 中嘗試一下
儘管這項工作仍處於實驗階段，但我附加了一個 JSL 腳本，用於創建打包條形圖的最簡單變體聯合管理計劃。 它的工作原理是首先將打包邏輯應用於數據，創建合成行號和顏色變量。 然後，它在圖形生成器中創建一個常規的堆疊條形圖，並具有打包條形圖的顏色和排列。
你怎麼認為？
我認為打包條對於某些類型的數據很有用，但我意識到我太投入而無法客觀。 因此，我正在尋找有關此工作各個方面的反饋：佈局、術語、標籤、顏色等。如果您有可能從此顯示中受益的數據，請告訴我 – 我可以使用我的原型為您嘗試一下。我去過發推文更多例子；如果你有興趣，請查看狗的性別名稱和產品傷害計數。 如果您想嘗試在其他圖表平台上創建打包條形圖，那也很棒。
謝謝參觀！
2017 年 8 月更新：除了附加的 JMP 腳本之外，現在還有一個 Excel 插件和一個 d3.js 腳本用於製作打包條形圖。 他們可以在PackedBars github 區域。 該插件是通過與 Excel dataviz 專家合作完成的，喬恩·珀爾帖。 一張擁擠的酒吧海報已被接受IEEE視覺系統十月份的會議。 海報提交需要25秒預覽視頻;附上帶有字幕而不是音頻的動畫 GIF 版本。
謝謝，馬克。 說到帕累托，我最近製作了一個動畫 gif，隨著值數量的增長，比較了壓縮條形圖和帕累托圖。
西安：
看起來你的想法已經被 Kaiser Fung 延伸到了條形密度圖。
這些條很容易解釋。 打包多邊形允許顯示打包條形圖上的一小條區域。 不知道我是否對條形密度圖感興趣......
ps 我使用包裝條來分析和展示上個月上面的秘密內容。 比標準帕累托效果好得多！
很高興聽到，馬克——謝謝！ 感謝您使用真實數據進行嘗試。 很高興您了解帕累托應用程序和按需詳細信息方面。
如果你有任何我可以使用的匿名“秘密東西”，請傳遞給我——有實際的例子總是好的。
順便說一句，我一直在推特上發布一系列圖表。
遺憾的是，您無法輕鬆控制 JMP 13 中的條形間距。 如果您確實想要獲得效果，可以使用一些技巧，但否則腳本只能近似填充條形的外觀。
西安：
涼爽的！ 我運行了幾次，發現它是帕累托圖的一個很好的替代方案。 我從事製造改進工作。 我們經常使用前 10 名圖表來幫助推動我們做正確的事情。 使用當前的 Pareto 平台，必須使用組合最後 (n-10) 個原因才能查看前 10 個原因。 (n-10) 個原因的細節被掩蓋了。 擁擠的條形圖為我提供了一個很好的帕累托圖，其中包含樹形圖所需的詳細信息。
如何控制條形寬度/間距？ 我的條形圖之間有垂直間距。
通過這篇文章，我得到了一系列有趣的反應:)
我最初的反應是“這並不是什麼新鮮事，我們一直在做……哦，等等，不，那是不同的……”連續幾次。
我認為這種技術對於大型有序數據集具有很大的潛力。 在我看來，它確實存在的任何缺點都是樹形圖中固有的，並且該技術改進了這些缺點。
我認為最初出現混亂的可能性很大。 在某些情況下，讓觀眾理解它與樹形圖之間的區別，或者它與堆疊條形圖之間的區別可能是一個挑戰。
但我認為這非常值得探索，而且我“非常”寧願以這種格式繪製數據，而不是標準樹形圖。
幹得好。
