UE设计中树形图:复杂层次结构的数据可视化

UE视界网    ()  ()

2019-11-18 19:52:05

树图是一种复杂的,基于区域的数据可视化,用于层次化数据,可能难以精确解释。在许多情况下,最好使用更简单的可视化效果(例如条形图)。


树图是用于大型分层数据集的数据可视化技术。它们捕获数据中的两种信息:

(1)单个数据点的值;

(2)层次结构。


定义:树形图是分层数据的可视化。它们由一系列嵌套的矩形组成,这些矩形的大小与相应的数据值成比例。大矩形代表数据树的一个分支,然后细分为较小的矩形,这些矩形代表该分支内每个节点的大小。

1574077451230_0.png

分层树形图,显示了S&P 500的结构。此结构是以下所示树形图的基础。

1574077526635_5.png

FinViz市场地图使用与上述S&P 500数据集的树状结构相对应的树状图。黄色标记为(A),(B),(C),(D)的项目对应于上面树形图中标有那些字母的项目。(A)代表整个标普500指数,并且与树的根相同。矩形(B)是 技术 领域。在 技术 部门内,一个较小的矩形是 通信设备 (C)。最后,在“ 通信 设备”  矩形中,所有较小的矩形代表该部门内的各个公司,例如 思科 系统公司 (D), 高通公司, 等等。每个矩形的颜色表示该股票的价格是向上还是向下移动–非常亮的红色表示向下的大幅波动,非常亮的绿色表示向上的大幅波动。

两个放大的树形图图像,显示了项目的相对大小,以比较其定量大小

1574077571934_4.png

每个矩形的大小代表该股票,行业或部门的市值(价值)。在层次结构的最低级别(单个公司),Google(E)的市值大于Facebook(F)的市值,因此其相对矩形的大小适当。在层次结构(行业)的上一层,整个  Internet信息提供者 (G)类别大于 应用程序软件 (H),并且它们的矩形大小也适当地显示了差异。

树形图的主要用途

树状图通常在数据仪表板上找到。设计师经常选择它们以在密集的仪表板上添加视觉多样性。但是,树图是一个复杂的可视化对象,它给快速理解带来了许多障碍(这是在仪表板上显示任何信息的主要要求)。


树状图通常用于销售数据,因为它们可以捕获数据类别的相对大小,从而可以快速了解构成每个类别的重要内容的项目。颜色可以识别出与同一类别的同级产品相比效果欠佳(或性能不佳)的项目。这就是为什么FinViz的“市场地图”是树形地图持久的示例的原因:它使用户能够识别表现优于行业同行的公司,即使它们的总股票价值可能很小。


当您的层次结构数据具有两个要可视化的主要维度时,树形图可以很好地工作:


  1.  一个积极的定量值,将被表示为矩形的面积(因为面积不能为负,则不能使用树状图的可视化像收益/损失,它可以有正反两方面的值的变量。)

  2. 甲类别或第二定量值,这将被表示为单独的矩形的颜色。如果使用颜色表示定量值,则强烈建议仅使用一种颜色(如果所有数字均为正)或两种颜色(一种用于负数,一种用于正数),并改变颜色的强度以表达精确值。由于人类不会感知颜色具有固有顺序,因此我们强烈建议您不要使用多种颜色来代表一定范围的数字。

1574077637678_5.png

 在树状图中使用颜色不佳的一个  例子:在欧洲不同地区,几种不同的颜色用于显示65岁以上人口的百分比;每种颜色表示不同的百分比范围(蓝色标记为低范围,黄色标记为中范围,红色标记为高范围)。不幸的是,没有通用的  自然映射  表示蓝色小于黄色或红色。相反,如果使用单色的强度来表示百分比,那就更好了。

如果颜色表示分类变量,则可以将不同的颜色用于不同的可能值,因为用户无需将特定颜色解释为比另一种颜色“高”或“低”。但是,与在数据可视化中使用颜色一样,强烈建议限制颜色数量!


无论您如何在树形图中使用颜色,请为色盲用户提供以下可访问性:


  • 避免在同一树状图中同时使用红色和绿色(尤其是对于需要快速区分的值)。

  • 使用对色盲人员安全的调色板。

  • 使用可模拟色盲用户体验的工具来测试您的设计

  • 使用辅助信号(例如矩形内的文本或悬停时出现的文本)用于通过彩色捕获的数据方面

1574077707935_5.png

色盲模拟器中显示的S&P 500树状图的版本

 (左)FinViz的市场地图使用红色和绿色编码股票价值的变化(绿色上升,红色下降)。(右图)显示出具有十足弱视的人所感知到的相同的可视化:红色和绿色很难区分。在此设计中,某些(但不是全部)矩形确实包含建议的替代提示:例如,中间上方的AMZN矩形标有“ + 1.28%”,即使用户可以,也通知用户该库存已用完。告诉它是绿色的。(第二个图像来自  色盲模拟器)。

以下是创建可用树形图的更多准则:


  • 较高级别类别周围视觉上明显的边框可帮助用户识别顶级分组。

  • 高对比度文本确保人们可以阅读树形图矩形内的标签。

  • 用户将鼠标悬停(或点击)一个矩形时达到的一种视觉上独特的选择状态,可以帮助用户确认他们在寻找正确的数据点。

  • 有关所选矩形(显示在覆盖中)的其他详细信息,例如变量的名称,值,使用户可以深入数据。

 

1574077755587_5.png

带有清晰边框的悬停状态和带有其他详细信息的弹出窗口

在FinViz树形图的选定部分周围使用视觉上明显的边框以及在弹出窗口中有关该扇区的其他详细信息的一个很好的示例。

树状图的缺点

比较比较困难

人脑能够专注地处理某些视觉信息:可以快速,准确地掌握诸如长度之类的属性,并且几乎无需认知即可比较这些属性的值。不幸的是,面积不是这些注意的属性之一。树状图依赖于区域(可能还有颜色)来编码变量的值,因此,尽管树状图可以传达大型数据集中的整体关系,但它们并不适合涉及精确比较的任务。

1574077791464_5.png

包含树形图的仪表板。

该  仪表板  包括一个树状图,该树状图显示了四个工厂生产的各种产品的生产水平。颜色用于表示不同的工厂,尺寸用于显示生产输出。尽管此可视化将大量数据压缩到一个很小的空间中,但它有效传达的信息却是非常高级的-例如,很容易确定每个类别中的佼佼者。但是,要确定总体表现最好的前五名既困难又费时。条形图将比树形图更准确,更快速地传达此信息。

仪表板树形图放大以显示两个区域的非常相似的区域。 由于视觉上的相似性,这是一个树形图如何无法用于精确比较的示例。

1574077821283_3.png

上面的仪表板图像的放大视图:(A)或(B)哪个更大?由于此可视化使用区域来传达变量的大小,因此它不容易实现项目之间的特定比较。进行比较需要将鼠标悬停在一个部分上,等待带有该值的工具提示出现,然后将该信息保留在一个人的  短期记忆中,  同时在另一部分上重复相同的过程。

对于非分层数据效率低下

如果您的数据不是分层的,则不应该使用树形图:在这种情况下,树形图在功能上等同于饼形图-仅显示零件与整个零件的关系。(饼图也不是很好的可视化工具-就像树形图一样,它们是基于面积和角度的,不是很专心的属性。它们仅应用于传达一个或两个项目比其余项目大得多,而不是用于比较相对馅饼的大小。)


视觉上压倒性

树形图通常用于可视化非常大的数据集,其中包含数百或数千个项目。如此大量的信息可能会在视觉上使用户不知所措-树形图变成了许多矩形的海洋,许多矩形太小而无法带有文本标签。此外,在复杂的树图中,整个层次结构很容易变得难以区分。解决方案是坐垫树形图,它使用纹理使每个矩形在中间看起来像在坐垫上“凸起”,并逐渐变细到边缘。这种视觉效果利用了人类将这种类型的阴影解释为凸起表面的趋势,从而可以更快地识别出不同的矩形。

1574077876979_3.png

“缓冲”树图,用于帮助用户更轻松地查看矩形。

在缓冲树图中,每个矩形从边缘到中心都有一个轻微的渐变。此效果有助于从视觉上识别小项目以及由几个矩形组成的较大类别。

不适用于平衡树

对于条目大小接近的数据集(即平衡树),树形图也不是很好的选择。在这些情况下,树形图的主要目的(快速识别给定类别中最大的项)变得非常困难。最后,用于创建树形图的标准算法试图使矩形尽可能地为正方形,以便使尺寸比较稍微容易些,并且不易出错。但是,在显示随时间变化的交互式可视化中,此算法的缺陷是矩形可能会随着大小的变化而移动。结果,随着时间的过去跟踪特定项目变得非常困难。


树形图的替代品

在许多情况下,树图可以用表示所关注变量的条形图(对于具有一个定量和一个分类变量的数据)或散点图(对于具有两个定量变量的数据)代替。


但是,此过程需要了解用户的首要任务;对于试图识别具有高销量和高利润率的产品以便高调地宣传它们的高管来说,二维散点图比树形图更好。但是,如果用户主要关心整体销售额,则排序的条形图比树形图更好。(排序通常没有得到足够的重视,但它是最容易识别具有最大和最小值的项的最简单方法之一。)

1574077911961_4.png

显示三个变量的散点图。

对于具有2个定量变量的数据可视化而言,散点图通常比树形图更好,因为人类视觉系统可以快速准确地检测2D位置。此散点图  还添加了第三个分类变量,以颜色表示。

摘要

虽然树图对于可视化某些类型的复杂层次数据集很有用,但它们通常很难解释。如果使用树形图,请在视觉上区分不同的高级类别,避免使用多种颜色来表示数值,并在设计时要考虑色盲用户。最后,首先要了解用户对数据的处理方式,并考虑其他可视化效果(例如条形图或散点图)是否可以替代或增强树形图。


责任编辑:UE视界UESJ网:   UE视界网,未经授权不得转载
关键词 >> UE设计

还可以输入0个字

(审核后展示)
打开目录