这是我参与【第四届青训营】笔记创作活动的第 15 天，今天学习了 数据可视化 的一些知识点
1. 数据可视化的概念和基本原则
1.1 什么是数据可视化
概念
Anything that converts data into a visual representation(like charts, graphs, maps, sometimes even just tables)
1.2 数据可视化的分类
1.2.1 科学可视化
科学实验数据的直观展示
1.2.2 信息可视化
对抽象数据的直观展示
1.2.3 可视分析
对分析结果的直观展现，及交互式反馈，是一个跨领域的方向
1.3 为什么要可视化
- 记录信息
- 分析推理
- 证实假设
- 交流思想
2. 可视化设计的原则以及基础概念
2.1 可视化设计原则和方法
一些糟糕的可视化呈现
显而易见：数据多而杂乱
错误的可视化呈现
原则
- 准确地展示数据
- 节省笔墨
- 节省空间
- 消除不必要的“无价值”图形
- 在最短时间内传达最多的信息
其中最重要的是展现数据 在合理范围内，最大化数据墨水占比
- 消除非数据墨水
- 擦除冗余的数据墨水
能够正确地表达数据中的信息而不产生偏差与歧义
一个出色的可视化设计可在最短的时间内，使用最少的空间，用最少的笔墨为观众提供最多的信息内涵 ——Edward R.Tufte
常见的错误可视化
1. 透视失真
- 如果数字是由数据额元素表示的，那么它们应该与视觉元素的感知程度成正比
- 使用清晰，详细和彻底的标签，以避免图形失真和含糊不清。
2. 图形设计 & 数据尺度
图形的每一部分都会产生对其的视觉预期（visula expectation）
- 这些预期往往决定了眼睛实际看到的东西
- 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断
一个典型的例子：轴刻度，我们期望它从始至终能够保持连贯且一致。
3. 数据上下文
2.2 视觉感知
可视化致力于 外部认知，也就是说，怎样利用大脑以外的资源来增强大脑本身的认知能力
2.3 基础图标
2.3.1 柱状图（Bar）
- 将数字的高度（或宽度）映射到数据大小
- 最基础的柱形图，需要一个分类变量和一个数值变量
- 柱状图必须以0作为基准线，可以表示正值或负值
- 在柱状图中，柱子可以分组展示
- 柱状图是比较分类的数据的最佳选择
2.3.2 饼图（Pie）
- 每个扇形的弧长大小，表示该种类占总体的比例
- 饼图最显著的功能在于表现“占比”
- 饼图一般需要一个分类数据字段、一个连续数据字段
- 分类字段的数据，在图标使用的语境下，应当构成一个整体，而不能是独立、无关的
- 由于饼图用面积取代了长度，从而加大了对各个数据进行比较的难度，当需要对数据进行比较，分清孰大孰小，尤其是当数据接近时，柱状图更加合适
2.3.3 散点图（Scatter）
- 一般通过点在空间上的位置信息来编码数据
- 点可以根据需要绘制成不同的颜色
- 点既可以是一个圆形，也可以用其他不同形状太替代。形状也是一个重要的视觉通道，用于编码不同数据信息
- 可以通过更复杂的组合图形来编码多维度数据
- 散点图适用于分析变量之间是否存在某种关系或相关性
- 散点图适用于分析变量之间相关性的强弱，我们可以通过查看图上数据点的密度来确定相关行动的强弱
2.3.4 折线图
- 大多数情况下，折线图适用于 x 轴为连续数据的场景，但
- 也可以在 x 轴为离散数据时使用
- 甚至可以用于分类数据时使用，如果分类数据的顺序是有意义的
- 以上两种情况在插值计算时需要格外注意
3. 一些面向前端的数据可视化工具
3.1 D3
D3.js 是用于数据可视化的开源的 js 函数库，被认为是最好的js可视化框架之一
简单柱状图示例： observablehq.com/@d3/bar-cha…
3.2 Vega
Vega 是一种可视化语法。通过其声明式语言，可以用 JSON格式化 描述可视化的视觉外观和交互行为，并使用 Canvas 或 SVG 生成视图
代码结构
3.3 G2
一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表
代码结构
3.4 ECharts
ECharts，一个使用 js 实现的开源可视化库，可以流畅的运行在 PC 和移动设备商，兼容当前绝大部分浏览器（IE9/10/11, Chrome, FireFox, Safari等），底层依赖矢量图形库
ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表
代码结构
总结
本文针对于数据可视化的基础概念做了简单的介绍，数据可视化在我们日常中还是比较常见的，因此做前端这款对这部分的内容还是需要好好了解一下~
