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

视觉编码（Visual Encoding）

视觉编码的概念

• 视觉编码是一种：将数据信息（属性+值）映射成可视化元素（可视化符号+视觉通道）的技术

可视化符号

• 用于在可视化当中表现数据元素或元素之间的关联
  • 当表示元素时Mark包括：点、线、面
  • 当表示关系时Mark包括：闭包、连线

视觉通道（channel）

• 基于数据属性，控制可视化的符号展现样式，例如：点根据其所代表的数据属性的不同可有不同的形状与颜色
• 视觉通道两种类型
  • 数量通道（Magnitude Channel）
    • 用于显示数据的数值属性（定量/定序）。包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积
  • 标识通道（Identify Channel）
    • 用于显示数据的分类属性（是什么/在哪里）。包括：空间区域、色向、动向、形状

视觉编码的优先级

• 不同的视觉编码在表达信息的作用和能力上有不同的特性
• 当利用数量通道编码标识数值属性时：
  • 位置通道是最为精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积
• 当利用标识通道标识分类属性时：
  • 划分空间区域最为有效，其后是色向、动向、形状

面向前端的可视化工具

D3

• D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一

Vega

• Vega是一种可视化语法，通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图

G2可视化引擎

• 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，可以无需关注图标各种繁琐的实现细节，一条语句即可使用Canvas或SVG构建出各种各样的可交互的统计图表

ECharts

• 一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表