这是我参与「第五届青训营 」伴学笔记创作活动的第30天，今天我们学习了数据可视化基础这项知识，下面就是我做的课堂笔记：
前言
我们在学习数据可视化前可以先了解它的发展历史，对不同历史阶段的一些经典可视化作品做扩展阅读，增加兴趣。
什么是数据可视化
数据可视化就是：将数据转换为可视表示的任何东西（如图表，图片，地图，有时甚至只是表格）。它分为三类：科学可视化（科学实验数据的直观展示），信息可视化（对抽象数据的直观展示），可视分析（对分析结果的直观展现，及交互式反馈，是一个跨领域的方向）。
为什么要可视化？1.记录信息 2.分析推理 3.证实假设 4.交流思想。下面两张图片，第一张图片仅仅给你一些数据而没有进行可视化，你很难看出这张图是让你做什么，很难分析出四组数据的差异。第二张图片，对数据做了可视化处理，你可以一目了然对这四组数据的差异。
可视化设计原则和方法
可视化设计原则
可视化设计的原则是：1.能正确地表达数据中的信息，而不产生偏差和歧义（准确的展示数据）。2.节省笔墨、节省空间、消除不必要的无价值图形。3.在最短的时间内传达最多的信息。
常见的错误可视化：透视失真，图形设计&数据尺度，数据上下文。下图就是透视失真，图中绿色和粉色的占比不协调（19>21）。该怎么避免透视失真：1.如果数字是由视觉元素表示的，那么他们应该与视觉元素的感知程度成正比。2.使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
图形设计&数据尺度：这个里面涉及到一个新概念叫做：视觉预期。从下图可以看出汽车的仪表的那个数据尺度有瑕疵：60以前每一个大刻度是20，60以后每一个大刻度是40，容易让看者出现判断错误的状况。
数据上下文：可以让阅者更好的理解数据的一些信息。
下面要讲谎言因子，知识不多，全在图中：
可视化设计方法
要讲一个：最大化数据墨水占比
下图可以清楚的看出数据墨水占比大小的差异：要注意一点并非所有的非数据墨水都没有用。
最大化数据墨水占比怎么提高？ 两个擦除原则：擦除非数据墨水（不能描绘有价值信息的墨水）；擦除冗杂的数据墨水（描述了信息，但是重复显示了信息）。
视觉感知
什么是视觉感知：客观事物通过视觉在人脑中形成的直接反映。
认知过程：
相对判断和视觉假象：
假使没有右边图片的设置，绝大多数人会认为左图中A块的颜色比B块的颜色深。但观察右图会发现其实他们的颜色一样。
因此可以得出结论：人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引。因此在可视化设计中，设计者应充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。
上图涉及到格式塔理论：
格式塔理论的原则：就近原则（当视觉元素在空间距离上相距较近时，人们通常会把他们归为一组）、相似原则（形状、大小、强度、颜色等属性方面比较相似时，这些物体就容易被看成一个整体）、连续性原则（人们在观察物体的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体）、闭合原则（有些物体可能本身是不完整或者不闭合的但主体有一种使其闭合的倾向，人们就会很容易的感知整个物体，而忽略未闭合的特征）、共势原则（如果一个对象的一部分都向共同的方向去运动，那么这些共同移动的部分就易被感知为一个整体）、对称性原则（对称的元素被视为同一组的一部分）、图形与背景关系原则（大脑通常认为构图中较小的物体是图形，而更大的物体则是背景。与凹面元素相比，凸面元素与图形相关联更多些）。
视觉编码
视觉编码是一种将数据信息（属性+值）映射为可视化元素（可视化符号+视觉通道）的技术。
基础统计图形
柱状图bar、饼图pie、散点图scatter、折线图。
面向前端的可视化工具推荐
D3.js：是用于数据可视化的开源的JavaScript函数库，被认为是最好的js可视化框架之一。
Vega：是一种可视化语法，通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图。
G2：一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的扩展性和易用性。使用G2你可以无需关注图表各种繁琐的实现细节，一条语句即可使用Canvas或SVG构造出各种各样的可交互的统计图表。
Echarts：一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11、chrome、Firefox、SaFari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
小结
今天的数据可视化基础的内容就完成了，谢谢大家阅读。
