ACM

ACM通信

首页 / 杂志存档 / 2010年6月(第53卷第6期) / 可视化动物园之旅 /全文

实践

可视化动物园之旅

作者:杰弗里·希尔，迈克尔·博斯托克，瓦迪姆·奥吉维茨基
ACM通信，2010年6月，53卷第6期，59-67页
10.1145/1743546.1743567
评论

认为: 打印手机应用程序 ACM数字图书馆全文(PDF) 数码版分享: 通过电子邮件发送在reddit上分享在StumbleUpon上分享在黑客新闻上分享在推特上分享在Facebook上分享

耀斑包层次结构的日爆(径向空间填充)布局 — 来源:http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/sunburst.htm

由于传感、网络和数据管理的进步，我们的社会正在以惊人的速度生产数字信息。据估计，仅在2010年，我们将产生1200艾字节的内容，是国会图书馆的6000万倍。在这些海量的数据中，蕴含着大量关于我们如何经营企业、政府和个人生活的宝贵信息。为了更好地利用这些信息，我们必须找到有意义地探索、关联和交流数据的方法。

可视化的目标是通过利用人类视觉系统的高度调节能力来帮助我们理解数据，这种能力可以看到模式、发现趋势和识别异常值。设计良好的视觉表征可以用简单的感知推理取代认知计算，提高理解能力、记忆力和决策能力。通过使数据更容易获取和吸引人，可视化表示还可以帮助吸引更多不同的观众参与探索和分析。挑战在于创建与数据相适应的有效且吸引人的可视化。

创建可视化需要许多微妙的判断。一个人必须决定问哪些问题，确定适当的数据，并选择有效的视觉编码将数据值映射到诸如位置、大小、形状和颜色等图形特征。挑战在于，对于任何给定的数据集，可视化编码的数量和可能的可视化设计空间都非常大。为了指导这一过程，计算机科学家、心理学家和统计学家研究了不同的编码如何促进对数据类型(如数字、类别和网络)的理解。例如,图形知觉实验发现，空间位置(如散点图或柱状图)可以最精确地解码数值数据，通常优于角度、一维长度、二维面积、三维体积和颜色饱和度等视觉变量。因此，最常见的数据图形(包括柱状图、折线图和散点图)使用位置编码就不足为奇了。然而，我们对图形感知的理解还不完全，必须适当地与交互设计和美学进行平衡。

本文简要介绍了“可视化动物园”，展示了可视化和与不同数据集交互的技术。在许多情况下，简单的数据图形不仅足够，而且可能是更可取的。在这里，我们将重点介绍一些处理复杂数据集的更复杂和不寻常的技术。毕竟，你去动物园不是为了看吉娃娃和浣熊;你会去欣赏雄伟的北极熊、优雅的斑马和可怕的苏门答腊虎。类似地，我们将介绍一些更奇特(但实际上很有用)的可视化数据表示形式，从最常见的时间序列数据开始;继续讨论统计数据和地图;然后用层级和网络完成整个旅程。在此过程中，请记住所有可视化都共享一个共同的“DNA”，即数据属性和视觉属性(如位置、大小、形状和颜色)之间的一组映射，并且定制的可视化物种可能总是通过改变这些编码来构建。

这里显示的每个可视化都附带一个在线交互式示例，可以通过下面显示的URL查看。这些实例是使用Protovis，一种基于web的数据可视化的开源语言。要了解关于如何制作可视化的更多信息(或复制并粘贴它以供自己使用)，请参阅本文的在线版本ACM队列网站在http://queue.acm.org/detail.cfm?id=1780401/．所有示例源代码都发布到公共领域，对重用或修改没有任何限制。但是，请注意，这些示例只能在支持可伸缩矢量图形(SVG)的现代的、符合标准的浏览器上工作。支持的浏览器包括最新版本的Firefox、Safari、Chrome和Opera。不幸的是，Internet Explorer 8和更早的版本不支持SVG，因此不能用于查看交互式示例。

回到顶部

时间序列数据

随时间或时间序列数据变化的值集是记录数据最常见的形式之一。时变现象是许多领域的核心，如金融(股价、汇率)、科学(温度、污染水平、电势)和公共政策(犯罪率)。人们经常需要同时比较大量的时间序列，并且可以从许多可视化中进行选择。

指数的图表。对于某些形式的时间序列数据，原始值不如相对变化重要。想想那些对股票增长率比对具体价格更感兴趣的投资者吧。多个股票可能具有显著不同的基准价格，但在标准化后可以进行有意义的比较。一个指数图是一个交互式折线图，显示基于所选索引点的时间序列数据集合的百分比变化。例如，图像在图1一个显示的是在2005年1月购买的选定股票价格的百分比变化:人们可以看到那些在当时投资亚马逊、苹果或谷歌的人所享受的起伏上涨。

堆积图。其他形式的时间序列数据可能在整体上看得更好。通过将面积图相互叠加，我们得到时间序列值的可视化总和堆积图。这种类型的图(有时称为a流图)描述聚合模式，通常支持向下钻取到单个系列的子集。图表见图1 b显示了美国过去十年中按行业细分的失业人数。虽然这类图表近年来很受欢迎，但它们也有一些明显的局限性。堆叠图不支持负数，对于不应该求和的数据(例如温度)没有意义。此外，叠加可能会使准确解释位于其他曲线上方的趋势变得困难。交互式搜索和过滤通常用来补偿这个问题。

小倍数。为了代替叠加，可以将多个时间序列绘制在相同的坐标轴上，就像在指数图中那样。然而，在同一空间放置多个序列可能会产生重叠曲线，降低易读性。另一种方法是使用小倍数:在各自的图表中显示每个系列。在图1 c我们再次看到了失业工人的数量，但在每个行业类别内都是标准化的。我们现在可以更准确地看到每个部门的总体趋势和季节性模式。当我们考虑时间序列数据时，请注意，几乎可以为任何类型的可视化构建小倍数:柱状图、饼状图、地图等等。这通常比试图将所有数据强制放入一个图中产生更有效的可视化效果。

地平线图表。如果你想同时比较更多的时间序列，会发生什么呢?的地平线图是一种用于在保持分辨率的同时增加时间序列视图的数据密度的技术。中所示的五个图表图1 d．第一个是标准面积图，正数值用蓝色表示，负数值用红色表示。第二个图将负值“镜像”到与正值相同的区域，使面积图的数据密度加倍。第三个图表水平图通过将图划分为条带并将其分层以创建嵌套形式，再次将数据密度提高了一倍。结果是，图表保持了数据分辨率，但只使用了四分之一的空间。虽然水平图需要一些时间来学习，但人们发现，当图表尺寸非常小时，它比标准图更有效。

回到顶部

统计分布

其他可视化的设计是为了揭示一组数字是如何分布的，从而帮助分析人员更好地理解数据的统计属性。分析师通常希望将他们的数据与统计模型相匹配，以检验假设或预测未来的值，但模型选择不当可能导致错误的预测。因此，可视化的一个重要用途是探索性数据分析:深入了解数据是如何分布的，从而为数据转换和建模决策提供信息。常见的技术包括柱状图，它显示分组到箱中的值的流行程度box-and-whisker情节，它可以传达统计特征，如平均值、中位数、四分位数边界或极端异常值。此外，还有许多其他技术用于评估分布和检查多个维度之间的相互作用。

茎叶图。对于评估一组数字，直方图的一个替代方法是茎叶图。它通常根据第一个有效数字对数字进行分类，然后按第二个有效数字对每个分类中的值进行堆叠。这种极简的表示使用数据本身绘制频率分布，取代传统直方图柱状图的“信息空白”柱状图，并允许人们评估总体分布和每个单元的内容。在图2一个图中，茎叶图显示了在亚马逊的土耳其机器人(Mechanical Turk)上完成众包任务的工人完成率的分布。注意多个集群:一组集群围绕高完成水平(99% - 100%);另一个极端是一群土耳其人，他们在一个小组中只完成少数任务(约10%)。

qq的情节。虽然直方图和茎叶图是评估频率分布的常用工具qq（quantile-quantile)情节是一个更强大的工具。Q-Q图通过将两个概率分布的分位数相互绘制成图形来进行比较。如果两者相似，则绘制的值将大致位于中心对角线上。如果两者是线性相关的，值将再次沿着一条直线，尽管斜率和截距不同。

图2 b与三种统计分布相比，显示了相同的机械土耳其人参与数据。请注意，与均匀和正态(高斯)分布相比，数据如何形成三个不同的成分:这表明包含三个成分的统计模型可能更合适，事实上，我们在最后的图中看到，三个正态分布的拟合混合提供了更好的拟合。尽管Q-Q图很强大，但它有一个明显的局限性，即它的有效使用需要观众具备一些统计知识。

散点图矩阵。其他可视化技术试图表示多个变量之间的关系。多变量数据经常出现，而且很难表示，部分原因是在头脑中描绘超过三个维度的数据很困难。克服这个问题的一种技术是使用小倍数的散点图来显示变量之间的一组成对关系，从而创建散点图矩阵。slom可以对任何一对变量之间的相关性进行可视化检查。

在图2 c用散点图矩阵可视化汽车数据库的属性，显示马力、重量、加速度和位移之间的关系。此外，交互技术，如brushing-and-linking其中，一个图上的点的选择突出显示所有其他图上的相同点，可用于探索数据中的模式。

平行坐标。如图2 d，平行坐标(||-coord)采用了不同的方法来可视化多元数据。我们不是在二维空间中绘制每一对变量的图形，而是在平行轴上反复绘制数据，然后将相应的点与直线连接起来。每条多线表示数据库中的单行，维度之间的交叉线通常表示反向相关。重新排序维度可以帮助模式查找，交互式查询也可以沿着一个或多个维度进行筛选。平行坐标的另一个优点是它们相对紧凑，因此可以同时显示多个变量。

回到顶部

地图

虽然地图似乎是可视化地理数据的一种自然方式，但它在设计方面有着悠久而丰富的历史。许多地图都是基于地图投影:将地球的三维几何形状映射到二维图像的数学函数。还有一些地图故意扭曲或抽象地理特征，以讲述更丰富的故事或突出特定的数据。

流的地图。通过在地理地图的顶部放置笔画线，一个流图可以描述一个量在空间和(含蓄地)在时间上的运动。流线通常编码大量的多元信息:路径点、方向、线粗细和颜色都可以用来向查看者显示信息的维度。图3一是查尔斯·米纳德笔下拿破仑进军莫斯科的悲剧的现代诠释。许多最伟大的流图也涉及到微妙的扭曲使用，因为地理是弯曲的，以适应或突出流。

等值线图的地图。数据通常按地理区域(如州)收集和汇总。通信此数据的标准方法是使用地理区域的颜色编码，从而产生一个等值线图的地图。图3 b虽然这是一种广泛使用的可视化技术，但它需要一些注意。一个常见的错误是对原始数据值(如人口)进行编码，而不是使用规范化值来生成密度图。另一个问题是，人们对阴影值的感知也会受到地理区域的潜在区域的影响。

渐变符号地图。是四余度映射的另一种选择渐变符号图在底层地图上放置符号。这种方法避免了地理区域与数据值的混淆，并允许可视化更多维度(例如，符号大小、形状和颜色)。除了简单的形状(如圆)外，渐变符号映射可能使用更复杂的符号(如饼图)。在图3 c圆的总大小代表一个州的人口，每一片表示某一BMI等级的人所占的比例。

变形图。一个统计图扭曲地理区域的形状，使该区域直接编码数据变量。一个常见的例子是，按照人口或国内生产总值(gdp)的比例重新绘制世界上每个国家的地图。已经创建了许多类型的地图;在图3 d我们使用道灵统计图，用一个大小的圆圈表示每个地理区域，其位置与真实的地理布局相似。在这个例子中，圆形区域表示每个州的肥胖人口总数，颜色表示肥胖人口占总人口的百分比。

回到顶部

层次结构

虽然有些数据只是简单的数字集合，但大多数数据可以被组织成自然的层次结构。考虑:空间实体，如县、州和国家;企业和政府的指挥结构;软件包和系统发育树。即使对于没有明显层次结构的数据，统计方法(例如，k-意味着集群)可以应用于经验地组织数据。特殊的可视化技术利用层次结构，允许快速的多尺度推断:个体元素的微观观察和大群体的宏观观察。

Node-link图。这个词树可以与层次结构，正如橡树的分形枝条可能反映了数据的嵌套。如果我们拿一棵树的二维蓝图，我们有一个可视化层次结构的流行选择:anode-link图。已经设计了许多不同的树布局算法;Reingold-Tilford算法，用于图4一在软件类的包层次结构上，产生整洁的结果，浪费的空间最小。

另一种可视化方案是系统树图(或簇)算法，它将树的叶节点放在同一层。因此，在图中图4 b，类(橙色叶节点)在圆的直径上，包(蓝色内部节点)在里面。使用极坐标而不是笛卡尔坐标具有令人愉悦的美感，同时可以更有效地利用空间。

如果我们疏忽了缩进树，操作系统普遍使用它来表示文件目录，以及其他应用程序(参见图4 c)．尽管缩进树需要过多的垂直空间，而且不方便进行多尺度推理，但它确实具有很高的效率互动探索树找到一个特定的节点。此外，它允许快速扫描节点标签，并且可以在层次结构的旁边显示文件大小等多变量数据。

邻接图。的邻接图是节点-链接图的空间填充变体;节点不是在层次结构中绘制父节点和子节点之间的链接，而是被绘制为固体区域(弧线或条)，它们相对于相邻节点的位置揭示了它们在层次结构中的位置。冰柱布局图4 d与第一个节点-链接图类似，根节点出现在顶部，子节点位于下面。但是，因为节点现在是空间填充的，所以我们可以对软件类和包的大小使用长度编码。这揭示了一个难以在节点-链接图中显示的附加维度。

日暴布局，如图所示图4 e，相当于冰柱布局，但在极坐标。两者都是使用分区布局实现的，分区布局还可以生成节点-链接图。类似地，前面的群集布局可用于在笛卡尔坐标或极坐标中生成空间填充邻接图。

附件图。的附件图也是空间填充，使用包容而不是邻接来表示层次结构。由本·施奈德曼于1991年介绍treemap递归地将区域细分为矩形。与邻接图一样，树中任何节点的大小很快就会显示出来。示例显示在图4 f使用填充(蓝色)强调边框;有时使用另一种饱和编码。Squarified树地图使用近似正方形的矩形，这比单纯的“切片和骰子”细分提供了更好的可读性和大小估计。Voronoi和jigsaw treemaps等更花哨的算法也存在，但不太常见。

通过填充圆形而不是细分矩形，我们可以生成一种几乎具有有机外观的不同类型的附件图。虽然它不像树地图那样有效地利用空间，但“浪费空间”的圆形布局，见图4 g，有效地揭示了等级制度。同时，使用面积判断可以快速比较节点大小。

回到顶部

网络

除了组织之外，我们可能希望通过可视化来探索数据的一个方面是关系。例如，给定一个社交网络，谁是谁的朋友?谁是核心球员?什么派系存在?谁(如果有人的话)在不同的群体之间充当桥梁?抽象地说，层次结构是网络的一种特殊形式:每个节点只有一个到其父节点的链接，而根节点没有链接。因此，节点-链接图也被用来可视化网络，但层次结构的丢失意味着需要不同的算法来定位节点。

数学家使用正式术语图描述一个网络。图形可视化的一个核心挑战是计算一个有效的布局。布局技术通常寻求定位密切相关的节点(以图的距离，例如节点之间的链接数量，或其他指标)在图中接近;关键的是,不相关的节点还必须放置得足够远，以区分关系。有些技术可能寻求优化其他视觉特征，例如，通过最小化边缘交叉的数量。

指定布局。一种常见且直观的网络布局方法是将图建模为一个物理系统:节点是相互排斥的带电粒子，而链接是将相关节点拉到一起的阻尼弹簧。然后对这些力进行物理模拟，确定节点位置;避免计算所有成对力的近似技术使大量节点的布局成为可能。此外，互动性允许用户指导布局和摆动节点以消除链接的歧义。这样一个指定的布局是理解一般无向图结构的一个很好的起点。在图5一个我们用一种力导向的布局来观察维克多·雨果的经典小说中的人物网络，《悲惨世界》。节点颜色描述由社区检测算法计算的集群成员关系。

弧图。一个弧图，见图5 b，使用节点的一维布局，用圆弧表示链接。尽管圆弧图可能不能像二维布局那样有效地传达图的整体结构，但有了良好的节点排序，很容易识别出小团体和桥梁。此外，与缩进树布局一样，可以很容易地在节点旁边显示多元数据。以一种揭示底层集群结构的方式对节点进行排序的问题在形式上被称为系列化在可视化、统计学甚至考古学方面都有广泛的应用。

矩阵的观点。数学家和计算机科学家经常从它的角度来考虑图邻接矩阵:行中的每个值我和列j在矩阵中对应从节点的链接我到节点j．给定这种表示，一个明显的可视化是:只显示矩阵!使用颜色或饱和度代替文本可以更快地感知与链接相关的值。

所有可视化都有一个共同的“DNA”，即数据属性和可视化属性(如位置、大小、形状和颜色)之间的一组映射，定制化的可视化总是可以通过改变这些编码来构建。

序列化问题同样适用于矩阵视图，见图5 c，因此行和列的顺序很重要:这里我们使用由社区检测算法生成的分组来排列显示。虽然在矩阵视图中路径跟踪比在节点-链接图中更困难，但矩阵有许多补偿优势。当网络变得庞大和高度连接时，节点-链接图经常退化为巨大的交叉线的毛球。然而，在矩阵视图中，线是不可能交叉的，通过有效的排序，可以快速发现集群和桥。允许交互分组和矩阵的重新排序有助于对网络结构进行更深入的探索。

回到顶部

结论

我们的旅程已经结束，希望读者发现这些例子既有趣又实用。虽然我们已经访问了许多可视化编码和交互技术，但是还有更多的可视化物种存在于野外，还有其他的正在等待被发现。诸如生物信息学和文本可视化等新兴领域正在推动研究人员和设计师不断制定新的和创造性的表达方式，或寻找更强大的方法来应用经典。在任何一种情况下，所有可视化的基础DNA都是相同的:将数据变量映射到视觉特征(如位置、大小、形状和颜色)的原则。

当你离开动物园回到野外的时候，试着解构你所看到的各种各样的景象。也许你可以设计一个更有效的展示方式?

额外的资源