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

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

本节课学到的内容

1、了解数据可视化的概念和基本原则

2、能够识别出不好的，甚至是有误导性的可视化呈现

3、了解一些面向前端的数据可视化工具

什么是数据可视化

数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息

数据可视化主要涉及信息技术、自然科学、统计分析、图形学、交互等多种学科

生活中的数据可视化

例如地图

数据可视化分类

分为三个学科 科学可视化、信息可视化、可视分析

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

科学可视化是可视化最早的一个跨学科研究与应用领域，随着计算机运算能力的迅速提升，人们建立了规模越来越大，复杂程度越来越高的数值模型，从而造就了形形色色体积庞大的数值型数据集。同时，人们不但利用医学扫描仪和显微镜之类的数据采集设备产生大型的数据集，而且还利用可以保存文本、数值多媒体信息的大型数据库来收集数据。

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

在二十世纪90年代初期，可视化也日益尤为关注数据，包括那些来自商业、财务、行政管理、等大型数据集合，因此人们发起了一个新的，称为“信息可视化”的研究领域，旨在为许多应用领域之中对于抽象的异质性数据集的分析工作提供支持。因此，21世纪人们正在逐渐接受这个同时涵盖科学可视化与信息可视化领域的新生术语“数据可视化” 。

3、可视分析： 对分析结果的直观展示，

为什么要可视化

• 记录信息
• 分析推理
• 证实假设
• 交流思想

可视化设计原则和方法

可视化设计原则

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

常见的错误可视化

01、透视失真

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

02、图形设计 & 数据尺度

图形的每一部分都会产生对其的视觉预期：

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

03、数据上下文

谎言因子

控制图形中的谎言因子（Lie Factor, LF）：

谎言因子：衡量可视化中所表达的数据量与数据之间的夸张程度的度量方法。

谎言因子 = 数据所对应的图形

当LF = 1时，我们认为图表没有对数据进行扭曲，是一个可信的可视化设计。

在实际当中，应当确保部分图形元素的LF在【0.95,1.05】范围内，否则，所有产生的图表认为已经丧失了基本可信度。

可视化设计原则

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

可视化设计方法

最重要的是展现数据

合理范围内，最大化数据墨水占比

• 擦除非数据墨水
• 擦除冗余的数据墨水

视觉感知

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

什么是视觉感知？

感知

是指客观事物通过人的感觉器官在人脑中形成的直接反应。 那么，视觉感知就是客观事物通过人的视觉在人脑中形成的直接反应

引导注意力，高效传达信息

研究表明，人类对于颜色、形状、运动，这些视觉属性，是在不同通道上并行处理的，并且人类能在200ms内快速辨别，这些属性被称作具有 “预感知” 特性。

格式塔理论

就近原则

• 当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组。
• 将数据元素放在靠近的位置，可以突出它们之间的关联性

相似原则

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

连续性原则

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

闭合原则

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

共势原则

如果一个对象中的一部分都向共同的方向运动，那这些共同移动的部分就易被感知为一个整体

对称性原则

对称的元素被视为同一组的一部分

图形与背景关系原则

• 大脑通产认为构图中最小的物体是图形，而更大的物体是背景
• 跟凹面元素相比，凸面元素与图形相关联更多些

视觉编码

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

可视化符号：

可用于在可视化当中表现数据元素或元素之间的关联

• 当表示元素时Mark包括：点、线、面

- 当表示关系时Mark包括：闭包、连线

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

D3

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

Vega

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

ECharts

一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器

总结

我对于数据可视化的理解就是将一些数据转换为图标等形式来更好地呈现出想展示的信息，例如想展示一些数据，可以将这些数据制成折线图或条形图，然后来就更更好的展示出这组数据的规律等

学到这我想大家也对数据可视化有了初步的认识了吧，不如现在就开始尝试使用这些工具练习一下吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com