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

用户835936271820
146 阅读8分钟

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

这是我参加【第五届青训营】笔记创作活动的第14天

今天来学习数据可视化的相关知识。以下是本节课的课程目标与内容：

image-20220814161051408.png

01—什么是数据可视化？

01-1—生活中的数据可视化

image-20220814161138047.png

image-20220814161146938.png

01-2—什么是数据可视化？

任何可以将数据转换为可视化表示的东西(如图表、图形、地图，有时甚至只是表格)。

image-20220814161512669.png

01-3—数据可视化分类

image-20220814161548007.png 科学可视化围绕科学领域(e.g.医学、化学、生物等)的空间测量位置的信息进行直观的展示；

信息可视化处理抽象的，非结构化的数量结合。包括文本、地图等更关注抽象和高维度数据；

可视分析学结合可视化和交互的界面，对数据进行分析和推断，综合了可视化、人机交互、数据挖掘等综合学科。

01-4—为什么要可视化？

01—记录信息；

02—分析推理；

03—证实假设；

04—交流思想

e.g.安斯库姆四重奏

image-20220814162227569.png

image-20220814162240806.png

02—可视化设计原则和方法

02-1—糟糕的可视化呈现

image-20220814162323055.png

02-2—错误的可视化呈现

image-20220814162344583.png

02-3—可视化设计原则

能够正确表达数据中的信息二部产生偏差和歧义。

image-20220814162435214.png

02-4—常见的错误可视化

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

image-20220814162631021.png

02-4-2—图形设计 & 数据尺度

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

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

image-20220814162936934.png

02-4-3—数据上下文

image-20220814163034396.png

02-5—谎言因子

控制图形中的谎言因子(Lie Factor ,LF)

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

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

  • 当LF=1时，我们认为图表没有对数据实时进行扭曲，是一个可信的可视化设计；
  • 在实际当中，应当确保各部分图形元素的LF在[0.95, 1.05]的范围内，否则，所产生的图表认为已经丧失了基本可信度。

02-6可视化设计原则

一个出色的可视化设计可在最短的时间内，使用最少的时间，用最少的笔墨为观众挺乖最多的信息内涵。———Edward R. Tufte

  • 准确地展示数据；
  • 节省笔墨；
  • 节省空间；
  • 消除不必要的“无价值”图形；
  • 在最短时间内传达最多的信息。
02-6-1最大化数据墨水占比(Data-lnk Ratio)
  • 可视化图形由墨水和空白区域构成；
  • 数据墨水：可视化图形当中不可擦除的核心部分被称之为“数据墨水”；
  • 擦除数据墨水将减少图形所传达的信息量；
  • 数据墨水占比：可视化图形中用于展示核心数据的“墨水” 在整体可视化所使用的墨水的比例；
  • Data-ink ratio =(Data-ink) /(Total ink used to print the graphics)

image-20220814172804985.png

02-6-2—Data-ink ratio案例

image-20220814172834899.png

绝大多数墨水都是数据墨水：用于绘制散点和对应标签；

10%-20%的墨水是非数据墨水；

  • 用于绘制坐标轴和刻度线；
  • 并非所有的非数据墨水都没有用(例如坐标轴信息)
02-6-3—提高Data-ink ratio

image-20220814173521439.png

两个擦除原则：

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

非数据墨水是指不能描绘有价值信息的墨水：

  • 有时，非数据墨水会使数据变得混乱不堪；
  • 并非所有的非数据墨水都没有用(例如坐标轴信息)

冗杂的数据墨水描述了信息，但它重复显示了信息。

可视化设计方法最重要的就是展现数据；

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

  • 擦除非数据墨水；
  • 擦除冗杂的数据墨水。

03—视觉感知

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

03-1—什么是视觉感知？

感知：是指客观事物通过人的感觉器官在人脑中形成的直接反映；

感觉器官：眼、耳、鼻、神经末梢

视觉感知：就是客观事物通过人的视觉在人脑中形成的直接反映。

03-1-1认知过程

image-20220814174236592.png

03-1-2相对判断和视觉假象

image-20220814174311088.png

image-20220814174324970.png

结论：

人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引；

在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。

03-1-3视觉突出

研究表面，汉字的顺序不一定能影响阅读。

03-1-4视觉感知

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

image-20220814174623740.png

03-1-5格式塔学派

image-20220814174647627.png

03-1-5格式塔学派

image-20220814174710653.png

image-20220814174719931.png

03-1-5.1就近原则

当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组；

将数据元素放在靠近的位置，可以突出他们之间的关联性。

image-20220814174948315.png

03-1-5.2相似原则

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

image-20220814174956089.png

03-1-5.3连续性原则

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

image-20220814175048215.png

03-1-5.4闭合原则

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

image-20220814175159579.png

03-1-5.5共势原则

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

image-20220814175553163.png

03-1-5.6对称性原则

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

image-20220814175644254.png

03-1-5.7图形与背景关系原则
  • 大脑通常认为构图中最小的物体是图形，而最大的物体则是背景；
  • 跟凹面元素相比，凸面元素与图形相关联更多些。

image-20220814175859379.png

04—视觉编码

法国制图学家[1918-2010]“Semiology of Graphics”[1967]提出视觉编码的理论原则。

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

数据信息：属性＋值；

可视化元素：可视化符号＋视觉通道。

image-20220814180222026.png

04-1—可视化符号

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

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

image-20220814180347899.png

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

image-20220814180423222.png

04-2—视觉通道

image-20220814180449661.png

04-3—视觉编码的优先级

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

image-20220814180514007.png 当利用数量通道编码表示数值属性时：位置通道是最为精确地，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。

当利用标识通道表示分类属性时：划分空间区域最为有效，其次依次是色向、动向、形状。

04-4—视觉编码表达案例

image-20220814180820202.png

image-20220814180828359.png

image-20220814180850961.png

image-20220814180858281.png

05—基础统计图表

基础图表—柱状图(Bar)、饼图(Pie)、散点图(Scatter)、折线图

选择合适的图表

image-20220814181113448.png

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

06-1—D3

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

image-20220814181204466.png

06-2—Vega

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

image-20220814181434228.png

06-3—G2

一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用Canvas或SVG构建出各种各样的可交互的统计图表。

image-20220814181649826.png

06-4—ECharts

一个使用JavaScript实现的开源可视化库，开源流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE9/10/11，Chrome , Firefox , Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

image-20220814181721403.png

06-5—使用图表表达

image-20220814182027043.png

image-20220814182036072.png

image-20220814182045072.png

avatar
文章
阅读
粉丝