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

视觉编码

1、视觉编码

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

2、可视化符号（Mark）

用于在可视化当中表现数据元素或元素之间的关联。

• 当表示元素时Mark包括：点、线、面

  

• 当表示关系时Mark包括：闭包、连线

  

3、视觉通道（Channel）

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

4、视觉编码的优先级

不同的视觉编码在表达信息的作用和能力上有不同的特性。

• 当利用数量通道编码表示数值属性时：
  • 位置通道是最为精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。
• 当利用标识通道表示分类属性时：
  • 划分空间区域最为有效，其次依次是色向、动向、形状。

面向前端的可视化工具介绍

1、D3

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

2、Vega

• Vega是一种可视化语法。

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

  

3、G2

• 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。

• 使用G2，可以无需关注图表各种繁琐的实现细节，一条语句即可使用Canvas或SVG构建出各种各样的可交互的统计图表。

  

4、ECharts

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