可视化2 | 青训营笔记

143 阅读6分钟

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

交互(Interaction)

静态的数据展示并不能满足用户需求,很多时候我们需要提供交互形式,使得用户可以对数据进行多维度的探索。《Visualization Analysis & Design》一书对交互进行了分类,分为以下9种。

  • Change 改变
  • Juxtapose 并列
  • Filter 过滤
  • Select 选择
  • Partition 拆分
  • Aggregate 聚合
  • Navigate 导航
  • Superimpose 叠加
  • Embed 镶嵌

随着场景和技术的发展,更多样的交互形式也在不断的出现,但是目标都是为了进行更好的数据探索分析。

例子:

第一个例子应用导航功能来切换数据,结合地理位置的变换来讲述内容。

第二个例子是在图可视化中常见的交互场景,通过缩放对数据进行过滤,点击节点查看有关联的其他节点信息。

solutions-public.toucantoco.com/demo/22005?…

第三个例子展示的是数据分面,形式变换的例子。

(timelinestoryteller.com/)

第四个例子是一个刷选操作的例子。

动画(Animation)

动画在可视化作品中的作用受到的关注越来越多,目前人们比较关注的作用有如下几个方面:

  • 体现数据变化过程
  • 引导观众的注意力
  • 增强美观度

根据动画的对象,我们可以将动画分为图元动画、组件动画和全局动画。同时,人们也对经常使用的动画效果进行了抽象和总结,比如缩放、旋转、飞入、飞出等。根据动画的实际又有入场、出场、更新等分类方式。

6.1 图元动画

下图是对图元动画的一个简单总结。

示例:

  • 缩放动画

  • 渐变动画

  • 飞入动画

  • 失焦退场

6.2 全局动画

全局动画简单总结如下:

  • 全局遮罩转场

  • 全局 - 局部切换

  • 粒子流动效果

  • morphing 动画

echarts.apache.org/examples/zh…

实例(Cases)

展示一些具体的数据集的可视化实现方案。

7.1 多维数据可视化

人们直接去分析多维数据,往往是非常困难的,借助可视化可以极大的提升效率。对多维数据进行可视化的方法也很多,这里简单介绍几种。

7.1.1 散点图 & 散点图矩阵

普通散点图可以通过大小、颜色和位置表达三个维度的数据,但是这对于更多维的数据来讲是远远不够的,于是诞生了散点图矩阵。

散点图矩阵中每个散点图表示两个维度之间的数据关系。

假设有如下图所示的数据:

每一行代表一个国家一年的观察数据,列代表变量(这种格式的数据被称作整洁数据,tidy data),其中有两个类别列(国家和洲)和四个数值列。这些列简单易懂:life_exp 是出生时的预期寿命,以年为单位,popis 是人口数量,gdp_per_cap 是人均 GDP(以国际元)为单位。只考虑数值类型属性之间的关系, 可生成如下的散点图矩阵:

散点图矩阵可以进一步扩展为普通的矩阵,如下图:

7.1.2 平行坐标轴

平行坐标轴方法中,数据的不同维度被显示为平行的坐标轴,数据元素被表示为一根折线。

这种方法适用于所有表格类型的数据,而且支持异构数据的展现。平行坐标轴方法也扩展出多种显示形式。

7.1.3 Glyph

Glyph 是可以同时使用多个视觉通道,例如 图形(shape)、颜色(colour)、文本(texture)、大小(size)、角度(orientation)、比例(aspect ratio)、曲率(curvature)的一种组合图元。同时每个glyph 可以单独被识别出来,为多场融合可视化提供了可能。

比如人脸图,可以通过五官要素对多个变量进行编码。

From 《The Grammar of Graphics》

下图的是一个温度计组件。水银高度和温度计宽度可以用来展现两个变量。通常可以作为散点图的变种。

from《The Grammar of Graphics》

由于Glyph的灵活性,为创造更自由形式的可视化效果提供了可能,比如下面的向日葵图。

www.researchgate.net/publication…

7.2 树(图)可视化

点线图

邻接图

通过可视化节点之间的相邻位置关系以展现树的拓扑结构,节点的大小,宽度,可以用来展现另外一个数据维度。

包含图

邻接矩阵

7.3 地理信息可视化

地球是一个球体,但是我们需要将球体展现在二维平面上,这就涉及到地图投影,常见的投影方式为魔卡托投影。地图可视化涉及到的视觉属性有 面积、形状、方向、方位、距离和比例尺等。

墨卡托投影的过程其实非常简单,就是将地球展开成一个圆柱,再将圆柱展开成平面。

(更多内容参考 zh.wikipedia.org/zh-cn/%E9%B…

下面我们看几种常见的地图可视化例子。

区域分布地图

等高线地图

commons.wikimedia.org/wiki/File:C…

统计地图

统计地图是虚拟地图,以地图的形式来展现数据。

7.4 叙事可视化

在叙事场景中,为了能让用户结合上下文来理解可视化内容,会增加一些与数据条目无法直接映射的元素。另外一个叙事作品,要从主题到形式,到叙事节奏都进行精心的设计。

下图展现的是人类历史以来大规模传染病的事件。(很清晰)

这幅可视化作品首先从叙事形式上,采用象征发展历程的一个道路形象设计,采用透视效果来表达这一主题。使用了非常形象的病毒形象,采用了易于区分的颜色进行分类,病毒的体积和影响人数做映射。通过这个可视化作品,我们可以非常容易的看到人类历史上那些年底爆发了超大规模的传染性疾病。

下面这个作品具有强烈的政治意图,人文关怀。(看起来有点晕,不够简洁明晰,或许可以调节一下两种线的亮度,包括怎么计算出死者的预计的寿命,没有明确)

guns.periscopic.com/

这幅作品展现的是一年中因为枪击事件而死亡的人数,巧妙的利用动画来展现一个人从生到死的过程。利用小球下坠来表达死亡。同时,一条曲线的两段对比强烈的颜色表达生和死。这个作品最大的亮点在于故事情节的设计,让读者看清表达含义之后,通过快速的视觉冲击来表达情感。节奏由慢到快,跳动的数字和主视图形成联动。