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

麦麦脆汁鸡
96 阅读6分钟

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

一. 数据可视化的基本概念

1. 数据可视化分类

科学可视化：科学实验数据的直观展示。

和信息可视化：对抽象数据的直观展示。

可视分析：对分析结果的直观展示，及交互式反馈，是一个跨领域的方向。

2. 为什么要数据可视化

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

3. 安斯库姆四重奏

二. 可视化设计的基本原则

1. 设计原则和方法

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

1.1. 常见错误

  1. 透视失真
  • 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。
  • 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
  1. 图形设计 & 数据尺度
  • 图形的每一部分都会产生对其的视觉预期：
    • 这些预期往往决定了眼睛实际看到的东西。
    • 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断。
  • 一个典型的例子：轴刻度，我们期望它们从始至终都能保持连贯且一致。
  1. 数据上下文

1.2. 可视化设计原则

  • 准确地展示数据——Show the data, and tell the truth
  • 节省笔墨——Use the least amount of ink
  • 节省空间——Don't waste space
  • 消除不必要的“无价值”图形——Eliminate non-essentials and redundancies
  • 在最短时间内传达最多的信息——Give the viewer the greatest number of ideas in the shortest time

2. 视觉感知

2.1. 视觉感知

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

  1. 视觉感知
  • 感知：是指客观事物通过人的感觉器官在人脑中形成的直接反映。
  • 感觉器官：眼、耳、鼻、神经末梢。
  • 视觉感知：就是客观事物通过人的视觉在人脑中形成的直接反映。
  1. 认知过程
  • 认知心理学将认知过程看成由信息的获取、分析、归纳、解码、储存、概念形成、提取和使用等一系列阶段组成的按一定程序进行的信息加工系统。
  • 科学领域中，认知是包含注意力、记忆、产生和理解语言．解决问题,以及进行决策的心理过程的组合。
  • 人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引。
  • 在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。

2.2. 格式塔理论

  1. 就近原则
  • 人们会将彼此相邻的元素视为一组。在设计时要注意使用间距将元素组合在一起；使用较大的间距来分隔大的内容组，再使用较小的间距来分隔大内容组中的小内容组。
  • 应用位置：导航、卡片、横幅、列表页、分页。

  1. 相似原则
  • 人的眼睛会把具有相似特征的元素当成一个整体，认为这些元素具有相同的作用。
  • 应用位置：导航、链接、按钮、内容页。
  1. 连续性原则
  • 用户倾向于把连续排列的元素视为一个整体，这条原则与对称性和相似性密切相关；通过在序列上创建相似且重复的元素，引导用户的视线方向，使操作更加连贯和清晰。
  • 应用位置：菜单和子菜单、列表、产品页、轮播页。

  1. 闭合原则
  • 当看到不完整的图像时，我们会依据已有的经验把不完全封闭的图像当成一个统一的整体，这是在平面或logo设计中常用到的原则。
  • 应用位置：图标、加载、数据可视化。

  1. 共同区域原则
  • 通过信息分组和内容组织，实现内容的组合，有助于提升内容的层次结构和可扫描性。
  • 应用位置：卡片、内容、服务、摘要。

  1. 共同命运原则
  • 向同一方向移动的元素被认为比静止或向另一个方向上移动的元素更相关，这个原则有利于建立不同分组或状态之间的关系。
  • 应用位置：导航/下拉、折叠条目、工具提示、产品滑块、滚动条。

  1. 对称性原则
  • 我们喜欢看到对称且平衡的事物，它是所设计领域中最常用和最安全的原则，有助于营造一种稳定感和秩序感。
  • 应用位置：产品展示页、列表、导航以及任何内容丰富的页面。

3. 视觉编码

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

3.1. 可视化符号

可视化符号(Mark)：用于在可视化当中表现数据元素或元素之间的关联。

  • 当表示元素时Mark包括：点、线、面。
  • 当表示关系时Mark包括：闭包、连线。

3.2. 视觉通道

视觉通道(Channel) ：基于数据属性，控制可视化的符号展现样式。例如，点根据其所代表的数据属性的不同可有不同的形状与颜色。

视觉通道有数量通道和标识通道两种类型。

  1. 数量通道(Magnitude Channel)

用于显示数据的数值属性（定量/定序）

包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。

  1. 标识通道(ldentity Channel)

用于显示数据的分类属性（是什么/在哪里）

包括:：空间区域、色向、动向、形状。

3.3. 视觉编码的优先级

不同的视觉编码在表达信息的作用和能力上有不同的特性。

  • 当利用数量通道编码表示数值属性时：位置通道是最为精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。
  • 当利用标识通道表示分类属性时：划分空间区域最为有效，其后依次是色向、动向、形状。

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

1. D3

D3.js 是用于数据可视化的开源的 JavaScript 库，被认为是最好的 JavaScript 可视化框架之一。

2. Vega

Vega 是一种可视化语法。通过声明式语言，可以用 JSON 格式描述可视化的视觉外观和交互行为，并使用 canvas 或 svg 生成视图。

3. G2

一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和拓展性。

4. Apache ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容大部分浏览器，底层依赖矢量图形库 ZRender，提供直观、交互丰富，可高度个性化定制的数据可视化图表。

avatar
文章
阅读
粉丝