源代码:研究信息图表的 5 条规则
爱心树(地图)
自 1990 年Ben Shneiderman发明树状图以来,树状图迅速普及。树状图 迅速普及的原因之一是它清晰地展现了层次信息。该技术的学习难度很低,但却能很好地洞察结构和数量。
Shneiderman 博士正在处理一个由 14 个人共享的 80MB 硬盘。这个硬盘足够大,可以容纳相当混乱的目录结构,但又太小,无法为人们提供“无限”空间。很快,他意识到需要一种方法来直观地查找深埋在目录结构中的大 美国移动数据库 文件。传统的分层可视化主要显示结构,而不是数量,并且留下了大量未使用的屏幕空间。在尝试了几种方法后,Shneiderman 博士有了“啊哈!”的体验:将屏幕分成交替的水平和垂直矩形可以显示层次结构和已用空间的百分比。
探索树形图时,请注意以下三个属性:
它们有一个以“遏制”为代表的层次结构。
它们的数量以面积来表示。
它们之间存在部分与整体的关系。
树形图的层次结构显示为子节点“位于”父节点“内部”。孙节点位于子节点内部。节点的数量由节点所占的面积表示。这种关系与包含关系相结合,创建了部分与整体的关系。底层的节点是组成整个树形图的部分。如果这些实验性布局并不是特别受欢迎,而且它们确实存在感知和屏幕空间方面的问题,但它们代表了人们不断突破极限并尝试实验来改进当前的可视化技术。树形图布局中最有用的进步之一是缓冲树形图。只需在每个节点上添加亮度渐变,布局就不再需要任何边框线。这大大减少了混乱,并释放了像素来帮助表示数据。(而且它们看起来真的很酷!)
垫状树状图。
垫状树状图。
考虑到树状图的出现时间如此之短,它的普及程度以及为改进它而付出的努力之多令人惊叹。它们提供了如此多的信息,既传达了结构,又传达了数量,同时又高效地利用了屏幕空间。它们要求的回报很少,只需要几分钟的介绍,观众就能完全理解它们。感谢 Shneiderman 博士提供如此精彩的可视化!
您切断树的一个分支,每个分支也是如此。
树形图的层次结构。
树形图的层次结构。
有几种算法可以创建树形图中的布局。这些算法中最简单的是“切片和切块”布局。不幸的是,切片和切块会产生薄片,层次结构难以阅读。很难比较具有极高或极低纵横比的区域的面积。接近一的比例更容易比较。此属性导致了方形布局的创建。此算法尝试确保每个节点尽可能保持正方形。方形树形图更易于阅读,因为每个节点都有相似的纵横比,并且纵横比接近一。
切片和切块树形图
切片和切块树形图
方格树状图
方格树状图
某些树形图布局的另一个问题是稳定性。在制作树形图动画时,稳定性非常重要。如果节点的大小在不稳定的布局中变化太大,节点就会从一个位置跳到另一个位置。这种不连续的移动很难跟踪,并且使布局无法用于动画。有五种常用的布局算法,每种都有优点和缺点。
二叉树 – 部分有序,长宽比不太好,稳定
有序 – 部分有序,中等纵横比,中等稳定性
SliceAndDice – 有序,长宽比很差,稳定
Squarified – 无序,最佳纵横比,中等稳定性
条带 – 有序,中等纵横比,中等稳定性
您可以在此处看到 Java 小程序对每种方法的优缺点的演示。
除了这些算法之外,还有一些不使用矩形的布局。Michael Balzer的 Voronoi 树形图使用 Voronoi 镶嵌细分空间。Krzysztof Onak和Anastasios Sidiropoulos的布局具有可保证的规律性。Kai Wetzel创建了圆形树形图,无需考虑任何纵横比,但布局中有大量空白空间。