这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

本堂课重点内容

本堂课重点讲述了数据可视化的基本概念、设计方法和原则，介绍了面向前端的数据可视化工具。

数据可视化基本概念

把数据转换成可视的形式，如图片、表格...，主要分支：科学可视化、信息可视化、可视分析学

数据可视化的意义：记录信息，进行分析推理，从而证实假设，交流思想

数据可视化设计方法和原则

• 常见的错误可视化

  1. 透视失真：一般出现在3D可视化中，视觉元素与感知程度不一致
  2. 图形设计与数据尺度：视觉预期与视觉看到的不一致
  3. 数据上下文

• 原则

• 准确地展示数据 能够正确地表达数据信息，不产生偏差和歧义

• 节省笔墨、节省空间、消除不必要的“无价值图形” 最大化数据墨水占比

• 在最短时间内传达最多的信息 在可视化设计中，设计者要充分考虑到人类感知系统，避免产生阻碍或者误导

• 格式塔理论

  闭合原则（Closure）、就近原则（Proximity）、相似原则（Similarity）、连续性原则（Continuation）、共势原则（Common movement）、对称性原则（Symmetry）、图形与背景关系原则（Figure-ground）

• 视觉编码 将数据信息（属性+值）映射成可视化元素（可视化符号+视觉通道）

  • 可视化符号：元素（点、线、面），关系（闭包、连线）
  • 视觉通道：数量通道、标识通道

面向前端的数据可视化工具

• D3.js，被认为是最好的JavaScript可视化框架之一
• Vega，图形语法库，可视化语法，可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图，老师推荐。
• G2，图形语法库，以数据驱动的高交互可视化图形语法，具有高易用性和扩展性，可以使用canvas和SVG
• Echarts，使用JavaScript的开源可视化库，兼容绝大部分浏览器(IE9/10/11, Chrome，Firefox， Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

个人总结

数据可视化将枯燥复杂的数据通过图形化的设计方式呈现在用户面前，方便从中进行数据分析和挖掘，同时也能有效帮助实时监测数据。