hello，大家好，豆皮范儿今天由 Random Forest 给大家带来了《从电影到漫画，再到叙事可视化》系列，今天带来了第六节「从漫画到数据可视化」。
上一篇：漫谈：从电影到漫画，再到叙事可视化（五）电影感有什么用？
作者：Random Forest
Data Comics
随着漫画艺术的不断发展，其作为一种内容的展示形式，天然具有良好的可读性和娱乐性。为了进一步增强数据可视化的叙事能力，在叙事可视化领域中，漫画形式已经被一些研究者引入并形成了新的研究分支：Data Comics。
Data Comics是一种数据可视化方法，灵感来自漫画的视觉语言。它是一种使用「sequential art」讲故事的新方法，由数据驱动的可视化图表构建而成。它使用包含snapshot和实时可视化panel的漫画布局来构建叙事。漫画版式中的每个panel都可以用漫画的视觉符号进行装饰——例如标题、字幕和对话气泡、方向箭头和运动线——以增强叙事。
以下是两个DEMO，均属于可交互的Data Comics（Interactive Data Comics）。
DEMO 1
** DEMO 2**
论文列表
在进行介绍前，整理了一些相关论文列表如下：
• Interactive Data Comics Zezhong Wang, Hugo Romat, Fanny Chevalier, Nathalie Henry Riche, Dave Murray-Rust and Benjamin Bach IEEE Transactions on Visualization and Computer Graphics (TVCG) 2022 (**IEEE VIS, 2021))• Data Comics for Reporting Controlled User Studies in Human-Computer Interaction Zezhong Wang, Jacob Ritchie, Jingtao Zhou, Fanny Chevalier, Benjamin Bach IEEE Transactions on Visualization and Computer Graphics (TVCG) 2021 (**IEEE VIS, 2020))• DataToon: Drawing Dynamic Network Comics With Pen+ Touch Interaction Nam Wook Kim, Nathalie Henry Riche, Benjamin Bach, Guanpeng Xu, Matthew Brehmer, Ken Hinckley, Michel Pahud, Haijun Xia, Michael J McGuffin, Hanspeter Pfister. ACM Conference of Human Factors in Computing Systems (CHI), 2019• Teaching Data Visualization and Storytelling with Data Comic Zezhong Wang, Harvey Dingwall, and Benjamin Bach. ACM Conference of Human Factors in Computing Systems (CHI), 2019, Extended Abstracts• Comparing Effectiveness and Engagement of Data Comics and Infographics Zezhong Wang, Shunming Wang, Matteo Farinella, Dave Murray-Rust, Nathalie Henry Riche, Benjamin Bach, ACM Conference on Human Factors in Computing Systems (CHI), 2019• Design Patterns for Data Comics Benjamin Bach, Zezhong Wang, Matteo Farinella, Dave Murray-Rust, Nathalie Henry Riche, ACM Conference on Human Factors in Computing Systems (CHI), 2018• The Emerging Genre of Data Comics Benjamin Bach, Nathalie Henry Riche, Sheelagh Carpendale, Hanspeter Pfister, Computer Graphics and Applications (CG&A), 2017• Telling stories about dynamic networks with graph comics Benjamin Bach, Natalie Kerracher, Kyle Wm. Hall, Sheelagh Carpendale, Jessie Kennedy, Nathalie Henry Riche, ACM Conference on Human Factors in Computing Systems• Data comics: Sequential art for data-driven storytelling Zhao, Zhenpeng, Rachael Marr, and Niklas Elmqvist. Tech report, 2015
主要科研团队
• Benjamin Bach****
A Lecturer in Design Informatics and Visualization at the University of Edinburgh.
• Niklas ElmqvistAn associate professor in the College of Information Studies at the University of Maryland.
Elmqvist is the current director of the University of Maryland Human–Computer Interaction Lab.
Elmqvist was at Purdue University from 2008 to 2014 and part of the U.S. DHS Center of Excellence (COE) in Visual Analytics (VACCINE).
\
关键论文导读
这部分从论文列表里选出了两篇具有代表性和启发意义的论文。和我们讨论戏剧、电影、漫画的继承关系相似，在这两篇论文中同样可以窥见到叙事可视化对漫画形式的借用、扬弃和创新。如果借用第一部分的通俗说法，第一篇论文首先将「漫画感」引入叙事可视化，而第二篇论文在「漫画感」的基础上加强了交互性，做到了数据可视化可以做，但是漫画做不到的事。
Data comics: Sequential art for data-driven storytelling
Movitation****
继承：将漫画元素引入叙事可视化中形成新的形式：Data Comics
这篇论文开创了Data Comics，使叙事可视化效果更加流畅、更具有可读性，并有效提高了可视化报表的参与度、空间效率和愉悦性。
主要模型*
在论文中，作者定义了Data Comics概念中「comics」的模型。这个模型是漫画实际形式的简化版，并可以基本满足叙事可视化的要求。这个模型是这篇工作的基础，非常具有启发意义：
对「comics」的定义
漫画由一系列面板（panel） 组成，这些面板组织成一维的层（tier） ，并由面板之间的分隔线（gutter） 或间距（spacing）隔开。一层中的面板通常被组织成从左到右阅读以形成叙事（至少在西方文化中是这样）。层又可以组织成页面（page） ，其中每一层变成由垂直分隔线分隔的一行，并且可以将多个页面连接在一起形成一本书（book） 。
角色、标注和特效（Characters, Annotation, and Effects）
如果Data Comics没有利用漫画的视觉语言，就不会是真正的漫画。创建Data Comics的设计师可以通过多种方式创造它：
• 漫画风格的渲染（rendering）和布局（layour）：
为了强调漫画媒介，可以使用非真实感渲染技术（nonphotorealistic rendering techniques）重新绘制剪辑内容。益处：这使用户处于看漫画的状态，允许他们代入他们先前存在的漫画知识。
• **角色（characters）：****
**为了推动Data Comics中的叙述，设计师应该包括补充数据驱动可视化的角色。因为这需要艺术天赋，Data Comics的设计师可能需要配备现有角色的视觉库。益处：在故事中加入人性化的面孔使叙事更具吸引力和个性化。
• 漫画元素（comic elements）：
提供漫画中常用的视觉元素，例如运动线（motion lines） 、亮点（highlights） ，甚至拟声词（onomatopoeia） （模仿声音的单词）。好处：漫画元素将用户的注意力引导到可视化的特定部分并推动叙事。
• **字幕（captions）、对话（speech）和想法（thoughts）：****
**
漫画的视觉效果通常由字幕、语音气球和思想气球中的文本构成。Data Comics应该支持这些相同的机制。好处：叙事可视化需要标题和解释来推动故事并引导读者。
布局管理
****
McCloud假设漫画的阅读是「闭环」（closure），即读者将一个panel中的图像连接到下一个panel的心理过程，这就是漫画真正的「叙事魔力」。这类似于读者通常对于书籍的「闭环」：并非所有信息都由书面文字（或漫画）提供，意味着读者将填补空白并使叙述在他们的脑海中栩栩如生。
出于这个原因，Data Comics的布局管理——将panel组织成层和页面——是创建叙事的一个重要考虑因素。创建Data Comics时，有几个设计方面很重要。在几何尺寸方面，我们通过规定同一层中的每个panel具有相同的高度来稍微简化我们的模型。这使设计师能够更改整个层的高度以及各个panel的纵横比。此外，为了便于构建叙述，Data Comics模型应该允许设计人员轻松更改单个panel的顺序。
查看方式
最后，Data Comics创作完成后，其最终目的是让目标观众观看，以传达其设计师的故事（和信息）。就像传统漫画一样，数据漫画的默认视图是查看整个页面，所有panel都可见。然而，由于屏幕与书面页面不同，因此支持单panel导航模式也是有意义的，在这种模式下，观众可以在漫画中顺序地前后导航。在某种程度上，这种导航模式与传统幻灯片（例如 PowerPoint 或 Keynote）的导航模式没有什么不同。但是，由于我们的重点是支持具有沟通意识的可视化和社交数据分析，因此允许查看器对查看器中的各个panel进行标记、注释和评论可能会很有用。
系统实现
****
论文实现的系统为DataComicsJS（实现的亮点可以详读论文，这个系统现在已经搜不到了）。
这个web应用包含：
• 一个用于从 Web 捕获数据驱动内容的 Clipper• 一个用于创建面板和添加漫画符号的Decorator• 一个 Composer 用于将剪辑编排成漫画• 用于查看已完成漫画的Presenter
论文中对5个指标的用户调研ratings比较（对照组为PowerPoint）：
nteractive Data Comics
Movitation
发展：让Data Comics超越传统漫画形式，形成自己的风格和发展路线
虽然以往comics强大的静态叙事媒介在纸质支持上运行良好，但这篇论文为Data Comics添加了交互性，可以实现非线性叙事、个性化、细节层次、解释性，实现了更丰富的用户体验。
本文中，Data Comics的叙事目标超越了传统线性的、不变的故事情节。目标和操作包括在预定义的布局中添加和删除panel以支持分支（branching）、视角变化（change of perspective）或按需访问细节（detail-on-demand），以及提供修改数据以及与数据表示进行交互，以支持个性化和聚焦。
本文提出了一种轻量级规范语言COMICSCRIPT，供设计师为静态漫画添加这种交互性。
交互性Data Comics的六个特性
导航（Navigate）
导航使读者可以在故事的不同部分之间移动，并提供一个操作方式来决定关注哪些部分。静态Data Comics已经通过浏览、遵循建议的顺序、暂停、仅关注文本或图形或跳过整个panel和页面来实现不同级别的导航。与漫画的交互可以支持或加强这些崭新的阅读体验，或者提供全新的导航模式，例如超链接、深入到特定panel、闪回或选择感兴趣的panel。数据漫画中的交互式导航可以提供更大的灵活性来体验故事、关注自己感兴趣的东西以及重新获取已读故事中的信息。
按需提供详细信息（Details on Demand）
信息可视化领域常用的details-on-demand为感兴趣的读者提供了默认设置之外的信息。静态的漫画和故事本质上是由作者驱动的，作者决定每个panel中的信息类型和详细程度。此外，并排显示多个panel的方式使每个panel的空间受限，这限制了每个panel能够承受的内容的数量和复杂性。引入交互，可以实现例如视觉编码和可视化技术（visual encodings and visualization techniques） 、数据来源和转换（data provenance and transformation） 、上下文（context） 、支线故事（side-stories） 或其他详细信息的提供方式。设计时考虑到细节需求，允许作者简化故事情节，同时保持一种包容性，以应对具有不同兴趣、背景以及数据可视化素养的观众。
改变视角（Change Perspective）
作者驱动的故事通常呈现作者的单一视角。这通常需要平衡信息量与这些信息的呈现方式、作者的兴趣与观众的兴趣、客观方面与主观性的观点，以及围绕特定数据元素的不同故事之间的平衡。例如，一个关注地理数据的故事可能更倾向于「global」整体视角，而不是「local」更个人化的视角。交互可以让读者选择和改变主要人物，看到数据的不同方面。 切换主角可能会过滤掉与新角色无关的panel，添加直接相关的panel，和/或更新现有的视觉效果以将焦点放在这个新角色上。改变视角可以让作者在他们的故事中整合不同的观点，并使用互补、对比或矛盾的观点作为叙事手段。
分支（Branch）
分支是指在故事情节中引入分叉路径，其中每条路径都会导致一个略有不同的故事，有时甚至是截然不同的故事。此类非线性叙事方式，提供了由读者做出的一系列选择所定义的非常个人化的阅读体验。静态漫画中的分支会导致类似于流程图的结构，此类漫画的布局可能非常具有挑战性，使用大量空间，并且在查看概述时会使故事树中的任何单个路径难以重建且十分繁琐。引入交互可以更好地支持分支，同时在任何给定时刻为树中的每条路径提供线性阅读体验，或者一次显示两条或更多条路径进行比较。在数据漫画中，分支可以用于很多场景，例如，显示不同的版本和观点，对比数据和替代方案，以及解释可能的未来场景（即「What If...？」），或者作为一些故事发展选项，使读者对作者的提问作出反应。
暂停和显示（Pause & Reveal）
逐渐揭示信息的方法可以作为一种手段来制造紧张感并迫使读者停下来思考或做出选择。许多网络漫画通过连续滚动或点击视觉元素或panel来逐渐显示整个故事。引入交互可以为读者在故事中前进时建立人为的障碍。这个范围从简单的注意力证明（例如将鼠标悬停在panel上），到读者认知的展示或对先前panel的理解（例如多项选择问题），再到提示读者做出猜测或决定。
输入数据（Input Data）
Data Comics和数据故事通常包含作者提供的数据。然而，引入交互允许读者输入或更改故事中使用的数据，决定应用于现有数据的操作，或数据模拟的参数。例如，为读者提供一个交互来输入他们的卡路里消耗量或最喜欢的电影可以更新panel内容以获得更个性化且更引人入胜的信息。输入（个人）数据可以通过个性化使数据故事更具吸引力和信息量，并通过动态查询探索不同参数对数据的影响。
系统实现
这篇工作推出的COMICSCRIPT基于JSON语法，有点类似于Vega的spec。2.1节提到的DEMO都是由COMICSCRIPT开发而成。具体的API可详见项目官网。
总结
Data Comics是叙事可视化领域对一些其他艺术形式进行结合的一次探索。虽然在成品的艺术性上还不足以和优秀漫画作品媲美，但是漫画本身的可读性和愉悦性成功改善了叙事可视化的效果。换句话说，目前的Data Comics还是停留在对漫画形式的模仿（并有所创新），对于漫画的叙事语言和「视听语言」（借用于电影领域的概念）则基本没有涉足，这部分能到达的高度仍取决于设计师的艺术水平。数据故事和「视听语言」、「电影感」会有哪些可能的碰撞，如何建立起一些映射，这个重要的问题可能远远超越Data Comics本身。
