这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
什么是数据可视化?
数据可视化能够直观的展示数据与数据的情况。比如说手机的存储空间，手机地图，游戏地图的缩略图。办公图表。
任何一种将数据转换成可视化形式的图表、地图等。
数据可视化分类
科学可视化
科学实验数据的直观展示，(医学，化学，生物等)将数据的某种特别的空间测量位展示出来
信息可视化
抽象的非结构化的数据展示。文本，层次结构，地图或者更复杂性的，关注抽象或者更高维度的数据。
可视分析
结合可视化界面对数据进行分析和推断，综合包括可视化，人机交互，数据挖掘的综合分析。
为什么要数据可视化
使观察者能够从看见物体到获取到知识。 包括可视化记录信息，分析推理，证实假设，交流思想。
比如说论文的实验数据图，进行交流。
当实验数据是抽象的表格时，用肉眼观察实验数据的差别十分耗时，同时也消耗掉一定的脑力。
在差异性数据对比中，使用二维图比使用表格更直观体现数据的差异。
可视化设计原则和方法。
糟糕的可视化数据：配色混乱，纹理混合，视觉冲击性过强。数据密集程度高。
可视化设计原则： 正确的表达数据不产生偏差和歧义
在VisLies 2022中每年都会有错误的可视化内容讲解。
常见的错误可视化
透视失真
经常发生在3D的可视化中。引入了空间元素不容易察觉到数据的变形。
如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
图形设计 & 数据尺度
图形的每一部分都会产生对其的视觉预期(visual expectation):
- 这些预期往往决定了眼睛实际看到的东西；
- 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断。 一个典型的例子：轴刻度，我们期望它从始至终能够保持连贯且一致。轴的刻度间距应该始终保持一致。
数据上下文
数据上下文补充全面。否则容易误导读者。
可视化设计原则
一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少的笔墨为观众提供最多的信息内涵。
- 准确的展示数据
- 节省笔墨
- 节省空间
- 消除不必好的无价值图形
- 在最短的时间内传达最多的信息
数据墨水占比
可视化模型是由墨水和空白区域组成。
数据墨水：可视化图形中的不可擦除部分。擦除数据会减少传输的信息量。
数据墨水占比：可视化图形中用于展示核心数据的墨水在整体可视化中所用墨水的占比
在数据可视化中应该最大化数据墨水占比
一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少 的笔墨为观众提供最多的信息内涵。
下面是低数据墨水和高数据墨水的对比
低数据墨水
高数据墨水
下面的图看上去信息表达的更清楚。也更容易理解。
视觉感知
可视化致力于外部感知，利用大脑以外的资源来强大大脑本身的认知能力。
在可视化设计中，设计者需要充分考虑到人类感知系统，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。
格式塔理论
整体大于局部，整体决定局部的性质，部分依赖于整体。结构比元素重要，视觉形象首先作为统一的整体被认知。
-
就近原则 -------------视觉元素在距离较近的时候，倾向于归为一组。
-
相似原则 -------------在形状大小颜色等属性相似的时候，容易被归为一组
-
连续性原则 -----------观察物体容易沿着边界。将不连续的物体视为一体
-
闭合原则 -------------整体不完整，但是有闭合的倾向，容易视为一体
-
共势原则 -------------某一部分有某种趋势去运动，这一部分容易被视为一体
-
对称原则 -------------对称元素容易被视为一体
-
图形与背景关系原则 --构图小的是图形，更大的是背景。与凹面比，凸面更容易视为图形。
视觉编码
视觉编码是将数据信息映射成可视化元素的技术。
数据信息：属性 + 值
可视化元素： 可视化符号 + 视觉通道
可视化符号
用于在可视化中表现数据元素或者元素之间的关联。
表示元素时包括点、线、面
表示关系时包括闭包、连线
视觉通道
基于数据属性，空值可视化的符号展现样式。
类型
- 数量通道
用于显示数据的数值类型
包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。 - 标识通道
用于显示数据的分类属性
用于显示数据的分类属性（是什么/在哪里)包括：空间区域、色向、动向、形状
面向前端的可视化工具
D3,可视化工具，被认为是最好的可视化工具之一
Vega可视化语法。声明式语言用JSON格式描绘可视化的外观和交互行为，用Canvas或者SVG生成视图
G2 面向常规图表，数据驱动的高交互可视化图形语法，高度易用与拓展。一条语句使用Canvas或者SVG构建各种可交互的统计图表。有点像python
ECharts JS事项的开源可视化库，流畅运行在PC和移动设备上，兼容大部分浏览器。依赖适量图形库ZRender，高度个性定制的可视化图表。
结语：
本节课更像是面向萌新介绍数据可视化是什么东西，以及数据可视化需要注意什么东西，最后介绍几个前端数据可视化的工具。由于本人也是萌新，所以本文记录的都是我认为需要记录下来的内容。
