【青训营】数据可视化基础

友艺
400 阅读9分钟

这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战

授课老师： 何菲菲

目标&内容：

  1. 了解数据可视化的概念和基本原则
  2. 能够识别出不好的，甚至是有误导性的可视化呈现。
  3. 了解一些面向前端的数据可视化工具（附Echarts.js的基本使用）

01.什么是数据可视化

生活中的数据可视化例子比比皆是，比如手机存储的容量，还有游戏中的地图等等。

image.png

image.png

Anything that converts data into a visual representation (like charts, graphs, maps, sometimes even just tables)

数据可视化分类：

  • 科学可视化：科学实验数据的直观展示。（DNA双螺旋结构）
  • 信息可视化：对抽象数据的直观展示。（地图文本）
  • 可视分析（最近兴起）：对分析结果的直观展现，及交互式反馈，是一个跨领域的方向

为什么要数据可视化？

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

例子：安斯库姆四重奏Anscombe's Quartet。

四组表格，每组数据的均值，方差，相关系数等等都相同。如何看出其中的区别呢？

image.png

数据可视化——绘制表格成二维的线段，就能直观地看出其中的区别：

image.png

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

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

下面呈现几个错误的可视化例子：冲击力过大，内容过于杂乱。

image.png

错误的可视化主要可以分为三种类型：

透视失真

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

透视空间里，我们有近大远小的感觉。商家可以利用感知的错觉进行宣传，我们也要警惕被这样的错觉误导。比如苹果全球开发者大会上的市场占用率说明。这里的透视投影的饼状图会使得苹果的19.5%的占用率比21.2%要大。

image.png

图形设计&数据尺度

图形的每一部分都会产生对其的视觉预期 (visual expectation) :

  • 这些预期往往决定了眼睛实际看到的东西;
  • 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断。

一个典型的例子:轴刻度，我们期望它从始至终能够保持连贯且一致。

image.png

数据上下文

需要提供更加全面的信息

image.png

谎言因子

控制图形中的谎言因子(Lie Factor, LF) ：衡量可视化中所表达的数据量与数据之间的夸张程度的度量方法。

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

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

可视化设计原则

  • 准确地展示数据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

  • 最大化数据墨水占比（Data-lnk Ratio）

    • 可视化图形由墨水和空白区域构成
    • 数据墨水:可视化图形当中不可擦除的核心部分被称之为“数据墨水
    • 擦除数据墨水将减少图形所传达的信息量
    • 数据墨水占比:可视化图形中用于展示核心数据的“ 墨水”在整体可视化所使用的墨水中的比例

image.png

绝大多数墨水都是数据墨水

  • 用于绘制散点和对应标签 10% - 20%的墨水是非数据墨水
  • 用于绘制坐标轴和刻度线
  • 并非所有的非数据墨水都没有用(例如坐标轴信息)。

比如下方的生物孕育时间，坐标轴和刻度线（非数据墨水）对于理解该图是十分必要的。

image.png

03. 视觉感知

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

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

感觉器官：眼、耳、鼻、神经末梢。那么,

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

认知过程

认知心理学将认知过程看成由信息的获取、分析、归纳、解码、储存、概念形成、提取和使用等一系列阶段组成的按一定程序进行的信息加工系统。

科学领域中，认知是包含注意力.记忆、产生和理解语言、解决问题,以及进行决策的心理过程的组合。

相对判断 和视觉假象

下面的A和B两个图片哪一种颜色更深一些？

image.png

我们都会认为A的颜色比B的颜色要深。但是，当我们拿起取色器对比发现，A的颜色RGB是(120,120,120)，B的颜色是#787878。两个颜色居然相等！下面是拿同色遮罩的效果。

image.png

结论：

  • 人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引。 在可视化设计中,设计者需要充分考虑到人类感知系统 的这些现象，以使得设计的可视化结果不会存在阻碍或 误导用户的可视化元素。

格式塔学派

格式塔学派的理论核心是整体决定部分的性质，部分依从于整体。结构比元素重要，视觉形象首先作为统一的整体被认知。感知的事物大于眼睛见到的事物。比如下面的几个图片，按照这样的理论，我们是先看到“整体”的人物，而后才会去关注“部分”的动物。

image.png

格式塔理论

格式塔理论( Gestalt Laws)较为系统的对人类如何发现图形元素之间的相关性进行了全面总结,波广泛的应用在了视觉设计当中。

image.png

就近原则

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

相似原则

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

连续性原则

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

闭包原则

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

共势原则

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

对称性原则

  • 对称的元素被视为同一组的一部分。将上面和下面进行对比。

图形与背景关系原则(Figure-ground)

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

04. 视觉编码

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

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

  • 当表示元素时Mark包括:点、线、面。
  • 当表示关系的时候，Mark包括闭包和连线。

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

视觉通道有两种类型

  • 数量通道(Magnitude Channel)：用于显示数据的数值属性( 定量/定序)，比如位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。

  • 标识通道(ldentity Channel)：用于显示数据的分类属性( 是什么/在哪里)，比如空间区域、色向、动向、形状

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

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

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

D3

D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。 简单柱状图示例: . observablehq.com/@thetylerwo…

Vega（推荐）

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

G2

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

ECharts

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

附. Echarts.js的基本使用

文档：echarts.apache.org/handbook/zh…

  1. 下载并引入Echarts.js
  2. 配置options，通过获取DOM元素，展示在HTML内部。设置的options中，主要设置xAxis，yAxis两个轴。数据通过series进行配置，series中的type属性表示以何种类型展示。比如bar,pie,line等等。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
avatar
文章
阅读
粉丝