数据可视化初识篇 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第13天。

什么是数据可视化

Anything that converts data into a visual representation (like charts, graphs, maps, sometimes even just tables)

任何可以将数据转换为可视化表示的东西(如图表、图形、地图，有时甚至只是表格)

数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。

数据可视化分类

科学可视化：科学实验数据的直观展示。
信息可视化：对抽象数据的直观展示。
可视分析：对分析结果的直观展现，及交互式反馈，是一个跨领域的方向。包含人机交互（机器学习）、数据分析（信息抽取、信息挖掘）、可视化（信息可视化、科学可视化）。

为什么要数据可视化

根据数据可视化可以帮助人们更直观学习东西、获取知识。数据可视化可以

记录信息
分析推理
证实假设
交流思想

可视化设计原则和方法

可视化原则：能正确表达数据中的信息而不产生偏差与歧义。

常见的可视化错误

（1）透视失真 ——经常发生在3D可视化中

如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。
使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。

（2）图形设计 & 数据尺度：图形的每一部分都会产生对其的视觉预期：

这些预期往往决定了眼睛实际看到的东西。
错误的数据洞察，产生在图形的某个地方发生的不正确的视觉预期推断。

（3）数据上下文：展示的时候最好把完整的可视化信息展示，不能只展示一部分，不然可能会导致误判。

需要控制图形中的谎言因子

谎言因子 Lie Factor,LF

衡量可视化中表达的数据量与数据之间的夸张程度的度量方法。

谎言因子=数据所对应的图形元素的相对变化量 / 数据的真实变化量

当LF=1，认为图表没有对数据进行扭曲，是一个可信的可视化设计。

在实际当中，应当确保各部分图形元素的LF在[0.95,1.05]范围内，否则，所产生的图表认为已经丧失了基本可信度。

可视化原则

准确地展示数据（最重要）

节省空间

消除不必要的“无价值”图形

在最短时间内传达最多的信息

节省笔墨合理范围内最大化数据墨水比：

可视化图形由墨水和空白区域构成

数据墨水：可视化图形当中不可擦除的核心部分被称为“数据墨水”。数据墨水可以用来绘制散点和对应标签。非数据墨水值得是不能描绘有价值信息的墨水，并非所有的非数据墨水都没有用，它可用于绘制坐标轴和刻度线。

擦除数据墨水将减少图形所传达的信息量

数据墨水占比：可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的墨水中的比例

两个数据擦除的原则：

擦除非数据墨水

擦除冗余的数据墨水（重复显示信息的数据墨水）

视觉感知

视觉感知就是客观事物通过人的视觉在人脑中形成的直接反映。

格式塔理论：较为系统地对人类如何发现图形元素之间的相关性进行了全面总结。

就近原则：当视觉元素在空间距离上相距较近时，人们通常倾向与将他们归为一组。将数据元素放在靠近的位置，可以突出它们之间的关联性。
相似原则：形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体。
连续性原则：人们在观察事物的时候很自然地沿着物体的边界，将不连续的物体视为连续的整体。
闭合原则：有些图形可能本身是不完整或者不闭合的，但主体有一种时期闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征。
对称性原则：对称的元素被视为同一组的一部分。
图形与背景关系原则：大脑通常认为构图中最小的物体是图形，而更大的物体则是背景。跟凹面元素相比，凸面元素与图形相关联更多些。

视觉编码

视觉编码是已汇总将数据信息（属性+值） 映射成可视化元素（可视化符号+视觉通道） 的技术。

可视化符号：在可视化中表现数据元素（点、线、面）或元素之间的关联（闭包、连线）。

视觉通道：基于数据属性，控制可视化的符号展现样式，例如，点可以根据代表的数据属性不同有不同的形状和颜色。视觉通道有数量通道（像素数据的数字属性：位置，长度，角度、面积、体积、饱和度等，比如饼图）、标识通道（显示数据的分类属性，包括空间区域，动向、形状等）。

视觉编码优先级：

利用数量通道编码表示数值属性：位置通道是最精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率，之后是体积。
利用标识通道表示分类属性时：划分空间区域最为有效，其后依次是色向、动向、形状。

前端可视化库

D3：D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。上手一定门槛。
- 简单柱状图示例:observablehq.com/@d3/bar-cha…
Vega: 一种可视化语法。通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图。Vega更推荐使用。
- 简单柱状图示例:Vega Editor
G2：一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，可以无需关注图表各种的繁琐的实现细节，一条语句即可使用Canvas或SVG构建出各种各样的可交互统计图表。
- 简单柱状图示例:图形元素 | G2 (antv.vision)
ECharts：使用JavaScript实现的开源可视化库，可以运行在PC和移动端，兼容大部分浏览器。提供直观，交互丰富，可高度个性化定制的数据可视化图表。
- 简单柱状图示例:Examples - Apache ECharts

前端项目中使用可视化工具

在登录注册界面、展示界面以及涉及交互的界面，可视化的加持可以提高用户体验，一些整洁、酷炫的设计会给项目带来更大的用户以及更完善的开发机制

在项目中使用Echarts,需要先echarts.js文件；直接在html中引入即可使用；
准备一个容器来放置绘制后的结果；
为容器的图表元素进行初始化echarts.init( );
之后可以进行数据的配置，图表类型、颜色、字体大小、标题等等都可以进行配置；
将数据填充到对象中，可视化后展示到容器中

数据可视化初识 | 青训营笔记