这是我参与「第四届青训营」笔记创作活动的的第24天

一、本课堂重点内容

1.可视化设计（Visual Design）
2.交互(Interaction)
3.动画（Animation）
4.实例（Cases）

二、详细知识点介绍：

01.可视化设计（Visual Design）

认知（Cognition）与知觉（Perception）

Visualization is really about external cognition, that is, how resources outside the mind can be used to boost the cognitive capabilities of the mind. 可视化是一个帮助人们对外部信息进行认知的过程，也就是说，是一个使用大脑以外的视觉资源与信号，来帮助增强大脑认知能力的过程 -- Stuart Card

从符号学层面来讲，人类将符号传递到大脑，随后对符号进行解码，根据大脑中的知识来得到符号具体表达的意义。

读取一张图片和接收其他信息一样，依赖我们已经掌握的知识（signifier），我们只能识别我们知道的事情(signified)。我们识别一个符号到它所要表达的意义，实际上需要一个转换“函数”，这个函数就是Code，也就是一个心理认知过程。

关于进一步的知觉感知的研究总结，我们可以抽象人们识别可视化的三个步骤：

Perception of raw visual signals,e.g. color, shape, etc. 原始信号感知

Pattern recognition 模式识别

Reasoning and Analysis 推理分析

Colin Ware ·《Information Visualization Perception for Design》·2004

可视化设计的目标就是要在以上三个步骤中，缩短人类的认知过程，达到准确高效的传递信息的目的。

编码

合理准确的可视化编码，可以提高人们在感知过程中各个步骤的速度和准确性

格式塔 理论格式塔理论（Gestalt Laws）较为系统的对人类如何发现图形元素之间的相关性进行了全面总结，被广泛的应用在了视觉设计当中，利用格式塔理论进行设计将有助于用户快速识别图形符号所构成的“群组模式”。

节省墨水

为了减少冗余可视化元素对读者的影响，在设计过程中，要尽量让每一个符号都有数据意义。

准确度

很多可视化设计会出现扭曲数据的情况，我们需要对夸张程度（或者准确程度）进行度量。

下面我们分别来论述这些方法和策略。

1.2 可视化编码

再回到第3节关于数据的论述，我们基于数据集类型来选取合适的可视化形式，接下来需要根据具体的数据条目（Item）的特性来确定合适的图元（Mark），最后根据属性(Atrribute)来配置合适的视觉通道，对图元进行修饰。

1.2.1 Mark

根据数据条目的不同，将Mark分为两个类别：

1. Items / Nodes

2. Links

根据数据维度的不同，我们可以选取点、线、面来进行表达数据。对于关系数据，则需要使用 Links 来展现。

1.2.2 通道(Channels)

选取了Mark之后，需要进一步描述Mark的具体视觉特性，这些特性称之为视觉通道（Visual Channels）

A visual channel is a way to control the appearance of marks

视觉通道有很多，下图以6种通道和3种Mark相组合，可以很直观的体会二者之间的关系。

(John Krygier and Denis 《Making Maps: A Visual Guide to Map Design for GIS》)

1.2.3 编码(Encode)

从数据到视觉通道的转换过程，被称之为视觉编码（Visual Encoding)。

不同的数据属性需要用不同的通道来进行编码才能达到更好的效果，上图将通道分成两组，分别对应分类数据和可排序数据。下面我以一个简单柱形图为例，进行拆解：

上图左侧是柱形图的配置数据，每个数据条目分为映射到X轴的Value，映射到Y轴的Value，还有一个分组字段“g”。

我们的目标是用来比对不同时间段的数值大小，所有Mark 选择 “点”类型，形状为 rect。X 轴是分类数据，我们按照数据条目的个数和出现顺序依次映射到X轴区间的位置（Position）上。Y 轴数据是数字类型，映射到矩形的高度上。分组字段是分类数据，我们通过颜色来进行编码。这样就形成了上图右侧的柱形图。

1.2.4 编码有效性(Effectiveness)

由于人类感知系统的特点，在不同场景下需要设计不同的编码策略，来提升感知速度和准确性。以下几项研究，对当前可视化设计有着深远影响。

预感知图形

经过科学家的实验论证，部分图形可以被人类大脑在非常短的时间内识，比如形状、长短、大小等。

在可视化设计过程中，尽可能的使用具有预感知特性的图形，可以加速感知处理的第一个过程。

更多详细内容可以阅读 www.csc2.ncsu.edu/faculty/hea…

有效性排序

一些研究人员对不同的视觉通道对不同数据进行编码进行单变量效果对比，得出有效性排名，下图是研究之一。

Robert E. Roth《Visual Variables》www.researchgate.net/publication…

You must consider a continuum of potential interactions between channels for each pair,ranging from the orthogonal and independent separable channels to the inextricably combined integral channels.

--Tamara Munzner

但是在实际应用场景中，往往一个可视化作品需要组合多个通道，不同通道组合对读者的影响，实际研究不是很多，下图是其中之一。

(Tamara Munzner 《Visualization Analysis & Design》)

1.3 格式塔理论

格式塔针对人类对特定视觉模式的识别给了很好的分类，该理论同样适用于数据可视化设计。下面我们举例介绍6种原则。

邻近原则(proximity)

空间中距离相近的元素有被看作一体的趋势。人们会很自然的根据距离来对视觉对象进行分组。上图的分组柱形图，我们会很自然的把临近的柱子分为一组，其次才是观察颜色分组。

相似原则(similarity)

刺激物的形状、大小、颜色、强度等物理属性方面比较相似时，这些刺激物就容易被组织起来而构成一个整体。如下图中，根据颜色和形状，将数据分为两组。

连通性原则 (Element Connectedness)

如果一些元素与其他元素相连时，我们认为这些元素是统一体。如下面的箱型图，如果没有中间的线上线相连，上下两条线是不会被看做一个整体进行分析的。

连续性原则 (Good continuation)

如果一个图形的某些部分可以被看作是连接在一起的，那么这些部分就相对容易被我们视为一个整体。如下面的折线图的连线，虽然是断开的多段线，但是我们仍然视之为一条折线。

封闭的原则(closure)

有些图形是一个没有闭合的残缺的图形，但主体有一种使其闭合的倾向。如下面的形状词云。

共同命运原则(common fate)

如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体。如下方左图，我们会按照相似原则把每行看作一个分组，但是右侧由于共同的运动方向，我们会把每列看作一个分组。

1.4 谎言因子

本小节内容主要参考《The Visual Display of Quantitavive Information》一书，图片也来源于此书。

谎言因子（Lie Factor， LF）的概念由德国慕尼黑工业大学Rüdiger Westermann教授提出，用于衡量可视化中所表达的数据量与数据之间的夸张程度的度量方法。

当LF=1时，我们认为图表没有对数据实时进行扭曲，是一个可信的可视化设计

在实际当中，应当确保各部分图形元素的 LF 在 [0.95, 1.05] 范围内，否则，所产生的图表认为已经丧失了基本可信度

我们以下图为例做一个简单分析。

在上图中，1978年的长0.6英寸线条代表18 m/g，而1985年5.3英寸线条代表27.5 m/g，数字差异计算：

(27.5 – 18) / 18 = 0.53
复制代码

图形差异计算：

(5.3 – 0.6) / 0.6 = 7.83
复制代码

谎言因子计算：

LF = 7.83 / 0.53 =14.8
复制代码

从结果看，大大夸大了数据事实。

下图是修正过的可视化设计。

1.5 数据-墨水比

可视化的核心是数据与信息，可视化作品的大部分笔墨应该集中在数据与信息的呈现上。为此，Tufte 提出了一个衡量标准 Data-ink ratio： Data-ink ratio 表示图表中不可删除的数据的部分占整个图表的比例，其定义如下： Data-ink ratio = data-ink / total ink used to print the graphic

在数据可视化中，数据的重要性高于一切。因此，在进行可视化设计时，应遵循以下两条原则： 1.在合理范围内，最大化 data-ink ration（Maximize the data-ink ration, within reason） 2.在合理范围内，去除冗余的 data-ink（Erase redundant data-ink ration, within reason）

下面是一张普通的散点图。图表中大部分的 data ink 用于数据的呈现（如点、label、坐标轴），剩余少部分的 non-data-ink 用于 ticks、边框等，这张图表的 Data-ink-ratio 大概在 80% 左右。

极少图表的 Data-ink ratio 能够达到 1。如下面这张图表，所有的线条都是在展现数据，而且图表的坐标轴设计也十分简洁（如红框所示），也就是说，这张图表没有任何可以去除但不影响数据表达的部分了。

下面两个图表都是错误的设计。左图几乎所有的 data-ink 都用在了与数据表达无关的网格上；右图则忽略了数据的展示，它们的 Data-ink ratio 都约为 0。

下图是修正后的正确设计，这个图表的 Data-ink ratio 约为 0.7。

（更多内容参考：zhuanlan.zhihu.com/p/524878535…

2.交互(Interaction)

静态的数据展示并不能满足用户需求，很多时候我们需要提供交互形式，使得用户可以对数据进行多维度的探索。《Visualization Analysis & Design》一书对交互进行了分类，分为以下9种。

Change 改变

Juxtapose 并列

Filter 过滤

Select 选择

Partition 拆分

Aggregate 聚合

Navigate 导航

Superimpose 叠加

Embed 镶嵌

随着场景和技术的发展，更多样的交互形式也在不断的出现，但是目标都是为了进行更好的数据探索分析。下面我们看几个具体的例子。

第一个例子应用导航功能来切换数据，结合地理位置的变换来讲述内容。

第二个例子是在图可视化中常见的交互场景，通过缩放对数据进行过滤，点击节点查看有关联的其他节点信息。

solutions-public.toucantoco.com/demo/22005?…

第三个例子展示的是数据分面，形式变换的例子。

(timelinestoryteller.com/)

第四个例子是一个刷选操作的例子。

3.动画（Animation）

动画在可视化作品中的作用受到的关注越来越多，目前人们比较关注的作用有如下几个方面：

体现数据变化过程

引导观众的注意力

增强美观度

根据动画的对象，我们可以将动画分为图元动画、组件动画和全局动画。同时，人们也对经常使用的动画效果进行了抽象和总结，比如缩放、旋转、飞入、飞出等。根据动画的实际又有入场、出场、更新等分类方式。

3.1 图元动画

下图是对图元动画的一个简单总结。

我们看几个示例。

缩放动画

渐变动画

飞入动画

失焦退场

3.2 全局动画

全局动画简单总结如下：

全局遮罩转场

全局 - 局部切换
粒子流动效果

morphing 动画

echarts.apache.org/examples/zh…

4.实例（Cases）

最后我们给大家展示一些具体的数据集的可视化实现方案。

4.1 多维数据可视化

人们直接去分析多维数据，往往是非常困难的，借助可视化可以极大的提升效率。对多维数据进行可视化的方法也很多，这里简单介绍几种。

4.1.1 散点图 & 散点图矩阵

普通散点图可以通过大小、颜色和位置表达三个维度的数据，但是这对于更多维的数据来讲是远远不够的，于是诞生了散点图矩阵。

散点图矩阵中每个散点图表示两个维度之间的数据关系。我们看下面的例子（www.jiqizhixin.com/articles/20…

假设有如下图所示的数据：

每一行代表一个国家一年的观察数据，列代表变量（这种格式的数据被称作整洁数据，tidy data），其中有两个类别列（国家和洲）和四个数值列。这些列简单易懂：life_exp 是出生时的预期寿命，以年为单位，popis 是人口数量，gdp_per_cap 是人均 GDP（以国际元）为单位。只考虑数值类型属性之间的关系，可生成如下的散点图矩阵：

散点图矩阵可以进一步扩展为普通的矩阵，如下图：

4.1.2 平行坐标轴

平行坐标轴方法中，数据的不同维度被显示为平行的坐标轴，数据元素被表示为一根折线。

这种方法适用于所有表格类型的数据，而且支持异构数据的展现。平行坐标轴方法也扩展出多种显示形式。

4.1.3 Glyph

Glyph 是可以同时使用多个视觉通道，例如图形（shape）、颜色（colour）、文本（texture）、大小（size）、角度（orientation）、比例（aspect ratio）、曲率（curvature)的一种组合图元。同时每个glyph 可以单独被识别出来，为多场融合可视化提供了可能。

比如人脸图，可以通过五官要素对多个变量进行编码。