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

143 阅读4分钟

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

一、本堂课重点内容:

  • 数据可视化概念及原则
  • 相关视觉原理
  • 了解可视化工具

二、详细知识点介绍:

数据可视化其实涉及到生活中的方方面面,大家首先想到的可能是excel图表,各种柱状图等等的数据可视化,实际上远不止此。地图是可视化,词云是可视化,甚至温度计也是数据可视化的一种。

数据可视化概念及原则

我个人的理解:

数据可视化就是将具体的量或信息以更直观更容易分析的图像或其他具象化形式的表达法。

数据可视化的分类

  • 科学可视化

科研所需要用到的实验数据转化为直观展示,如各种物理模型、DNA模型等

  • 信息可视化

对抽象信息的转化,如地图、文本等

  • 可视分析

是一个跨领域方向,结合数据分析、人机交互的可视化

为什么可视化

  • 记录信息

  • 分析推理

  • 证实假设

  • 交流思想

有了数据可视化可以让难以理解分析的信息有更直观的体现,无论是生活中还是科研中都大有用处。

可视化设计原则

反例:

糟糕的:

image.png

  • 信息冗杂

过多的信息输入让容易重点丢失

  • 视觉效果差

图形or色彩等设计不当搭配不佳导致视觉冲击弱或感官不明显

  • 难以理解

错误的:

  • 透视失真

不同角度or视觉元素感知程度影响数据实际体现

  • 图形设计&数据尺度不当

概括来说就是会影响视觉效果

  • 数据缺少上下文

上下文可以补充数据相关信息,提升表达效果,缺少上下文容易导致数据表达偏差。

谎言因子

谎言因子=数据所对应的图形元素的相对变化量数据真实变化量谎言因子 = \frac{数据所对应的图形元素的相对变化量}{数据真实变化量}

控制谎言因子,超出标准范围[0.95,1.05]则说明图表失去基本可信度。

设计原则

最短的时间、最少的空间、最少的笔墨、最多的信息内涵

换句话说是

  • 准确展现数据

  • 节省笔墨,节省空间,消除无价值图形

  • 最大化数据墨水占比(注:可视化图形中不可擦除的核心部分为数据墨水)

    • 擦除非数据墨水

    • 擦除冗余数据墨水

  • 最短时间传达最多信息

视觉感知

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

根据心理学的相关研究,说明了不同数据表达形式有不同效果,从而以此来优化数据可视化的方向。

  • 相对判断和视觉假象

  • 视觉突出

  • 格式塔理论:

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

视觉编码

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

  • 可视化符号

用于表示数据元素or数据关系

  • 视觉通道

    • 数量通道:表示数值属性

    • 标识通道:显示分类属性

不同视觉编码在表达信息的作用和能力上有不同特性:如位置表示数量通道最精确、划分空间区域为标识通道最有效

可视化工具

简单介绍几个可视化工具。

D3.js

开源的JavaScript视觉可视化函数库

Vega

一种可视化语法,用JSON格式描述可视化视觉外观和交互行为,使用Canvas或SVG生成视图

  • 声明式语言

G2

一套面向常规统计图表,以数据驱动的高交互可视化图形语法。

  • 高交互

  • 高易用性

  • 高扩展性

ECharts

使用JavaScript实现的开源可视化库

  • 流畅跨端运行

  • 高兼容性

三、课后个人总结:

今天的课程主要简单介绍了数据可视化的设计原则以及相关的视觉原理,还介绍了一些数据可视化的工具,虽然内容不多,但讲的比较透彻。其中设计原则以及相关视觉原理部分,引入了心理学的知识,让我更加容易理解“为什么这样做”。其中也举了很多例子来说明不同数据可视化的效果。数据可视化不仅是前端中经常使用到,生活中也是,所以,学好数据可视化是很有必要的。

如有错漏欢迎指出,谢谢。