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

54 阅读2分钟

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

课程内容与目标

  • 了解数据可视化的概念和基本原则
  • 能够识别出不好的,甚至是有误导性的可视化呈现
  • 了解一些面向前端的数据可视化工具

了解数据可视化的概念和基本原则

什么是数据可视化

生活中的数据可视化

image.png

image.png

数据可视化分类

  • 科学可视化
  • 信息可视化
  • 可视分析

image.png

为什么要数据可视化

  1. 记录信息
  2. 分析推理
  3. 证实假设
  4. 交流思想 安斯库姆四重奏

image.png

image.png

可视化设计原则和方法

糟糕的可视化呈现

image.png 错误的可视化呈现

image.png 可视化设计原则

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

image.png 常见的错误可视化

  • 透视失真
  • 图形设计&数据尺度
  • 数据上下文

透视失真

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

image.png 图形设计&数据尺度

image.png 数据上下文

image.png 可视化设计原则

image.png

image.png

视觉感知

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

image.png 什么是视觉感知

image.png 认知过程

image.png 总结

image.png 格式塔学派

image.png

image.png 格式塔理论-就近原则

image.png 格式塔理论-相似原则

image.png 格式塔理论-连续性原则

image.png 格式塔理论-闭合原则

image.png 格式塔理论-共势原则

image.png 格式塔理论-对称性原则

image.png 格式塔理论-图形与背景关系原则

image.png

视觉编码

将数据信息映射成可视化元素的技术。

image.png

image.png 可视化符号

image.png 视觉通道

image.png 视觉编码的优先级

image.png

面向前端的可视化工具

D3

image.png Vega

image.png G2

image.png ECharts

image.png 使用图表表达

image.png

image.png