用可视化进行数据叙事阅读笔记

阅读论文: ChartAccent: Annotation for Data-Driven Storytelling(PacificVis2017)
其实基本上是翻译了(死


摘要

(基本上和介绍说的一样的内容)
简单介绍了annotation的重要性,和本文的内容。

介绍

强调annotation的重要性

  • 帮助展示着解释数据中的核心信息
  • 强调图表中重要的部分
  • 吸引观看者的兴趣
  • 可以增加图表的上下文环境
  • 可以加深对图表的记忆和印象

开发ChartAccent的必要性:

  • 主流绘图软件对增加annotation的支持有限
  • 为了增加个性化的annotation``annotation的脱节。

因此以下几个问题需要被着重考虑:

  • annotation有哪些不同的类别
  • 不同类别的annotation一般都各自起什么作用
  • 这些annotation元素可以如何以 用户可修改 + 数据驱动(不与数据脱节) 的方式添加到图表上

从而,在论文介绍的工作中包括:

  • 介绍如何快而简单的为图表增加annotation
  • 基于调查设计了图表的design space
  • annotation的意义和定义(哪些被认为是annotation
  • 工具ChartAccent的介绍
  • 让人们使用ChartAccent对图表进行reproduction,得到了一些经验
  • 日常地口胡未来发展方向

背景和相关工作

对先前的data-driven storytelling可视化的工作中annotation的角色和相关的技术支持和工具支持进行评价。

有关data-driven storytelling中的annotation

data-driven storytelling包括可视化技术支持和笔下或口头的叙事。

文中列举参考文献的内容:

  • [40]中定义data-driven storytellingnarrative visualization,也指出了文本和图形标记的重要性。
  • [29]中也强调了标记和高亮的重要性,特别是在现场演示的情况下
  • [30]也提到对观众理解故事的帮助,并指出通过简单的操作创建标记和对已有的故事元素的再利用是有意义的。
  • [41]给了七种常见的标记技术
  • [14]中通过实际实验给出了标记的重要性的证明
  • [26]认为叙事分四层:数据,可视化表示,交互性和标记,除标记以外的三层都有相当多的技术和工具支持,标记层仍待开发。

本文的目的是枚举和实现,在数据可视化叙事的标记层,可以从哪些方面进行设计。

现在的标记工具

现有的标记工具,主要是要么是为智能产业提供支持,要么是作为可视化分析工具的插件存在的,比如ManyEyes [44], sense.us [25], and CommentSpace [46]

Data-aware annotation

annotation对数据有感知?

  • 对交互的支持,与数据有关的图形和文本

几个例子:

  • [12]、[13]中,提供交互的操作
  • [23]中根据查询条件选择标签,根据相关性选择展示的标签
  • [27]提出即时标注的概念,标注在人机交互中自动完成

关于ChartAccent,作者

  • 提供对选择哪些不标记的支持
  • 选择哪些标记是数据驱动的(动态的
  • 哪些标记是静态的,固定不动的(静态的标记同样重要

Interactive visualization authoring tools

Excel不提供Data-driven annotation,Lyra和IVISDesigner支持,但学习时间长,标注过程无趣。
Mr ChartMaker更好一些。

Tableau Desktop从作者的角度看已经做得不错了,然后ChartAccent会提供更多可标记的选择,高亮和强调也做得更加灵活,选中的标记可以不影响周围的直接高亮。

Annotation via programming

当然也可以通过一些可视化编程来实现对图的精准的控制,比如ggplot,d3.js等等。
使用ggplot可以增加复杂的数据标记,甚至可以用很复杂的数据统计模型计算。
但这些都需要编程知识,而ChartAccent不需要,并能提供及时反馈。

ANNOTATION DESIGN SPACE

设计空间的定义不够充分,因此作者收集了图片的语料库来提取。

首先有一些图表元素不被认为是annotation:

  • 柱状图中的柱形,散点图里面的三点,这些与数据直接相关的图形表示不认为是annotation
  • 图表标题,图例,轴,轴标签和刻度线,以及网格线或刻度线。

当然,虽然这些元素不算为annotation,但仍是可以被标记的

最后,主要关注的应该是利用图片可视化来传达信息。

关于被标注图表的调查

实际上是有很丰富的可视化标注的资源的:科学杂志,期刊,政府企业备忘录、在线的演讲中的配图等等。

首先使用的资源是“Quantified Self”资料库,(大概是用数据描述自己的生活这样的意思)。通过这个群体用来传达自身观点的图表,提取的常见标记有:

  • 文字、图形、趋势线、通过颜色或纹理分割突出显示的范围、指示重要值的线

为了扩充设计空间,也从新闻媒体中提取资源,因为他们面向对象广,通常围绕一个故事展开,数量多,易于获取。

到底,作者就可以设定了annotation space的基本样式和annotation的类型

(我觉得作者后面这段真是有点强行口胡)

说什么和机器学习一样,自己提取样式的图库只是训练集,也要测试集来验证他们的是否可以泛化。(讲道理,我觉得要泛化,首先这个训练集大小可以随意变吧,若是不是人工提取的样式,我觉得说还有道理,但如果是人工的话,考虑人工的效率,就不能认为训练集大小可以随意大了)

Anyway,作者收集了一些图,主要是条形图,折线图,散点图。筛选后,选出了257个。

筛选,如果出现两张图,都有写在柱形边的文字,则只留下一个。否则,如果两张图一张有独特的标记(比如柱形图中表示平均值的竖线)则同时保留两个图。在丢弃具有重复注释形式的图表之后,留下了23个经济学人图表和39个WSJ图表。

然后,作者同样再从 The New York Times (10), FiveThirtyEight (11), The Washington Post (11), and Bloomberg Visual Data (12) 又收集了一些条形、折线、散点图,最后收集了106张。

项目图片网页:https:// chartaccent.github.io/#section-survey.

在这个语料库中,类型有:标注的图表的元素、标注的类型、元素的大小颜色宽度和附加的评论。

分析

根据对这些图的调研,把对于标注的设计分为标注格式和标注对象两个格式。

标注由各种各样的目的,因人而异,本文主要关注注释的交流目的。

维度一:注释格式

类型 说明
文本 包括类型: 点值对,上下限,平均值,上下文。属性:大小,字体,位置,对齐等等
图形 类型: 线,箭头,曲线,矩形,椭圆,括号,星型,语音气泡。 目的:可以是非数据驱动的,用来对注释的位置进行区分,或者着重突出某个元素,也可以是数据驱动的,比如线性拟合。(文中图1)
高亮 用来强调或者减弱重要性,一般通过调整填充色和大小
图像 图像/图标属性:大小,不透明度或饱和度,位置,在前景还是背景中。 图像注释提升图表的可记忆性,如图一中的国旗

维度二:注释目标类型

只解释柱状图,散点图和折线图中可能的类型。

类型 说明
数据项 数据项中又有:数据的某个单项、反映数据整体的值(平均值等)、一组有关的数据(11月两个城市的气温)、满足不等式条件的数据、极端值
坐标空间 笛卡尔坐标轴的定量尺度: 比如某个轴对应的属性值之间、特定属性的部分跨度(感觉和数据类型里面不等式条件的数据有点类似诶)。意义主要是:表示一段范围,这段范围不一定要包含数据项,可以为这个范围添加相应的与数据无关的上下文
结构化的图表元素 包括:图表标题,轴,轴标签和刻度线,图例,图表的绘图区域,图表本身。在图表内部,可以有一些前面提到的标注,但在图表外部也可以能额外的上下文和信息(内容较多,在图表内部无法容纳啊)
注释前缀 只是用来更直接地指代注释。图2中的(a) - (k)就是这种类型,在提及时,可以直接说注释(a)。

CHARTACCENT

本节介绍ChartAccent如何实现上面两个方面

与ChartAccent的交互

将创建图表和创建注释分开以能够独立评估注释系统,并支持到其他注释工具的移植

注释对象选择

典型的使用鼠标的点击和拖动实现标注对象的选择。鼠标放在坐标轴的位置,则可以选择坐标对应范围

数据驱动的选择 采用Heer等的设计,可以通过点击一个图例选择整个类的数据
点击后出现的会是默认值,可以在编辑器的Target位置(图3-6)进一步修改目标,比如使用avg等等。Target中支持一些简单的根据数据集的属性得到的公式。包括一组基本统计功能,包括最小值,最大值,平均值和中值。

可以选择超过某值或者低于某值的项等等。

标注格式的调整

每个数据项的注释,都有一个默认格式,可以再editor里调整,另外也提供了手动标注的工具。在editor中还有表示趋势线的开关,可以再editor中调整文字内容,大小,颜色,字体、边框、填充色等等。

使用场景

通过两个场景的解说和视频来讲解如何使用。

场景一

每月的温度图 —— 从2014七月到2015六月的美国各城市平均气温图。 我们想转达的是纽约的气候没有另外两个城市怡人。

为了证实这一点,我们需要强调什么时候另外两个城市的温度比纽约高,利用的是柱状图。

第一步选中所有条形,在editor中调低亮度,来降低整体的显著性

在y轴画一根直线,在editor中输入avg@NewYork(会自动补全),然后生成一个手动的标签“NY’s average”放在直线左边。

接着,在这条线的editor中选择:使用这条线选择(Select Items Using this Line),在下拉菜单中选择Above,并勾选目标城市。

调整完样式后,就可以到处为png或者svg图像。

场景二

使用2000年来数国的生育率和预计寿命。目的:(i)传达更高的生育率与较低的预期寿命相关联的整体趋势,(ii)强调北美和南美国家,(iii)强调美国,中国和印度。

可以建立以这两个值为维度的散点图,添加趋势线来表示两者关系,国家之间用颜色区分。

对于某个州大类,可以通过图例选择,然后使用BubbleSet标注出来。

对于某个国家,以China为例,可以选择China,然后添加国旗作为图片标注。

最后见图1-右。

实现细节

首先实现了ChartAccent.js库来为基于SVG的图表标记(可以使用D3.js生成)。图4表示了CHartAccent.js,Chart和ChartCreator以及终端使用者之间的关系。

使得一个图表“annotatable”,图表创建者首先创建一个ChartAccent 对象,在其中定义好一个图表元素(应该是js中已经设计好了创建函数,然后根据传入的参数画图)– 坐标轴、标记、图例、元数据,数据之间的关系等等, ChartAccent.js中也定义了给图表创建、管理、调整标注的函数,同时也包括了对于不同的标注类型的处理函数。

blabla。

最后,ChartAccent就是一个包括了操作界面和封装了ChartAccent.js的独立工具。虽然目前只支持三种图。

评估

让一些人通过这个工具对一些标注好的图片进行重现,通过实验的结果来说明他们的工具是否是易于学习的,可使用的,高效的。特别是data-driven的标记特别吸引研究者的兴趣。

参加者和设置

11名各行业,频繁使用图表交流的参与者。有酬劳。固定的硬件配置,会录像。

任务和数据集

图6总结了所有任务。每个任务的逐步动画GIF。为练习任务准备了十二个注释图表。

创建这些图表的数据集包括:各个城市的月平均降雨量[48](任务1);西雅图每月降水量[48](任务2);北京空气质素指标[3](任务3);各种车辆的里程数据[32](任务4);各国生育率和预期寿命[18](任务5);Old Faithful Geyser爆发[2](任务6);美国主要城市的月度气温[17](任务7)。

过程

先是一个熟悉ChartAccent的教程,然后使用12个练习任务进一步熟悉任务过程和工具。

在开始任务前,参与者可以描述他们看到的标注,来明确自己需要标注哪些内容,然后开始,最后提交生成一张图片,进行下一个任务。允许重置,平均完成时间是22分钟。

当他们卡住或者提交有误的时候会有提示,当然颜色的偏差和某一些区域的x,y值的偏差不影响,重要的是鼓励参与者尽快完成。标注7个任务的时间平均是15分钟(所以还有7分钟是?)。最后,需要填个问卷。

整个过程长达1.5h。

结果

11个人中9个完成了任务,2人迟到没有足够的时间完成了前五个。

提示和任务完成时间

提供两种提示:一种是错误标注,一种是标注和目标结果之间的差别(多标注或者少标注了什么)

Table1提供了提示数据,总的来说,需要的提示比较少,出现的都是小错误。在任务5出错最多,可能是因为是data=driven的,比较复杂。

图7是各个参赛者完成各个任务的时间,完成时间其实都比较短。在过程比较复杂的Task花的时间比较多。(这个复杂主要是与highlight有关似乎)

用户评价

感觉是一致好评,简单易学,以后会用。

探讨和未来的工作

对带标记图表的反思

简单概括了一下整个项目的流程,然后总结说:自己的项目虽然不能涵盖所有可能的类型,但至少提出了一个框架。

提升和扩展ChartAccent

提出的几个问题:

  • 标记之间的覆盖问题(z-order),通过排序来表示哪个在上面
  • 增加基本的撤销和重做
  • 同时,如果有效地建立表格和其他的一些可视化展示也将进一步研究
  • 决定专注于研发和测试一组支持标注的交互工具
  • 确保ChartAccent.js能够兼容d3.js的结果而不是仅局限于现在ChartAccent工具作的图。
    • 这一目标可能涉及D3.js的解构函数[22]
  • 扩展对其他类型的图的支持(节点图,树状图)

理想的默认样式和模板

在实验中发现默认样式任意出现不符合使用需求的情况,同时用户会有自己的使用倾向,计划允许用户设置自己的使用偏好。

此外,一种样式可能多次使用,比如在情景一中使用每年最高气温高出blabla的月份。

为了灵活性,计划设计相应的注释规范语言和相应的模板编辑器。

研究的局限性和网页展示

不确定参与者是否有兴趣,下一步计划在实验中包含参与者提供的图表。

尽管告诉参与者,实验只是为了研究ChartAccent的性能,但还是会因为参与者的紧张影响时间,所以提交到github.io上,诸君尽情使用。

允许人 提交图表、选择图表、导出图表,也可以将整个标注的过程导出成gif。

---------------- ♥ The End ♥ ----------------