数据可视化

一，数据可视化

 

数据可视化是指借助于图像化（二维、三维）、交互式、行为艺术等手段，清晰有效地传达与沟通信息。相比于文本和数字，人类“天生”更适合用视觉的方式看数据。人的全身约70%的感受体（Sense Receptor)和40%的大脑皮质和视觉处理有关。和视觉感知有关的大脑皮质位于大脑的尾部位置，具有极快和有效的处理速度。我们在“看”东西时，毫不费力。而和认知相关的大脑皮质位于大脑的前端，在处理时就要缓慢和低效得多。

 

 

英语中有句成语“A picture isworth a thousand words”(一图胜千言)。以下表格中的销售数据，精确地列出了某个区域（国内、国外）在2009年的单月销售数据。但是当我们想要从这组数据中找出模式（Pattern）、趋势（Trend）或者例外（Exception），想要读懂这组数字背后隐藏的故事时，这组表格很难即快又有效地实现目的。

 

 

让我们看看基于同样的数据，使用趋势图，效果是怎样的。

 

从趋势图中，我们能够很快地知道：

 

1.   国内销售数据显著地高于国外销售数据

2.   国内销售数据从在一年内是向上的趋势

3.    国内销售数据展示了很稳定的增长趋势，在头两个月的销售额连续上升后，在第三个月会有下滑，然后又是经历连续两个月的销量上升

4.   国外销售数据比较平稳，但是在八月份有个“明显” 的销售额下滑

 

这些“故事”当我们看用表格罗列的一堆数字时，很难直观地一眼看出，但是用图像的方式。这就是数据可视化的优势。

 

二，好的数据可视化

 

好的数据可视化应该做到容易地（Easily）、高效地（Efficiently）、准确地（Accurately）、有意义地（Meaningfully）地将数据背后的故事展示出来。要做到这点，应该借助科学，而不是艺术。如前所述，大脑在处理图像信息时，要高效得多。数据可视化，应该借助人类的视觉感知（Visual Perception），使得大脑在处理视觉信息时的天生优势，得以发挥。

 

理解短期记忆的局限性（Understanding the limits of short-term memory）

 

人的记忆系统具有三种基本类型的记忆：Iconicmemory，Short-term memory，Long-termmemory。Iconic Memory就像计算机系统中缓冲区（Buffer），被人感知到的视觉图像被保存在那以便进一步地处理。Short-term memory是信息被有意识处理的阶段，关于Short-term memory，有三个最重要的事实：

 

I，            它是临时性的

II，          它的部分功能被用于视觉信息的处理

III，        它的容量是有限的

 

短期记忆的容量有限性也是为什么属于同一块的信息不应该被分割。一旦信息变成不可见了，除非它已经成为了长期记忆（Long-term）一部分，否则信息就不可得了。

 

视觉化编码数据（Visually encoding data for rapid perception）

 

在视觉感知（Visual  Perception）的早期阶段，先意识处理（Pre-attentive Processing）能够快速地识别一系列的视觉属性（VisualAttributes）。相比较于有意识处理（Attentive Processing），先意识处理的效率要高很多。比如，以下一组数字中，你能在多快时间内输出有多少个数字5。

正确答案是6个，你数对了吗？在你数的过程中，你使用了有意识处理（Attentive Processing），并且要花费一定的时间。在这组数字中，缺少了一些的视觉上的特征，让你能快速地在一堆数字中，识别出数字5。现在再来一遍。

 

 

    这次是不是要快很多?因为数字5被用黑色标识了出来，使得它们很容易和灰色的其他数字区分出来。颜色（黑色相对于灰色）就是一种先意识属性（Preattentive Attributes）。事实上，视觉处理的先意识属性除了颜色之外，还有形状（Form）、空间位置（Spatial Position）和动作（Motion）共计四大类。如果应用得当，这些属性都有助于对数据编码以使得它们能被快速感知。

 

格式塔原理（The Gestalt Principles）

 

在德语中，单词Gestalt的意思是模式（Pattern），格式塔原理（The Gestalt Principles）指出了一系列人将所看到的内容有意识地组织的规则。直到今天，格式塔原理都因为其准确地描述了人的视觉感知的过程，因此可用于在数据可视化中将数据划分、分组或区分。

 

a)     近似性（Proximity）：临近的元素被感知为同一组

 

以上九个方块相互之间的距离很远，被感知为独立的九个元素，但是当它们按三行三列的方式紧挨着摆放在一起时，它们被感知为一个整体。

 

b)     封闭性（Closure）：即使信息不完整，不完整的对象如果可能，还是会尽可能被理解成一整体

 

c)     相似性（Similarity）：颜色、尺寸、形状和方向相同的对象会被感知为同一组

 

d)     连续性（Continuity）：各自独立的对象如果在视觉上形成连续的展示，则被感知为同一组

e)     连接性（Connection）：用线连接起来的分组（group），在感知上要强于因为近似性、封闭性、相似性被感知的分组

 

三，数据可视化应用——仪表盘设计

在《Information DashboardDesign》一书中，作者Stenphen Few对仪表盘（Dashboard）下了如下定义：

 

A dashboard is avisual display of the most important information needed to achieve one or moreobjectives; consolidated and arranged on a single screen so the information canbe monitored at a glance.

 

    就像在车辆的驾驶过程中一样，驾驶员暼一眼座位前的仪表盘，就能知道车辆的运行情况是否正常，是否有故障灯警报，邮箱里的汽油是否足够。信息化的仪表盘（Information Dashboard）能为使用者关心的特定目标提供必要信息，能够在单页的页面展示完整，能让使用者撇一眼（At  a glance）就能掌握所需的信息。好的仪表盘是小巧的（small），精致的（concise）、干净的（clear）、直觉的（intuitive）展示机制。

 

先来个小的测试，以下这些仪表盘中，你最喜欢的是哪一个？

 

从这六个仪表盘中选出你最喜欢的一个，不用说出来，记在心里就可以。然后将你最喜欢的那个仪表盘和下面的三个做比较，现在结果又是什么呢？

 

是不是这三个仪表盘比你之前挑选的那个仪表盘更“好”呢？这三个仪表盘，更“好”地做到了高效地（Efficiently）、准确地（Accurately）将数据背后的模式（Pattern）、趋势（Trend），或者例外（Exception）展示了出来，并且是让使用着瞥一眼（At a glance）就能知道。这就是这三个仪表盘更“好”的原因。值得高兴的是设计出好的仪表盘的能力是可以习得的。

 

在《Information DashboardDesign》一书中，作者列举了十三个设计仪表盘时常犯的错误，分别是：

 

1, 超越了单个屏幕的边界（Exceedingthe Boundaries of Separate Screens）

 

2, 未提供充分的小下文信息（SupplingInadequate Context for the Data）

 

3, 展示过多的细节和精度（DisplayingExcessive Detail or Precision）

 

4, 选择了无效的量度（Choosinga Deficient Measure）

 

5, 选择了不恰当的展示媒介（ChoosingInappropriate Display Media）

 

6, 引入了无意义的变体（IntroducingMeaningless Variety）

 

7, 使用了设计糟糕的展示媒介（UsingPoorly Designed Display Media）

 

8, 不准确地编码数字数据（EncodingQuantitative Data Inaccurately）

 

9，糟糕地排版数据（Arranging the Data Poorly）

 

10, 未有效地标亮重要数据（HighlightingImportant Data Ineffectively or Not at All）

 

11, 使用无意义的装饰（Clutteringthe Display with Useless Decoration）

 

12, 错误使用（过度使用）颜色（Misusingor Overusing Color）

 

13，设计无吸引力的视觉展示（Designing anUnattractive Visual Display）

 

现例举几例：

 

1, 超越了单个屏幕的边界（Exceedingthe Boundaries of Separate Screens）

 

 

该仪表盘将使用者关心的数据切分到十张单页上，并且提供了下拉框选择不同的选项。当仪表盘使用者需要从整体上查看所有数据，并且观察他们之间的相互关系时，该仪表盘无法有效地实现该目的。

 

 

该仪表盘在边框右侧的滚动条，使得使用者要下拉滚动条后才能看到完整的数据。参照短期记忆（Short-TermMemory）的容量是有限的特点，当滚动条下拉到底部后，使用者可能已经忘了顶部的数据内容。为了前后对比数据，需要使用者上下来回使用滚动条。

 

2, 未提供充分的小下文信息（SupplingInadequate Context for the Data）

 

 

该仪表盘显示今年截止到当前（YTD Units）的销售数据和返回比率（Returns Rate）情况良好（绿色的指针），但除此之外，仪表盘的使用者无法再获得更多的信息：如果情况良好，是相对什么的情况良好，且好到了多大的程度。作为对比，下面的仪表盘效果更好，它不但提供了当前指标（Average call length）的完成情况，同时还提供了公司的平均值和整个行业的最佳实践，能对比显示当前的绩效。

 

 

5, 选择了不恰当的展示媒介（ChoosingInappropriate Display Media）

 

饼图（Pie Chart）经常被用来显示数据，表示部分和整体的关系，但通常饼图并不是好的选择。在视觉感知上，人很难准确地感知二维的面积区域和角度。因此相比与饼图，柱状图（Bar Graph）通常是更好的选择。

 

 

四，好的仪表盘设计

 

在掌握了数据可视化和视觉感知（Visual  Perception )的基本原理之后，除了避免13种仪表盘设计中常犯的错误之外，还有另外的方法，如果熟练掌握，可以有助于设计出好的仪表盘。

       好的仪表盘设计原则应该只有一条——简洁（Simplicity）：尽可能干净地（Clearly）、简单地（Simply）展示数据，去掉无用的装饰（Decoration）信息。观察一下，好的仪表盘通常具有以下特点：特别好的组织方式和归纳后的摘要或者例外信息。好的仪表盘设计过程，就是在实现简洁的原则下，按特定的组织方式，展示归纳后的摘要或者例外信息。

 

浓缩信息

        将大量信息浓缩到一张页面的仪表盘上的最好方式是通过摘要（Summarization）和例外（Excpetion）。摘要将大量信息“浓缩”成单个数字。仪表盘上最长用的两类摘要是总数和平均数。不忘初心，仪表盘的作用是帮助使用者监控（monitor）事情进展的情况。当事情的进展超出了常规发展的轨迹，问题（Problem）或者机会（Opportunity）便显现了。这类信息应该在仪表盘上被显示出来。

降低非数据像素、增强数据像素

Edward R. Tufte在他的1983年的经典著作《The Visual Display of Quantitative Information》中提出了”数据像素比“（data-pixelratio）概念（注：Edward R. Tufte 提出的其实是“数据墨水比”(data-ink ratio)概念。在Edward R. Tufte 写书的年代，在显示屏上显示可视化展示还没有大规模普及，因此Edward采用的是ink（墨水）。到了《Information Dashboard Design》成书的时候，作者StenphenFew将这个概念修改成了“数据像素比”）。在可视化界面上，某些像素是具有数据信息的，某些则不具有。

 

 

上图中红色线条代表了不具有数据信息的像素。整幅图的“数据像素比”很高。好的仪表盘设计就是要尽可能提高“数据像素比”。

 

 

上副图的“数据像素比”就低很多，整幅图充斥了用来视觉装饰的元素。饼状图的三维厚度；三维柱状图的背景网格线，都不具有数据信息含义。

好的仪表盘设计，在降低非数据像素的同时，还要增强数据像素。这可以通过利用仪表盘上不同位置带来的强调程度不同，以及利用视觉感知的特性实现。

在视觉设计中，很少有像位置那样能有效地强调重要性。如下图所示，页面上的左上角和中间区域，是重要性最高的区域，你应该将数据像素，尤其是重要的数据像素，放在这些区域中。

根据前面的知识，你还可以利用人类天生具有的视觉感知（Visual Perception）中的先意识属性（还记得吗？总共有颜色（Color）、形状（Form）、空间（Spatial Position）、动作（Motion）四大类）突出你想强调的重要的数据像素；利用人天生将所看到的图像尽可能地按一定的模式（Pattern）理解（格式塔原理（The Gestalt Principles）），将异常（Exception）信息展示出来。

 

选择合适的显示媒介

  http://www.datavizcatalogue.com/methods/line_graph.html网站上罗列了仪表盘设计中常用的一些控件，它们各自适用的场景，并且给出了不同开发工具下的实现代码（D3，Excel，ECharts等）

 

保持显示的一致性

显示上的差异性会让人去理解差异性代表的不同含义是什么；任何代表相同含义的信息都应该用相同的方式在仪表盘上展示。这不仅适用于颜色、大小、形状等这些视觉属性，也同样适用于显示媒介的选择。如果是用柱状图显示数据的整体趋势，那么在仪表盘的不同位置都应该用柱状图显示趋势。

五，参考文献

 

1 《Information DashboardDesign》By Stenphen Few, O’Reilly, Januray 2006, ISBN0‐596‐10016‐7

 

2 https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization-for-human-perception

3 https://en.wikipedia.org/wiki/Iconic_memory

4 http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

5 https://en.wikipedia.org/wiki/William_Playfair

 

6 http://www.datavizcatalogue.com/