嘎嘎学习之数据可视化 | 青训营笔记

80 阅读2分钟

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

1. 认识数据可视化

生活中处处都有数据可视化

  • 手机内存图
  • 企业营收
  • 各类统计图表
  • 地图
  • ...

image-20220815140548277

image-20220815140534333

1.1 什么是数据可视化

任何一种将数据转换为可视化呈现的都是数据可视化,从很久很久之前人类就开始使用数据可视化了

1.2 数据可视化分类

  • 科学可视化

    • 科学实验数据的直观展示
  • 信息可视化

    • 对抽象数据的直观展示
  • 可视分析

    • 对分析结果的直观展观,以及交互和匹配

image-20220815140850865

1.3 为什么需要数据可视化

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

1.4 可视化设计原则

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

image-20220815143412829

2. 常见的错误的数据可视化

2.1 透视失真

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

image-20220815143636010

2.2 图形设计&数据尺度

图形的每一部分都会产生对其的视觉预期:

  • 这些预期往往决定了眼镜实际看到的东西
  • 错误的数据观察、产生于在图形的某个地方发生的不正确的视觉预期推断
  • 一个典型的例子就是轴刻度,我们希望它从始至终能够保持连贯且一致

image-20220815144027578

2.3 数据上下文

在发布可视化时要补全数据上下文

3. 可视化设计原则

image-20220815144443918

  • 准确的展示数据
  • 节省笔墨
  • 节省空间
  • 消除不必要的“无价值的”图形
  • 在最短的时间内传达最多的信息

最大化数据墨水占比

image-20220815144600147

4. 视觉感知

image-20220815145445436

感知

是指客观事物通过人的感觉器官在人脑中形成的直接反应

感觉器官

眼镜、耳朵、鼻子、神经末梢

视觉感知

是指客观事物通过人的视觉在人脑中形成的直接反应

4.1 认知过程

image-20220815145706572

结论

image-20220815150020813

5. 格式塔理论

image-20220815150506613

就近原则

image-20220815150534328

相似原则

image-20220815150610253

连续性原则

image-20220815150802537

闭合原则

image-20220815150846196

共势原则

image-20220815151129325

对称性原则

image-20220815151203374

图形与背景关系原则

image-20220815151226126

6. 视觉编码

image-20220815151436465

可视化元素

image-20220815151455386

可视化符号

image-20220815151525758

视觉通道

image-20220815151622871

7. 面向前端的数据可视化工具

D3

image-20220815152213777

Vega(更推荐)

image-20220815152326700

G2

image-20220815152714923

ECharts