数据可视化基础 ｜ 青训营笔记

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

什么是数据可视化

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

数据可视化分类

1. 科学可视化，科学实验数据的直观展示
2. 信息可视化，对抽象数据的直观展示
3. 可视分析，对分析结果的直观展示，及交互式反馈，是一个跨领域的方向

为什么要数据可视化

1. 记录信息
2. 分析推理
3. 证实假设
4. 交流思想

可视化设计原则和方法

能够正确地表达数据中的信息而不产生偏差与歧义

一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少的笔墨为观众提供最多的信息内涵 —— Edward

常见的错误可视化

1. 透视失真

   如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比

   使用清晰、详细和彻底的标签，以避免图形失真和含糊不清

2. 图形设计 & 数据尺度

   图形的每一部分都会产生对其的视觉预期，这些预期往往决定了眼睛实际看到的东西

   错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断

   一个典型的例子：轴刻度，我们期望它们从始至终都能保持连贯且一致

3. 数据上下文

   

可视化设计原则

• 准确地展示数据

• 节省笔墨

  

  

• 节省空间

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

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

视觉感知

可视化致力于外部认知，也就是说，怎样利用大脑以外的资源来增强大脑本身的认知能力

什么是视觉感知

认知过程

格式塔理论

• 就近原则
• 相似原则
• 连续性原则
• 闭合原则
• 共势原则
• 对称性原则
• 图形与背景关系原则

视觉编码

视觉编码是一种将数据信息映射成可视化元素的技术

可视化符号

视觉通道

视觉编码的优先级

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

D3

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

Vega

Vega 是一种可视化语法。通过声明式语言，可以用 JSON 格式描述可视化的视觉外观和交互行为，并使用 canvas 或 svg 生成视图

G2

一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和拓展性

Apache ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容大部分浏览器，底层依赖矢量图形库 ZRender，提供直观、交互丰富，可高度个性化定制的数据可视化图表