排名可视化的图形知觉研究（Ranked-List Visualization: A Graphical Perception Study）

将排名列表进行可视化是一个非常常见的任务，现在已经存在了很多种可视化方法。这篇文章首先对现有方法做了很好的总结和分析，然后设置了详细的用户知觉实验，来比较不同的排名列表可视化方法。

• 背景

Bar chart是我们最常用的chart —— 使用bar作为mark，使用length作为channel。众多周知，position是最有效的channel。但实际上，在baseline的帮助下，length的效果和position差不多。

在所有的排名列表可视化方法中，Horizontal bar chart占据主导地位。一方面，水平的放置更加利于label的摆放，另一方面，一般PC的屏幕上，水平方向的分辨率更大，可以带来更大的精度。然而，这个可视化受限于屏幕的大小，若列表项的数量特别多时，需要增加scroll。Scroll的引进不会影响到水平方向的精确感知，但会浪费用户的时间和精力。

• wrapped bars

Stephen Few在2013年提出了Wrapped bars [1]，旨在消除掉scrolling的影响。他将整个列表划分成C列，通过压缩水平方向的长度来使得屏幕上能放置所有的bar。这样做的坏处在于，将不会有一个统一的baseline，同时每个bar的长度也比以前窄了很多。

• packed bars

Xan Gregg在2017年提出了Packed bars [2]，希望能最大地利用屏幕上的空间。因为bar越长，bar的精度就越高。他使用一个贪心的算法来布局。这样布局会造成原有顺序的丢失，且除了第一列外，不再具有baseline。

• piled bars

MehmetAdilYalçın在2017年提出了Piled bars [3]。与wrapped bars类似，他将整个列表划分成C列，所有的列都共享一个baseline，然后使用颜色和阴影来区分不同的堆积次序。这样做的好处在于，每个bar都利用了最大的水平分辨率，但是，极端情况下，label会相互重叠。

• zvinca plot

Stephen Few在2017年提出了Zvinca plot [4]。与piled bars类似，只是将bar变成了dot，channel相应地由length变成了position。这样做的好处在于，不需要使用颜色和阴影，同时dot的label布局将会更加自由，以减少重叠。

• treeMap

treeMap [5]是一个常见的用于表示层次结构数据的可视化方法，但是最近越来越多的人使用它来可视化排名列表。该篇文章中所使用的布局方法是squarified treemap layouts。这种布局之下，每个item的位置隐含了排名信息。Treemap的问题在于使用了面积来编码value，但是面积并不是一个精度很高的channel。

• bubble chart

与treeMap类似的还有packed bubble chart [6]，它使用圆而不是矩形来作为mark。在布局上，这个算法更依赖于碰撞检测，所以每个项的位置几乎没有任何含意。

文章把这7中方法全总结了一边，结果如下。

为了实际比较这些可视化方法，作者设计了3个实验任务。

• 任务1：给定一个选中的项，要求被试给出该项的排名等级。
• 任务2：给定两个选中的项，要求被试给出该两项的值的差距
• 任务3：要求被试评估所有项的平均值。

用户总共选取了180个被试（from Amazon Mechanical Turk）。每个被试将会被分配一个可视化形式（共6个，无packed bubble chart），1个可视化任务（共3个），3个数据集（75，150，300），完成10次试验。

分析结果之前，作者做了两个假设

• 假设1：SB将会显著慢于其他可视化形式。因为scrolling会耗费大量的时间。
• 假设2：TM的正确率将会显著低于其他可视化形式。因为面积不是一个很精确的channel

结果如下：

其实该篇论文的结果并不是特别好。我这里挑选了一部分有意思的，来进行解释“

• 针对假设1，综合来看SB确实比其他的慢一些，但某些情况下，差距不明显。
• 针对假设2，TM的正确率从来没有最低过，某些情况下还是最佳。拒绝假设2。
• 在任务1中，WB的表现最好，TM的表现非常不错。
• 在任务2中，ZP的正确率最低，TM仍旧有非常好的表现。
• 在任务3中，treeMap和PaB都有较高的错误率。
• 结合数据规模来看，在任务2中，只有SB的时间随着数据量的增大而增加。在任务3中，ZP和TM的时间反而随着数据量的增大而减少。

在我看来，这篇文章有一些值得商榷的东西

• 数据规模太小了，而且没有区分度
• treeMap是一个严重依赖于布局算法的可视化形式
• 这几个任务都比较基础，我们可能需要一些更高级的分析任务
• 结果分析不是很严谨，没有统计学上的结果分析

总的来说，这篇文章对排名列表可视化做了一个非常好的总结。

[1] Few, Stephen, and Perceptual Edge. “Wrapping Graphs to Extend Their Limits.” Visual Business Intelligence Newsletter (2013).

[2] Xan Gregg. 2017. Introducing the Packed Bars Chart Type. In Poster Proceedings of IEEE VIS .

[3] Mehmet Adil Yalçın, Niklas Elmqvist, and Benjamin B Bederson. 2017. Piled Bars: Dense Visualization of Numeric Data. In Poster Proceedings of the Graphics Interface Conference .

[4] Yalçin, Mehmet Adil, Niklas Elmqvist, and Benjamin B. Bederson. “Raising the Bars: Evaluating Treemaps vs. Wrapped Bars for Dense Visualization of Sorted Numeric Data.” Graphics Interface . 2017.

[5] Johnson, Brian, and Ben Shneiderman. Tree-maps: A space-filling approach to the visualization of hierarchical information structures . IEEE, 1991.

[6] Wang, Weixin, et al. “Visualization of large hierarchical data by circle packing.” Proceedings of the SIGCHI conference on Human Factors in computing systems . ACM, 2006.