数据可视化
这是我参与「第四届青训营 」笔记创作活动的的第16天
1.重点内容
数据的可视化在当今的互联网上十分常见，因此作为前端开发者如何快速有效的建立起一套数据可视化的工具则尤为重要，这节课来了解一下数据可视化的内容。
2.重要的知识点
- 什么是数据可视化
- 可视化设计原则和方法
- 视觉感知
- 视觉编码
- 基础统计图表
- 面向前端的可视化工具
3.详尽的知识点
什么是数据可视化
数据可视化已经存在于我们的生活之中无处不在
- 手机内存的表示
- 地图
- 游戏内容
- ...
数据可视化就是将数据转化成可以具体视觉表现的任何东西，包括但不限于图表，图，地图，表格等等。
数据可视化的分类
- 科学可视化：科学实验数据的直观演示
- 信息可视化：对抽象数据的直观展示
- 可视分析：对分析结果的直观展现，及交互式反馈，是一个跨领域的方向
做可视化的意义
- 记录信息
- 分析推理
- 证实假设
- 交流思想
可视化设计原则和方法
可视化设计的原则就是能够正确的表达数据中的信息而不产生偏差与歧义
- 准确的展示数据
- 节省笔墨
- 节省空间
- 消除不必要的无价值图形
- 在最短的时间内传达最多的信息
常见问题
- 透视失真
- 图形设计和数据尺度的偏差
- 数据上下文的问题
透视失真
- 数据应该与视觉元素的感知程度成正比
- 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清
图形设计&数据尺度
- 图形的每一部分都会产生对齐的视觉预期
- 错误的数据洞察，产生不正确的视觉预期推断
数据上下文
- 列举完整的数据
- 避免数据数量的问题导致引起歧义
视觉感知
可视化致力于外部认知，利用大脑以外的资源来增强大脑本身的认知能力
- 人的视觉系统观察是变化的，容易被影响
- 在设计中，设计者需要考虑人类感知系统的这些现象，使得可视化不会存在阻碍或者误导
格式塔理论
- 就近原则
- 相似原则
- 连续性原则
- 闭合原则
- 共势原则
- 对称性原则
- 图形与背景关系原则
视觉编码
视觉编码是一种将数据信息映射为可视化元素的技术
可视化符号：用于在可视化中表现数据元素或元素之间的关联
视觉通道
基于数据属性，控制可视化符号的展现样式
-
数量通道：用于显示数据的数值属性
- 位置通道此时是最精确的，其次是长度等
-
标识通道：用于显示数据的分类属性
- 划分空间区域最为有效，其次是色相，动向，形状
基础统计图表
- 柱状图
- 饼图
- 散点图
- 折线图
面向前端的可视化工具
- D3.js
- Vega
- G2
- EChart
4.课后总结
这节课介绍了数据可视化的基础，虽然看上去比较适合UI绘制相关的开发者来学习，但是作为前端开发者来说，学习数据可视化也是必不可少的。有利于培养一定的审美能力，更好的服务于今后的开发。
