这是我参与【第四届青训营】笔记创作活动的第5天
嗨害嗨，这里是因比赛与前端结缘的非科班练习生bf,今天来简单整理一下青训营“数据可视化基础”的相关内容，废话不多说，开始整活！ヾ(≧ ▽ ≦)ゝ*
一、数据可视化简单介绍
数据可视化：顾名思义，将数据转换为可视表示的任何东西
数据可视化分类：
- 科学可视化：科学实验数据的直观展示
- 信息可视化：对抽象数据的直观展示
- 可视分析：对分析结果的直观展示，及交互式反馈，是一个跨领域的方向
为什么要可视化？
- 记录信息
- 分析推理
- 证实假设
- 交流思想
二、可视化设计原则和方法
可视化设计原则：能够正确地表达数据中的信息而不产生偏差与歧义
包括：
- 准确地展示数据
- 节省笔墨
- 节省空间
- 消除不必要的“无价值”图形
- 在最短时间内传达最多的信息
可视化设计方法：
- 最重要的是展现数据
- 合理范围内，最大化数据墨水占比
-
- 擦除非数据墨水
-
- 擦除冗余的数据墨水
关于最大化数据墨水占比：
三、视觉感知
人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引
在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素
格式塔理论：
较为系统的对人类如何发现图形元素之间的相关性进行了全面总结，被广泛的应用在了视觉设计当中
理论核心：整体决定部分的性质，部分依从与整体
就近原则：
当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组
将数据元素放在靠近的位置，可以突出它们之间的关联性
相似原则：
形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体
连续性原则：
人们在观察事物的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体
闭合原则：
有些图形可能本身时不完整或者不闭合的，但主体有一种使其闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征
共势原则：
如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体
对称性原则：
对称的元素被视为同一组的一部分
图形与背景关系原则：
- 大脑通常认为构图中最小的物体是图形，而更大的物体则是背景
- 跟凹面元素相比，凸面元素与图形相关联更多些
四、视觉编码
视觉编码：
一种将数据信息映射成可视化元素的技术
数据信息：属性 + 值
可视化元素：可视化符号 + 视觉通道
可视化符号：
用于在可视化当中表现数据元素或元素之间的关联
- 当表示元素时可视化符号包括：点、线、面
- 当表示关系时可视化符号包括：闭包、连线
视觉通道：
基于数据属性，控制可视化的符号展现样式
有两种类型：
- 数量通道：用于显示数据的数值属性（定量/定序）
包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积
- 标识通道：用于显示数据的分类属性（是什么/在哪里）
包括：空间区域、色向、动向、形状
不同的视觉编码在表达信息的作用和能力上有不同的特性：
- 当利用数量通道编码标识数值属性时：
位置通道最为精确，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积
- 当利用标识通道表示分类属性时：
划分空间区域最为有效，其后是色向、动向、形状
五、基础统计图表
以下几个应该都是比较熟悉的统计图表了，excel中的常客：
- 柱状图：比较分类的数据的最佳选择
- 饼图：最显著功能在于表现“占比”
- 散点图：适用于分析变量之间是否存在某种关系或相关性及其强弱
- 折线图：大多数情况适用于x轴为连续数据的场景
六、面向前端的可视化工具介绍
- D3
- Vega
- G2
- ECharts
未完待续...
以上就是本次的整理了，我们下次再见，拜了个拜(。・∀・)ノ
