PDF可视化动物园之旅
强大的可视化技术概览，从显而易见到晦涩难懂
Jeffrey Heer、Michael Bostock 和 Vadim Ogievetsky，斯坦福大学
得益于传感、网络和数据管理方面的进步，我们的社会正以惊人的速度产生数字信息。据估计，仅在 2010 年，我们将产生 1,200 艾字节的数据——相当于美国国会图书馆内容的 6000 万倍。在这庞大的数据洪流中，蕴藏着关于我们如何开展业务、政府管理和个人生活的宝贵信息。为了充分利用这些信息，我们必须找到有意义地探索、关联和交流数据的方法。
可视化的目标是通过利用人类视觉系统高度调整的能力来观察模式、发现趋势和识别异常值，从而帮助我们理解数据。精心设计的视觉表示可以将认知计算替换为简单的感知推断，并提高理解力、记忆力和决策能力。通过使数据更易于访问和更具吸引力，视觉表示还可以帮助更多不同的受众参与探索和分析。挑战在于创建有效且引人入胜的可视化，使其适合数据。
创建可视化需要许多细致的判断。必须确定要提出的问题，识别适当的数据，并选择有效的视觉编码，将数据值映射到图形特征，例如位置、大小、形状和颜色。挑战在于，对于任何给定的数据集，视觉编码的数量——以及可能的visualization设计空间——都非常庞大。为了指导这个过程，计算机科学家、心理学家和统计学家研究了不同的编码如何促进对数字、类别和网络等数据类型的理解。例如，图形感知实验发现，空间位置（如散点图或条形图）可以最准确地解码数值数据，并且通常优于角度、一维长度、二维面积、三维体积和颜色饱和度等视觉变量。因此，最常见的数据图形（包括条形图、折线图和散点图）使用位置编码也就不足为奇了。然而，我们对图形感知的理解仍然不完整，必须与交互设计和美学适当平衡。
本文简要介绍了“可视化动物园”，展示了可视化和交互各种数据集的技术。在许多情况下，简单的数据图形不仅足够，而且可能是更可取的。这里我们重点介绍一些更复杂和不寻常的技术，它们处理复杂的数据集。毕竟，你去动物园不是为了看吉娃娃和小浣熊；你是为了欣赏雄伟的北极熊、优雅的斑马和可怕的苏门答腊虎。类似地，我们涵盖了一些更奇特的（但实际上很有用！）视觉数据表示形式，从最常见的时间序列数据开始；继续讨论统计数据和地图；然后以层次结构和网络结束这次旅程。一路走来，请记住，所有可视化都共享一个共同的“DNA”——一组数据属性与视觉属性（如位置、大小、形状和颜色）之间的映射——并且总是可以通过改变这些编码来构建定制的可视化物种。
此处显示的大多数可视化都附带有交互式示例。这些实时示例是使用 Protovis 创建的，Protovis 是一种用于基于 Web 的数据可视化的开源语言。要了解有关可视化如何制作的更多信息（或复制粘贴以供自己使用），只需在页面上“查看源代码”即可。所有示例源代码均发布到公共领域，对重用或修改没有任何限制。但请注意，这些示例仅适用于支持 SVG（可缩放矢量图形）的现代、符合标准的浏览器。支持的浏览器包括最新版本的 Firefox、Safari、Chrome 和 Opera。遗憾的是，Internet Explorer 8 及更早版本不支持 SVG，因此无法用于查看交互式示例。
时间序列数据
时间序列数据——随时间变化的值集——是最常见的记录数据形式之一。时变现象对于金融（股票价格、汇率）、科学（温度、污染水平、电势）和公共政策（犯罪率）等许多领域至关重要。通常需要同时比较大量时间序列，并且可以从多种可视化方式中进行选择。
指数图
对于某些形式的时间序列数据，原始值不如相对变化重要。考虑一下，投资者更关心股票的增长率，而不是其具体价格。多只股票可能具有截然不同的基准价格，但在标准化后可以进行有意义的比较。指数图是一种交互式折线图，它显示基于选定指数点的时间序列数据集合的百分比变化。例如，图 1A 中的图像显示了 2005 年 1 月购买的选定股票价格的百分比变化：人们可以看到当时投资亚马逊、苹果或谷歌的人所享受的稳步上涨。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：雅虎财经
堆叠图
其他形式的时间序列数据可能更适合以聚合方式查看。通过将面积图相互堆叠，我们得到了时间序列值的视觉总和——堆叠图。这种类型的图表（有时称为流图）描绘了聚合模式，并且通常支持向下钻取到单个系列的子集。图 1B 中的图表显示了过去十年美国失业工人的人数，按行业细分。虽然此类图表近年来已被证明很受欢迎，但它们确实存在一些明显的局限性。堆叠图不支持负数，并且对于不应求和的数据（例如温度）毫无意义。此外，堆叠可能会使准确解释位于其他曲线之上的趋势变得困难。交互式搜索和过滤通常用于弥补这个问题。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：美国劳工统计局
小型倍数图
除了堆叠之外，多个时间序列可以绘制在同一坐标轴内，如指数图所示。但是，将多个系列放在同一空间中可能会产生重叠曲线，从而降低可读性。另一种方法是使用小型倍数图：在自己的图表中显示每个系列。在图 1C 中，我们再次看到了失业工人的数量，但在每个行业类别中进行了标准化。现在，我们可以更准确地看到每个行业的总体趋势和季节性模式。虽然我们正在考虑时间序列数据，但请注意，小型倍数图几乎可以为任何类型的可视化构建：条形图、饼图、地图等。这通常比尝试将所有数据强制放入单个绘图中产生更有效的可视化效果。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：美国劳工统计局
水平线图
当您想一次比较更多时间序列时会发生什么？水平线图是一种在保持分辨率的同时增加时间序列视图数据密度的技术。考虑图 1D 中显示的四个图表。第一个是标准面积图，正值着色为蓝色，负值着色为红色。第二个图表将负值“镜像”到与正值相同的区域，使面积图的数据密度加倍。第三个图表——水平线图——通过将图表划分为带状区域并分层以创建嵌套形式，再次使数据密度加倍。结果是图表保留了数据分辨率，但仅使用了四分之一的空间。虽然水平线图需要一些时间来学习，但已发现当图表尺寸变得非常小时，它比标准绘图更有效。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：美国劳工统计局
统计分布
其他可视化旨在揭示一组数字是如何分布的，从而帮助分析师更好地理解数据的统计属性。分析师通常希望将他们的数据拟合到统计模型中，以检验假设或预测未来值，但是模型选择不当可能会导致错误的预测。因此，可视化的一种重要用途是探索性数据分析：深入了解数据如何分布，从而为数据转换和建模决策提供信息。常用技术包括直方图，它显示分组到箱中的值的流行程度；以及箱线图，它可以传达统计特征，例如均值、中位数、四分位数边界或极端异常值。此外，还存在许多其他技术用于评估分布和检查多个维度之间的交互作用。
茎叶图
对于评估数字集合，茎叶图是直方图的替代方案之一。它通常根据第一个有效数字对数字进行分箱，然后根据第二个有效数字堆叠每个箱内的值。这种极简主义表示形式使用数据本身来绘制频率分布，替换了传统直方图条形图中“信息空白”的条形，并允许人们评估整体分布和每个箱的内容。在图 2A 中，茎叶图显示了在亚马逊 Mechanical Turk 上完成众包任务的工人的完成率分布。请注意多个集群：一个组聚集在较高的完成率水平（99-100%）附近；另一个极端是一组 Turker，他们在一组中仅完成少量任务（~10%）。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：斯坦福可视化小组
Q-Q 图
虽然直方图和茎叶图是评估频率分布的常用工具，但 Q-Q（分位数-分位数）图是一个更强大的工具。Q-Q 图通过绘制两个概率分布的 分位数 来比较这两个概率分布。如果两者相似，则绘制的值将大致沿中心对角线排列。如果两者呈线性相关，则值也将沿直线排列，但斜率和截距各不相同。
图 2B 显示了与三个统计分布相比，相同的 Mechanical Turk 参与数据。请注意，当与均匀分布和正态（高斯）分布进行比较时，数据如何形成三个不同的组成部分：这表明具有三个组成部分的统计模型可能更合适，并且我们确实在最终图中看到，拟合的三个正态分布的混合提供了更好的拟合。虽然功能强大，但 Q-Q 图有一个明显的局限性，即它的有效使用要求查看者具备一定的统计知识。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：斯坦福可视化小组
SPLOM（散点图矩阵）
其他可视化技术试图表示多个变量之间的关系。多元数据经常出现并且出了名的难以表示，部分原因是难以在心理上描绘超过三个维度的数据。克服此问题的一种技术是使用小型倍数散点图，显示变量之间的一组成对关系，从而创建 SPLOM（散点图矩阵）。SPLOM 可以目视检查任何一对变量之间的相关性。
在图 2C 中，散点图矩阵用于可视化汽车数据库的属性，显示马力、重量、加速度和排量之间的关系。此外，诸如刷选和联动之类的交互技术（其中一个图表上点的选择会突出显示所有其他图表上的相同点）可用于探索数据中的模式。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：GGobi
平行坐标
图 2D 中所示的平行坐标 (||-coord) 采用不同的方法来可视化多元数据。我们不是在二维中绘制每对变量，而是重复在平行轴上绘制数据，然后用线连接相应的点。每条折线代表数据库中的一行，维度之间的线交叉通常表示负相关。重新排序维度可以帮助查找模式，交互式查询也可以用于沿一个或多个维度进行过滤。平行坐标的另一个优点是它们相对紧凑，因此可以同时显示许多变量。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：GGobi
地图
虽然地图似乎是可视化地理数据的自然方式，但它具有悠久而丰富的设计历史。许多地图都基于制图投影：一种将地球的三维几何形状映射到二维图像的数学函数。其他地图有意扭曲或抽象地理特征，以讲述更丰富的故事或突出显示特定数据。
流向地图
通过在地理地图之上放置描边线，流向地图可以描绘数量在空间和（隐含地）时间上的移动。流线通常编码大量多元信息：路径点、方向、线粗细和颜色都可以用于向查看者呈现信息维度。图 3A 是对查尔斯·米纳德 (Charles Minard) 描绘拿破仑入侵莫斯科的惨败行军的现代诠释。许多最伟大的流向地图还涉及对扭曲的巧妙运用，因为地理被修改以适应或突出显示流向。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
基于 查尔斯·米纳德 的作品
等值区域地图
数据通常按地理区域（例如州）收集和汇总。传达此数据的标准方法是使用地理区域的颜色编码，从而生成等值区域地图。图 3B 使用颜色编码来传达美国每个州的肥胖症患病率。虽然这是一种广泛使用的可视化技术，但它需要小心。一个常见的错误是编码原始数据值（例如人口），而不是使用归一化值来生成密度图。另一个问题是，人们对阴影值的感知也可能受到地理区域底层面积的影响。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：国家慢性病预防与健康促进中心
分级符号地图
等值区域地图的替代方案是分级符号地图，它在底层地图上放置符号。这种方法避免了将地理区域与数据值混淆，并允许可视化更多维度（例如，符号大小、形状和颜色）。除了圆形等简单形状外，分级符号地图还可以使用更复杂的字形，例如饼图。在图 3C 中，总圆圈大小表示一个州的人口，每个切片表示具有特定 BMI 等级的人的比例。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：国家慢性病预防与健康促进中心
面积图
面积图扭曲了地理区域的形状，以便该区域直接编码数据变量。一个常见的例子是重新绘制世界上的每个国家/地区，使其大小与人口或国内生产总值成比例。已经创建了许多类型的面积图；在图 3D 中，我们使用了 Dorling 面积图，它用一个大小合适的圆圈表示每个地理区域，并将其放置为类似于真实的地理配置。在本例中，圆形面积编码每个州的肥胖人口总数，颜色编码肥胖人口占总人口的百分比。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：国家慢性病预防与健康促进中心
层次结构
虽然有些数据只是数字的平面集合，但大多数数据都可以组织成自然的层次结构。考虑：空间实体，例如县、州和国家；企业和政府的指挥结构；软件包和系统发育树。即使对于没有明显层次结构的数据，也可以应用统计方法（例如，k-均值聚类）来经验性地组织数据。存在特殊的可视化技术来利用层次结构，从而实现快速的多尺度推断：对单个元素的微观观察和对大型组的宏观观察。
节点链接图
树一词与层次结构互换使用，因为橡树的分形分支可能反映数据的嵌套。如果我们采用树的二维蓝图，我们就有了可视化层次结构的流行选择：节点链接图。已经设计了许多不同的树布局算法；图 4A 中用于软件包层次结构软件类的 Reingold-Tilford 算法产生了一个整洁的结果，浪费的空间最少。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Flare 可视化工具包 (http://flare.prefuse.org)
另一种可视化方案是树状图（或聚类）算法，它将树的叶节点放置在同一级别。因此，在图 4B 的图表中，类（橙色叶节点）位于圆的直径上，包（蓝色内部节点）位于内部。使用极坐标而不是笛卡尔坐标具有令人愉悦的美感，同时更有效地利用空间。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Flare 可视化工具包 (http://flare.prefuse.org)
我们可能会忽略缩进树，操作系统普遍使用它来表示文件目录以及其他应用程序（参见图 4C）。虽然缩进树需要过多的垂直空间，并且不利于多尺度推断，但它确实允许对树进行有效的交互式探索，以查找特定节点。此外，它允许快速扫描节点标签，并且可以将文件大小等多元数据显示在层次结构旁边。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Flare 可视化工具包 (http://flare.prefuse.org)
邻接图
邻接图是节点链接图的空间填充变体；节点不是在层次结构中绘制父节点和子节点之间的链接，而是绘制为实心区域（弧形或条形），并且它们相对于相邻节点的位置揭示了它们在层次结构中的位置。图 4D 中的冰柱布局类似于第一个节点链接图，因为根节点出现在顶部，子节点位于下方。但是，由于节点现在是空间填充的，我们可以使用长度编码来表示软件类和包的大小。这揭示了一个额外的维度，这在节点链接图中很难显示。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Flare 可视化工具包 (http://flare.prefuse.org)
图 4E 中显示的旭日图布局等效于冰柱布局，但在极坐标中。两者都是使用分区布局实现的，分区布局也可以生成节点链接图。类似地，之前的聚类布局可用于在笛卡尔坐标或极坐标中生成空间填充邻接图。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Flare 可视化工具包 (http://flare.prefuse.org)
包围图
包围图也是空间填充的，它使用包含而不是邻接来表示层次结构。Ben Shneiderman 在 1991 年引入的树状图以递归方式将区域细分为矩形。与邻接图一样，树中任何节点的大小都很快显现出来。图 4F 中显示的示例使用填充（蓝色）来强调包围；有时使用替代饱和度编码。平方树状图使用近似正方形的矩形，与幼稚的“切片和切块”细分相比，它提供更好的可读性和大小估计。还存在更高级的算法，例如 Voronoi 和拼图树状图，但不太常见。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Flare 可视化工具包 (http://flare.prefuse.org)
通过打包圆形而不是细分矩形，我们可以生成一种不同类型的包围图，它具有几乎有机的外观。虽然它没有像树状图那样有效地利用空间，但图 4G 中显示的圆形打包布局的“浪费空间”有效地揭示了层次结构。与此同时，可以使用面积判断快速比较节点大小。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Flare 可视化工具包 (http://flare.prefuse.org)
网络
除了组织之外，我们可能希望通过可视化探索的数据的一个方面是关系。例如，给定一个社交网络，谁与谁是朋友？谁是中心人物？存在哪些派系？谁（如果有的话）充当不同群体之间的桥梁？抽象地说，层次结构是网络的专门形式：每个节点都恰好有一个指向其父节点的链接，而根节点没有链接。因此，节点链接图也用于可视化网络，但层次结构的丢失意味着需要不同的算法来定位节点。
数学家使用正式术语图来描述网络。图可视化中的一个核心挑战是计算有效的布局。布局技术通常试图将密切相关的节点（在图距离方面，例如节点之间的链接数或其他指标）放置在绘图中的较近位置；至关重要的是，不相关的节点也必须放置得足够远，以区分关系。某些技术可能会寻求优化其他视觉特征——例如，通过最小化边交叉的数量。
力导向布局
网络布局的一种常见且直观的方法是将图建模为物理系统：节点是相互排斥的带电粒子，链接是阻尼弹簧，将相关节点拉到一起。然后，对这些力进行物理模拟来确定节点位置；避免计算所有成对力的近似技术可以实现大量节点的布局。此外，交互性允许用户指导布局并抖动节点以消除链接歧义。这种力导向布局是理解一般无向图结构的良好起点。在图 5A 中，我们使用力导向布局来查看维克多·雨果的经典小说《悲惨世界》章节中的人物共现网络。节点颜色描绘了社区检测算法计算的聚类成员资格。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Knuth, D. E. 1993. 斯坦福图数据库：组合计算平台，Addison-Wesley。
弧形图
图 5B 中所示的弧形图使用节点的一维布局，用圆形弧线表示链接。虽然弧形图可能不如二维布局有效地传达图的整体结构，但在节点排序良好时，很容易识别派系和桥梁。此外，与缩进树布局一样，多元数据可以轻松地与节点一起显示。对节点进行排序以揭示底层聚类结构的问题在形式上称为序列化，并在可视化、统计甚至考古学中具有多种应用。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Knuth, D. E. 1993. 斯坦福图数据库：组合计算平台，Addison-Wesley。
矩阵视图
数学家和计算机科学家通常从邻接矩阵的角度来考虑图：矩阵中第 i 行和第 j 列中的每个值对应于从节点 i 到节点 j 的链接。给定这种表示形式，一个明显的可视化方法是：直接显示矩阵！使用颜色或饱和度而不是文本可以更快地感知与链接关联的值。
矩阵视图（如图 5C 所示）的序列化问题与弧形图一样适用，因此行和列的顺序很重要：在这里，我们使用社区检测算法生成的组来排序显示。虽然在矩阵视图中路径跟踪比在节点链接图中更难，但矩阵具有许多补偿优势。随着网络变得庞大且高度连接，节点链接图通常退化为线条交叉的巨大毛球。但是，在矩阵视图中，线条交叉是不可能的，并且通过有效的排序，人们可以快速发现聚类和桥梁。允许对矩阵进行交互式分组和重新排序有助于更深入地探索网络结构。
点击查看全尺寸版本（需要兼容 SVG 的浏览器）
来源：Knuth, D. E. 1993. 斯坦福图数据库：组合计算平台，Addison-Wesley。
结论
我们的旅程即将结束，希望读者发现这些例子既有趣又实用。虽然我们参观了许多视觉编码和交互技术，但在野外还存在更多种类的可视化，还有一些等待发现。生物信息学和文本可视化等新兴领域正在推动研究人员和设计人员不断制定新的和富有创意的表示形式，或找到更强大的方法来应用经典。无论哪种情况，所有可视化的底层 DNA 仍然相同：数据变量与位置、大小、形状和颜色等视觉特征的原则性映射。当您离开动物园并回到野外时，请尝试解构您路径中遇到的各种可视化。也许您可以设计出更有效的显示方式？
问
其他资源
Few, S. 2009. 现在我明白了：定量分析的简单可视化技术。Analytics Press。
Tufte, E. 1983. 定量信息的视觉显示。Graphics Press。
Tufte, E. 1990. 设想信息。Graphics Press。
Ware, C. 2008. 设计的视觉思维。Morgan Kaufmann。
Wilkinson, L. 1999. 图形语法。Springer。
可视化开发工具
Prefuse (http://prefuse.org/)：用于信息可视化的 Java API。
Prefuse Flare (http://flare.prefuse.org/)：Adobe Flash Player 中用于数据可视化的 ActionScript 3 库。
Processing (http://processing.org/)：用于图形和交互的流行语言和 IDE。
Protovis (http://vis.stanford.edu/protovis/)：用于基于 Web 的可视化的 JavaScript 工具。
可视化工具包 (http://vtk.org/)：用于 3D 和科学可视化的库。
喜欢还是讨厌？请告诉我们
Jeffrey Heer 是斯坦福大学计算机科学助理教授，他的研究方向是人机交互、可视化和社会计算。他的研究调查了理解大型数据集所涉及的感知、认知和社会因素，从而产生了用于视觉分析和交流的新型交互系统。他还领导了 Prefuse、Flare 和 Protovis 可视化工具包的设计，这些工具包已被研究人员、公司和数千名数据爱好者使用。Heer 是 2009 年 CHI 最佳论文奖以及 IBM 和英特尔的教员奖的获得者。2009 年，他被《麻省理工科技评论》评为 TR35。他拥有加州大学伯克利分校计算机科学学士、硕士和博士学位。
Michael Bostock 于 2000 年获得普林斯顿大学计算机科学学士学位。他目前是斯坦福大学计算机科学系博士生。他的研究兴趣包括信息可视化和软件设计。在加入斯坦福大学之前，他曾在谷歌担任 staff engineer，在那里他开发了搜索质量评估方法、实验性搜索用户界面和可重用软件组件，例如 Google Collections Library。他目前正在开发 Protovis 可视化工具包。
Vadim Ogievetsky 是斯坦福大学的人机交互硕士生。他是 Protovis 的核心贡献者，Protovis 是一个基于 Web 的开源可视化工具包。Ogievetsky 获得了牛津大学数学和计算机科学一等学士学位，他在那里专攻线性代数和编程语言。除了可视化之外，他的兴趣还包括大规模并行计算和计算机控制的制造过程。
© 2010 1542-7730/10/0500 $10.00
最初发表于 Queue vol. 8, no. 5—
在 数字图书馆 中评论本文
更多相关文章
David Crandall, Noah Snavely - 使用互联网照片集建模人和地点
本文介绍了我们使用在线照片集重建关于世界及其居民（在全球和本地范围内）信息的工作。这项工作是由社交内容共享网站的急剧增长推动的，这些网站创建了大量的用户生成视觉数据的在线集合。仅 Flickr.com 目前就托管了超过 60 亿张由超过 4000 万独立用户拍摄的图像，而 Facebook.com 表示，它每天增长近 2.5 亿张照片。
Jeffrey Heer, Ben Shneiderman - 视觉分析的交互式动态
数字数据规模和可用性的不断提高为公共政策、科学发现、商业战略甚至我们的个人生活提供了非凡的资源。然而，为了充分利用这些数据，用户必须能够理解它：提出问题、发现感兴趣的模式以及识别（并可能纠正）错误。与数据管理系统和统计算法相配合，分析需要针对领域特定意义的人为判断，以确定数据中发现的聚类、趋势和异常值。
Robert DeLine, Gina Venolia, Kael Rowan - 使用代码地图进行软件开发
为了更好地了解专业软件开发人员如何使用其代码的视觉表示，我们采访了微软的九名开发人员，以确定常见场景，然后调查了 400 多名开发人员，以更深入地了解这些场景。
Brendan Gregg - 可视化系统延迟
当 I/O 延迟以视觉热图形式呈现时，可能会出现一些有趣而美丽的模式。这些模式提供了对系统实际性能以及最终用户应用程序体验到的延迟类型的深入了解。在这些模式中看到的许多特征仍然不为人所知，但到目前为止，它们的分析揭示了以前未知的系统行为。
© 保留所有权利。