前端数据可视化 | 青训营笔记

116 阅读2分钟

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

什么是数据可视化

数据可视化研究的是,如何将数据转化成为交互的图形或图像等,以视觉可以感受的方式表达,增强人的认知能力,达到发现、解释、分析、探索、决策和学习的目的。

“数据可视化(Data Visualization)和信息可视化(Infographics)是两个相近的专业领域名词。狭义上的数据可视化指的是数据用统计图表方式呈现,而信息可视化则是将非数字的信息进行可视化。前者用于传递信息,后者用于表现抽象或复杂的概念、技术和信息。而广义上的数据可视化则是数据可视化、信息可视化以及科学可视化等等多个领域的统称。”
——《数据可视化之美》

“科学可视化(Scientific Visualization)、信息可视化(Information Visualization)和可视分析学(VisualAnalytics)三个学科方向通常被看成可视化的三个主要分支。这三个分支整合在一起形成的新学科“数据可视化”,是可视化研究领域的新起点。”
——《数据可视化》v

深入可视化

1. 可视化基础技术架构:

  1. 渲染层负责可视化图形图像生成相关 API 研发,比如:绘制圆,三角形等
  2. 算法层负责可视化图形图像生成相关算法,比如:布局算法 绘制元素坐标计算如何分布等
  3. 数据层负责数据相关操作,比如:数据增删改查以及数据与视图进行一致性保证等
  4. 其他层例如通信层 工具层等

2. 数据可视化过程:

  1. 定义要解决问题
  2. 确定要展示的数据和数据结构
  3. 确定要展示的数据的维度(字段)
  4. 确定使用的图表类型
  5. 确定图表的交互

3. 数据可视化出现的问题

3.1 透视失真

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

3.2 图形设计&数据尺度

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

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

3.3 数据上下文

4. 数据可视化原则

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