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

笔记小结： 本节课何菲菲老师详细讲解了数据可视化的基本概念，拓展了可视化设计的基本原则以及面向前端的可视化工具……因讲解详尽，内容较多，我分两篇笔记进行记录，此部分包含后两章节的笔记内容。现对照课程内容顺序将笔记补充如下。
拓展链接： 【前端专场学习资料六】第四届字节跳动青训营 - 掘金 (juejin.cn)

04. 视觉编码

视觉编码（ Visual Coding ） 是指在个体接收外界信息时，对外界信息的视觉刺激进行编码，如：对颜色、数字、字母、图形等视觉刺激的信息进行编码。

可视化符号

用于在可视化当中表现数据元素或元素之间的关联。
- 当表示元素时Mark包括:点、线、面
- 当表示关系时Mark包括:闭包、连线

视觉通道

视觉通道(Channel) :
- 基于数据属性，控制可视化的符号展现样式，例如，点根据其所代表的数据属性的不同可有不同的形状与颜色。
视觉通道有两种类型
- 数量通道(Magnitude Channel)
  - 用于显示数据的数值属性（定量/定序)
  - 包括:位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。
- 标识通道(ldentity Channel)
  - 用于显示数据的分类属性（是什么/在哪里)包括:空间区域、色向、动向、形状

视觉编码的优先级

不同的视觉编码在表达信息的作用和能力上有不同的特性

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

视觉编码表达案例

面积
数量

05. 基础统计图表

基础图表-柱状图(Bar)

将柱子的高度（或宽度)映射到数值大小
最基础的柱形图，需要一个分类变量和一个数值变量。
柱状图必须以0作为基准线，可以表示正值或负值
在柱状图中，柱子可以分组展示
柱状图是比较分类的数据的最佳选择

基础图表-饼图(Pie)

每个扇形白的弧长(以及圆心角和面积)大小，表示该种类占总体的比例
饼图最显著的功能在于表现 “占比”
饼图一般需要一个分类数据字段、一个连续数据字段
分类字段的数据，在图表使用的语境下，应当构成一个整体（例如一班、二班、三班，构成了整个高一年级)，而不能是独立、无关的。
由于饼图用面积取代了长度，从而加大了对各个数据进行比较的难度，当需要对数据进行比较，分清孰大孰小，尤其是当数据接近时，柱状图更加合适。

基础图表-散点图(Scatter)

—般通过点在空间上的位置信息来编码数据。
点可以根据需要绘制成不同的颜色。
点既可以是一个圆形，也可以用其他不同形状来替代。形状也是一个重要的视觉通道，用于编码不同数据信息。
可以通过更复杂的组合图形(glyphs)来编码多维度数据。
散点图适用于分析变量之间是否存在某种关系或相关性。
散点图适用于分析变量之间相关性的强弱，我们可以通过查看图上数据点的密度来确定相关性的强弱。

折线图

大多数情况下，折线图适用于x轴为连续数据的场景，但:
- 也可以在x轴为离散数据时使用;
- 甚至可以用于分类数据时使用，如果分类数据的顺序是有意义的。
  - 以上两种情况在插值计算时要格外注意

06. 面向前端的可视化工具介绍

D3

D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。

Bar Chart Remix / D3 / Observable (observablehq.com)

D3.js（Data-Driven Documents）是一个使用动态图形进行[数据可视化]的[JavaScript程序库]。与[W3C]标准兼容，并且利用广泛实现的[SVG]、JavaScript和[CSS]标准，改良自早期的[Protovis]程序库。与其他的程序库相比，D3对视图结果有很大的可控性。D3是2011年面世的，同年的8月发布了2.0.0版。到2018年4月，D3已被更新到了5.5.0版。