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

来到人间看海
122 阅读1分钟

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

前端基础班第15节：数据可视化基础。

一.什么是数据可视化

1.生活中的数据可视化

image.png image.png

2.什么是数据可视化

image.png

3.数据可视化分类:

  • 科学可视化
  • 信息可视化
image.png

4.为什么要数据可视化

image.png

二.可视化设计原则和方法

1.糟糕的可视化

image.png

2.错误的可视化

image.png

3.可视化设计原则

image.png

4.透视失真

image.png

5.图形设计&数据尺度

image.png

6.数据上下文

image.png

7.可视化设计原则：

image.png

(1).Data-ink Ratio 最大化数据墨水占比

image.png

案例：

image.png

三.视觉感知

image.png

1.什么是视觉感知

image.png

2.认知过程

image.png

3.相对判断和视觉假象

image.png image.png

结论：

image.png

4.格式塔学派

image.png image.png image.png

原则：

1.就近原则

image.png

2.相似原则

image.png

3.连续性原则

image.png

4.闭合原则

image.png

5.共势原则

image.png

6.对称性原则

image.png

7.图形与背景关系原则

image.png

四.视觉编码

1.什么是视觉编码

image.png

2.可视化元素：

image.png

3.可视化符号

image.png

4.视觉通道

image.png

5.视觉编码的优先级

image.png

五.面向前端的可视化工具

1.D3

image.png

2.Vega

image.png

3.G2

image.png

4.ECharts

image.png
avatar
文章
阅读
粉丝