可视化框架设计-视觉通道

视觉通道

视觉通道简介
数据如何映射到视觉通道
G2视觉通道的设计
更多

视觉通道简介

数据可视化的核心内容是可视化编码，是将数据信息映射成可视化元素的技术。可视化编码由两部分组成：几何标记（图形元素）和视觉通道。

几何标记：可视化中标记通常是一些几何图形元素，例如：点、线、面、体
视觉通道：用于控制几何标记的展示特性，包括标记的位置、大小、形状、方向、色调、饱和度、亮度等

视觉通道的类型

人类对视觉通道的识别有两种基本的感知模式。第一种感知模式得到的信息是关于对象本身的特征和位置等，对应视觉通道的定性性质和分类性质；第二种感知模式得到的信息是对象某一属性在数值上的大小，对应视觉通道的定量性质或者定序性质。因此我们将视觉通道分为两大类：

定性（分类）的视觉通道，如形状、颜色的色调、空间位置
定量（连续、有序）的视觉通道，如直线的长度、区域的面积、空间的体积、斜度、角度、颜色的饱和度和亮度等

然而两种分类不是绝对的，例如位置信息，既可以区分不同的分类，又可以分辨连续数据的差异

视觉通道的表现力

进行可视化编码时我们需要考虑不同视觉通道的表现力和有效性，主要体现在下面几个方面：

准确性，是否能够准确得在视觉上表达数据之间的变化
可辨认性，同一个视觉通道能够编码的分类个数，即可辨识的分类个数上限
可分离性，不同视觉通道的编码对象放置到一起，是否容易分辨
视觉突出，重要的信息，是否用更加突出的视觉通道进行编码

视觉通道的表现力：

数据和视觉通道的映射

可视化编码的过程可以理解为数据的字段和可视化通道之间建立对应关系的过程，它们的映射关系如下：
* 一个数据字段对应一个视觉通道（1：1）
* 一个数据字段对应多个视觉通道（1：n)
* 多个数据字段对应一个视觉通道（n：1）

我们看下面的示例：

班级的学生数

本图存在以下1：1的映射关系：

x轴：班级名作为分类数据映射到位置的视觉通道
y轴：学生数是一个连续性数据，映射到矩形的长度

chart.interval().position('班级*人数');

不同班级不同的颜色

本图存在以下映射关系：

x轴：班级名作为分类数据映射到位置
y轴：学生数是一个连续性数据，映射到矩形的长度
同时，为了区分不同的班级，将班级也映射到颜色

所以班级的映射存在两个视觉通道 1：n。

chart.interval().position('班级*人数').color('班级');

人数和班级共同决定颜色

颜色由班级和学生人数共同决定，规则如下：

如果班级等于 ‘1’ 或者人数大于 40 则映射成红色
其他则映射成绿色

班级和学生人数共同决定了颜色映射，所以此映射是 n：1

chart.interval().position('班级*人数').color('班级*人数',function(grade,count){
  if (grade == '1' || count > 40) {
    return 'red';
  } else {
    return 'green';
  }
});

G2 视觉通道的设计

实现的视觉通道

在 G2 中我们并没有实现上面提到的所有的视觉通道，而是下面几种：

position(位置)，二维坐标系内可以映射到 x, y，三维坐标系可以映射到 x, y, z
color（颜色），包含了色调、饱和度和亮度
size（大小），不同的几何图形对大小的定义有所差异
shape（形状），几何图形的形状决定了某个图表类型的表现方式。例如点图，可以使用圆点、三角形、小的图片表示；线图可以使用折线、曲线、点线等表现形式
opacity（透明度），图形的透明度，这个属性从某种意义上来说可以使用颜色代替，需要使用 ‘rgba’ 的形式，所以在 G2 中我们独立出来。

语法设计

G2 中的视觉通道作为标记的属性存在，需要支持以下功能：

支持1：1,1:n,n：1多种数据和视觉通道的映射
不同的标记决定图形对视觉通道的解析各不相同

类结构如下：

所以视觉通道在G2的语法中这样定义：

chart.<geom><attr>(dims,[callback])

geom，几何标记，在后面的章节中介绍
attr，几何标记的属性，对应视觉通道
dims，参与单个视觉通道映射的字段
callback，如何解析视觉通道，可以不提供，G2提供了默认的视觉通道解析方式

除了attr(dims,callback)的函数原型外，G2为了用户的便利性，结合各个视觉通道的特点，也提供了更为便捷的使用方式，在本章后面有详细的介绍。

示例：

chart.point().position('a*b').color('c');

chart.interval().position('a*b').color('c',function(c){
  if(c) {
    return 'red'
  }
  return 'green';
});