面向时间的数据可视化

avatar
前端工程师 @字节跳动

本文作者:玄魂

原文链接:zhuanlan.zhihu.com/p/548701607


领域概念(Domain Concept)

时间特性(Time Characteristics)

时间在不同领域都有着不同的含义和分类,我们这里借鉴《Visual Methods for Analyzing Time-Oriented Data》中对面向数据可视化的时间的总结。

****线性时间(Linear Time)和循环时间(Cyclic Time)

现在、过去和将来,是人们对时间的一个基本定义,时间从无穷远处开始,又向无穷远处延伸,形成了一条时间线。这条时间线是由可以无限细分的时间点组成的。

图片

 然而人们发现时间虽然在一条线上变化,但是自然现象却呈现了周期规律,比如昼夜更替,四季变化。

以无穷作为尺度来衡量时间,是没有办法指导生产和生活的,于是有了对时间的切分,分出来的“段”可以在一条水平的时间线上,进行延展,同时与自然现象相对应,这些段是不断重复的。“日复一日,年复一年”,就是一个又一个的时间循环,对应的是地球自转和太阳公转这样的自然现象;“月” 对应的是月球围绕地球旋转的自然现象。

图片

在对时间不断进行抽象的同时,人们发明了各种“时间段”的概念,比如“星期”,比如西游记开篇中说的“元”和“会”。

“蓋聞天地之數,有十二萬九千六百歲為一元。將一元分為十二會,乃子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥之十二支也。每會該一萬八百歲.....”

“分段”和“循环”在数据分析中的重要意义之一是为了发现周期性规律。但是有的时候任务之一就是寻找“周期”,所以对时间段的划分会更灵活。

时间点和时间间隔(Time Points and Time Intervals)

时间可以同时作为离散数据和连续数据(Continuous and Discrete)来看待,当作为离散数据看待的时候,可以看做欧几里得(Euclidean)几何空间中的一个点。时间点没有长短,只有一个“位置” 坐标。

时间间隔由3个基本元素来定义:起始时间点,终止时间点,时间跨度。我们常见的年、月、日、时、分、秒都是时间间隔。由于一个时间间隔包含无数个时间点,所以时间点和时间间隔存在如下关系:

图片****

事件(Event)和关系(Relation)

在一个特定的时间点或者时间周期内发生的事情,我们称之为“事件”。事件通常就是数据库中的一条数据记录,这条记录必然包含(或者关联)一个时间字段。通常事件会包含多个属性数据。

事件不是凭空发生的,一个事件必然有触发因素,同时事件从触发到消亡的过程中,会和其他事件产生关联,这种关联称之为关系。比如社交媒体中的关注、评论这样的事件,必然存在事件的发起者和接收者,用户可以对评论再评论从而产生嵌套关联。

图片

呈现策略(Visualization)

关于时间的隐喻

人类对时间的探索已经持续几千年,在这个过程中很多形象化的隐喻通过文字或者日常交流被传承。比如“历史的车轮”。

图片

 

图片

比如“时间如流水”。

图片

比如“光阴似箭”.......

图片

这些形象化的表达并不能直接应用于数据可视化,但是我们选择更靠近某种隐喻的表达方式,更容易让人们理解数据背后的情感特性。比如河流图,和时间如水的隐喻是相近的,用来表达随着时间变化某一特征数据的变更就很恰当。

在可视化叙事场景,应用隐喻,可以让作品更有力量。

线性时间(Linear Time)

线性时间最常见的形式就是将时间放置在一条水平(或竖直)的时间轴上。

图片

en.wikipedia.org/wiki/Timeli…

 主题河流图

图片

线性时间在展现上可以理解成只有一个时间间隔的图表。在实际应用中,通常也会切分成小的间隔和时间点进行组合呈现,具体根据时间数据的特性是时间点或者间隔,可以采用不同的可视化形式,参见2.3 和 2.4 节。

下面的这幅《The Horse in Motion》是典型案例,利用抽取连续时间内的时间点的数据来对现象进行分析,分析目的为“马奔跑的时候,四只脚是否会同时腾飞?”

图片

 en.wikipedia.org/wiki/File:T…

循环时间(Cyclic Time)

上面我们已经看到,最简单的时间表示方法就是将时间映射到一条直线上。但是当我们表达循环时间或者探寻数据中的周期规律的时候,直线的表示方法缺点就很明显了。

结合时间的隐喻中的几个意象,“环”是表达重复时间的一个常见方式。如何将一条直线变成“环”呢?

看下图:

7b1ecb53abe4b2223787334d703b4ad45e7b55b1.gif

“直”变“环”的方式是“螺旋”。我们将时间点均匀的分布在螺旋线上,就形成了“螺旋图(SpiralGraph)"。

图片

commaful.com/play/fritzi…

下面来看一个具体的例子。

图片

上图左侧使用一个线性时间轴,我们虽然很容易看出数据的”峰谷“,但是很难发现变化规律。后面两幅图是使用了螺旋时间轴,中间的图表循环周期是27天,没有发现任何模式。右侧图表的循环周期是28天,可以很明显看到变化周期,同时也可以发现最小的变化周期应该是7天。 

时间点(Time Points)

把时间切成时间点的集合,常规的离散数据的可视化方法都可以用来对时间点进行可视化。

下图使用柱形图来表示特定时间点上某一时间的统计数值,使用点图表示在特定时间点有事件发生。

图片

因为离散时间轴通常都是排序的,所以使用线图和面积图来展示时间点表达趋势和数值大小也是可以的。

时间点可视化另一个常见的类型是日历图,通过颜色、文字和提示信息等多种方式来呈现 event 。

比如下面的《疫情晴雨表》,查看每一天全国范围内的疫情信息。

图片

vis.pku.edu.cn/ncov/barome…

时间间隔(Time Intervals)

对于分段时间的可视化,在坐标轴上很难体现区别,通常使用多段具有“连续特征”的图元(视觉编码中的Interval mark)来表示一段时间。比如连续的曲线,条形等。

甘特图是最常见的一种展现“时间间隔”的图表。

图片

www.gantt.com/

甘特图中表示展现时间间隔的条(bar),通常被称为“规划线(PlanningLines)”。

多个时间序列的展现(Multi Time Series)

堆叠(Stack)

最简单的展现方式就是将多个系列直接以堆叠的方式展现出来。比如下面的线图和面积图。 

Simple Line Graphs

图片

Stacked Graphs

图片

通常面积图堆叠的顺序是按照整个系列来设置的,那么会存在遮挡问题,导致关键数据无法展现。为了解决这个问题,相关研究发明了 Braided Graphs。

Braided Graphs

图片

图片

**
**

极坐标系

图片

 

**
**

分区(Partition)

每个系列占据独立的渲染空间的展示方法叫分区。比如下图,每个人的获奖情况都是一条时间系列,空间上从上到下进行排布。

图片

flowingdata.com/2019/02/12/…

更复杂的情况,需要组合不同的系列。比如下图,上面两个柱形系列是分别对不同事件的统计信息,下面的点系列则是按用户ID进行拆分的细分系列。

图片

分面(Facet)

如果需要按维度进行数据切分,就需要进行分面。比如下面的《太阳黑子活动图》。

图片

sciencemeetsfaith.wordpress.com/2018/07/25/…

另外日历图也是常见的分面方式。

图片

**
**

关系(Relation)

表达事件之间的关系,和通用的关系数据展现没有区别,常见的形式就是连线,辅之以颜色、形状、大小等视觉属性对事件的属性进行编码。

下图使用弧线来表达一条时间线上有关联的时间点。

图片

多个时间系列下,方式类似。

图片

交互(Interaction)

Zoom 、Pan and  Brush

时间数据可视化的交互,和普通图表没有大的差别,大部分存在于对坐标轴的操作,我们可以通过对坐标轴的拖拽,缩放和刷选来修改时间的域值。

4c1b33ee-583e-4a5c-ad8a-67ae6ea7ce6c.gif 正常情况下,直接使用滚轮可以触发缩放操作。

动画(Animation)

动画效果上,和其他类型图表有区分的点主要体现在时间的变化和关系的展现上,我们看几个典型案例。

时间滚动

97c921d3-6bdc-4500-bf60-3ec9394ccfc9.gif

时间轴change

04474bbb-1fd6-4a96-8c6f-ea7373f3297d.gif 时间跳动

6257a576-8027-4f45-90f4-8b8e927ff1bd.gif 多系列联动

391940bd-755b-475c-971f-0c7ac2f72de1.gif 关系连接 9569db23-814b-450f-ab03-8493337da093.gif

c8b88039-2a86-45a0-9c89-924eb6b0b6ca.gif

小结(CONCLUSION)

本文基于数据可视化的领域特征,从数据入手,在常见的面向时间的可视化形式做了简单总结。主要目的是增强我们自研的统计图表能力,所以对三维展现形式,多维数据场景并没有涉及。

 

参考资料:

[1]《Visual Methods for Analyzing Time-Oriented Data》www.researchgate.net/publication…

[2] eventevent.github.io/papers/EVEN…

[3] scu2.anu.edu.au/core/Hgraph…

[4]《Graphical perception of multiple time series》www.academia.edu/2600731/Gra…

[5] idl.cs.washington.edu/files/2009-…

[6] www.researchgate.net/publication…

[7] en.wikipedia.org/wiki/Timeli…

[8] vis.pku.edu.cn/course/data…

[9] vcg.informatik.uni-rostock.de/~ct/timeviz…

[10] courses.ischool.berkeley.edu/i247/f05/re…

[11]《Timeline Trees: Visualizing Sequences of Transactions in Information Hierarchies》www.researchgate.net/publication…