数据可视化 | 青训营笔记

48 阅读2分钟

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

什么是数据可视化

  • 任何能将数据转化为一个可见的事物的东西
  • 分类
    • 科学可视化
    • 信息可视化
    • 可视分析
  • 为什么需要可视化
    • 记录信息
    • 分析推理
    • 证实假设
    • 交流思想
  • 安斯库姆四重奏:图表的重要性

可视化设计原则和方法

  • 糟糕的可视化呈现:混乱,抓不到重点
  • 错误的可视化呈现:有误导

正确的表达数据中的信息,不产生偏差与分歧

常见可视化错误

  • 透视失真
    • 如果由视觉元素表示的数据,应与视觉元素的感知程度成正比
    • 使用清晰、详细、彻底的标签,以免图形失真和含糊不清
    • 比如饼状图失真
  • 图形设计和数据尺度
    • 图形的每一部分都会对其产生视觉预期
    • 比如刻度轴,我们希望连贯如一
  • 图表上下文
    • 多列出一些数据

好的可视化设计可以在最短时间、最小空间、最少笔墨让观众获取更多信息

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

最大化数据墨水占比:可视化图形中用于展示核心数据的墨水在整体可视化所使用的墨水中占比最大

视觉感知

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

  • 人类视觉系统观察的是变化,不是绝对值,并且容易被边界吸引。
  • 需要充分考虑人类感知的现象,使得可视化结果不存在障碍和误导用户的可视化元素。

格式塔理论:整体决定部分的性质,部分依于整体。结构比元素重要,视觉形象首先作为统一的整体被认知。

  • 就近原则
  • 相似原则
  • 连续性原则
  • 闭合原则
  • 共势原则
  • 对称性原则
  • 图形与背景关系原则

视觉编码

视觉编码是一种将数据信息(属性+值)映射成可视化元素(可视化符号+视觉通道)的技术

  • 可视化符号
    • 表现数据元素或元素之间的关联
    • 元素如点,线,面;关系如闭包,连线
  • 视觉通道
    • 基于数据属性,控制可视化的符号展现样式
    • 数量通道
    • 分类通道

面向前端的可视化工具介绍

  • D3.js
  • Vega
  • G2
  • Echarts