数据可视化| 青训营笔记

130 阅读3分钟

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

数据可视化基础

什么是数据可视化?

生活中的数据可视化无处不在。 图表
1660489056191.png 地图
1660489080729.png 到底什么是数据可视化?

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

也就是说用各种方式来形象地呈现数据。
数据可视化的分类:

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

1660489260366.png

为什么要数据可视化?

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

安斯库姆四重奏(运用图表很好地展现了数据): 1660489288431.png

可视化设计原则和方法

可视化设计要正确地表达数据中的信息而不产生偏差与歧义

  1. 透视失真
    如果数字由视觉元素表示的,那么它们应该与视觉元素的感知程度成正比。
    使用清晰、详细和彻底的标签,以避免图形失真和含糊不清。
  2. 图形设计&数据尺度
    视觉预期:
    图形的每一部分都会产生对其的视觉预期,而这往往决定了眼睛实际看到的东西;错误的数据洞察,产生于图形的某个地方发生不正确的视觉预期推断。
  3. 联系上下文
    1660489348580.png
    数据补全,展示关系

可视化设计原则

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

如何节省笔墨

要计算最大化数据墨水占比

1660489395344.png

可视化结论

人类视觉系统观察的是变化,而不是绝对值,并且容易被边界吸引。
在可视化设计中,设计者需要充分考虑到人类感知系统的这些现象,以使得可视化结果不会存在阻碍或误导用户的可视化元素。

格式塔学派理论

格式塔学派的理论核心是整体决定部分的性质,部分依从于整体。结构比元素重要,视觉形象首先作为统一的整体被认识。感知的事物大于眼睛见到的事物。
这一理论较为系统的对人类如何发现图形元素之间的关联性进行了全面总结,被广泛应用于视觉设计当中。

  1. 就近原则

当视觉元素在空间距离上接近时,入门通常倾向于将他们归为一组。因此将事物放于相近位置,可以突出它们的关联性。

1660489536161.png 2. 相似原则

当事物在形状、大小、颜色、强度等属性方面比较相似时,这些物体就容易被看做一个整体。

1660489509453.png 3. 连续性原则

人们在观察事物的时候会很自然的沿着物体的边界,将不连续的物体视为连续的整体。

1660489563512.png 4. 闭合原则

有些图形可能本身是不完整,不闭合的,但主体有一种使其闭合的倾向,人们就会很容易地感知整个物体 而忽略未闭合的特征。

1660489580540.png 5. 共势原则

如果一个对象中的一部分都向共同的方向去运动,那这些共同移动的部分就容易被感知

1660489599595.png 6. 图形与背景关系原则

大脑通常认为构图中最小的物体是图形,而更大的物体是背景。 1660489613385.png

视觉编码

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

  • 可视化符号
  • 视觉通道

面向前端的可视化工具

  • D3
  • Vega
  • G2

个人总结

回忆之前的讲课内容,我们不难发现本节课对数据可视化的分析充分印证了如今前端工作的重心逐渐转移向用户的体验。数据可视化是优化用户体验的关键一步,毕竟谁也不想跟着一堆枯燥的数据打交道。