简介
前面我们已经了解了一些可视化的概念，为了在开发的过程中更加顺利，深入学习它的基础概念是必不可少的。本节主要介绍什么是视觉编码，如何使用视觉编码。
数据模型
数据集
- 简单来说就是，我们在完成某项任务时，收集到的所有数据组合在一起就是数据集。这些数据可以是表格数据、关系数据、位置数据等。
比如，我们要统计某公司的人员信息。员工的基础信息，每个人都有同样的属性，每个人都能生成一条数据，把这些数组合在一起就是表格数据。各个员工的关系，A员工是B员工老公，B员工是C员工叔叔，它们的关系就组合成了一张关系网数据。 - 从上面的例子我们可以知道，数据集是由一条条数据（Data） 构成的，每一条数据是由属性（Attribute） 构成的。
属性类型
- 属性是一个可以被测量、观察和记录的特性，所有的数据（Data） 都由属性构成。
- 在开发中，我们使用的是每一条数据的属性来进行可视化。所以这里介绍的是属性分类。
- 大致可以分为分类属性、有序型属性、数值属性。
- 分类属性: 用于区分事物的数据，比如员工的姓名、性别、工作岗位，都算是分类属性。
- 有序型属性: 用于表示对象间的顺序关系。比如衣服的尺码 XXL > XL > L > M > S、职位的等级，都算是有序型属性。
- 数值属性：可以直接通过计算来排序。比如员工年龄、入职时间，都算是数值属性。
- 当然这些分类都不是唯一的，你可以按照自己的方式进行分类。只要能提高数据分析效率都是有效的。
小结
- 上面主要是介绍了数据在可视化中的一些分类概念。除了分类，你还需要了解数据的关系，比如分布、依赖关系、相关性和相似性等。
视觉编码
什么是视觉编码
- 视觉编码是数据信息映射为可视化元素的技术，其通常具有表达直观、易于理解和记忆的特性。它也是数据可视化的核心内容。
- 我们可以把可视化看成一组图形符号的组合，这些图形符号中携带了被编码的信息，当人们从这些符号中读取信息时，我们称称之为解码了一些信息。
举个例子：找出图中的 5 ？
- 展示了一串数据，未进行有效的视觉编码。不能快速找出我们想要的结果。
- 使用颜色饱和度，进行视觉编码，能快速的找出我们想要的结果。
- 我们解码信息靠的靠的是我们的眼睛、我们的视觉系统。如果说图形符号是编码信息的工具或通道、那么视觉就是解码信息的通道。因此，我们通常把这种图形符号<——>信息<——>视觉系统的对应称作视觉通道。
视觉通道
- 视觉通道是可视化中的重要概念。视觉编码由标记和视觉通道组成。
- 标记：可视化中标记通常是一些抽象的几何图形元素，例如：点、线、面。
- 视觉通道：为标记提供视觉特征，包括标记的位置、大小、形状、方向、色调、饱和度、亮度等。
视觉通道的类型
- 定性（分类）的视觉通道：如形状、颜色的色调等，非常容易被人眼识别。
- 定量（有序）的视觉通道：比如长度、位置、斜度、角度等。
- 常用的视觉通道
位置变量：一般指二维坐标。
视网膜变量：尺寸、数值、纹理、颜色、方向和形状。
以上7 种视觉编码映射到点、线、面之后，衍生出 21 种编码可用的视觉通道。后续开发人员也发现的很多新的通道，大家可以自己去了解。
如何选择视觉通道
通过视觉通道的表现力和有效性来进行选择。可以由下面这几个维度来衡量。
- 精确性：能准确的表达视觉和数据之间的变化。
- 可辨认性：同一个视觉通道可辨识的分类个数上限。
- 可分离性：不同视觉通道在表达数据属性的时候，是否容易分辨。
- 视觉突出：重要的信息，是否用更加突出的视觉通道进行编码。
-
下图给出了，不同数据类型使用视觉通道的优先级。
-
上图蕴含的理念在大多数情况下是没有问题的，但数据可视化不是一层不变的当你发现不适用时，按自己的想法来说不定更好。
创建通道
- 在开发中创建通道很简单，每一个通道都是一个对象，都应该有一下属性
| 属性名 | 描述 | 可选 | 默认值 |
|---|---|---|---|
| name | 通道的名字 | 否 | - |
| values | 通道对应的值 | 否 | - |
| optional | values是否必需 | 否 | true |
export function createChannel({ name, values, optional = true, ...rest }) {
return { name, values, optional, ...rest };
}
- 一个通道就这么简单的完成了。开发往往是最简单的事前，难的是分析图形，判断出使用那些视觉通道，如何组合这些通道，达到目的。
总结
本节简单的介绍了数据模型和视觉编码。只有了解了这些基础概念，在开发的过程中，我们才知道，如何在少使用视觉通道的同时，让可视化结果能更加高效地传递信息。
参考文章
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
