Epigraphics:消息驱动的信息图表创作

Tongyu Zhou Brown UniversityProvidenceRhode IslandUSA tongyu˙zhou@brown.edu , Jeff Huang Brown UniversityProvidenceRhode IslandUSA jeff˙huang@brown.edu and Gromit Yeuk-Yin Chan Adobe ResearchSan JoseCaliforniaUSA ychan@adobe.com
(2024)
摘要。

设计师想要传达的信息在指导信息图表的设计中起着关键作用,但大多数创作工作流程首先创建可视化或图形,而不衡量它们是否适合信息。 为了解决这一差距,我们提出了Epigraphics,这是一个基于网络的创作系统,它将“epigraph”视为第一类对象,并使用它来指导信息图表资产的创建、编辑和同步。 该系统使用基于文本的消息来推荐可视化、图形、数据过滤器、调色板和动画。 它还支持资产之间的交互和微调,例如重新着色、突出显示和动画同步,从而增强资产的美学凝聚力。 画廊和案例研究表明,我们的系统可以生成受现有流行信息图表启发的信息图表,而由 10 名设计师参与的基于任务的可用性研究表明,文本来源的工作流程可以标准化内容,使用户能够更多地思考大局,并且促进快速原型设计。

信息图表创作、视觉叙事、数据可视化
copyright: acmcopyrightjournalyear: 2024copyright: rightsretainedconference: Proceedings of the CHI Conference on Human Factors in Computing Systems; May 11–16, 2024; Honolulu, HI, USAbooktitle: Proceedings of the CHI Conference on Human Factors in Computing Systems (CHI ’24), May 11–16, 2024, Honolulu, HI, USAdoi: 10.1145/3613904.3642172isbn: 979-8-4007-0330-0/24/05ccs: Human-centered computing User interface toolkitsccs: Human-centered computing Natural language interfaces
Refer to caption
图1。 要使用 Epigraphics 创建信息图,用户输入他们希望传达的关键消息 (A),根据刷过的文本块自动接收资产推荐 (B),将所需的资产添加到画布中以进行操作和合并(C),最后微调资产直到满意为止(D)。

Teaser figure showcasing the user interface of Epigraphics. The left-hand panel displays a text input box and a list of generated recommendations. The middle is a canvas containing a completed infographic of a canary’s wingspans through flight. The right-hand panel is a list of existing assets on the canvas with toggles, dropdowns, and sliders to change the configurations of each asset. From this interface, there are 4 popups further explaining what the text input box, recommendations list, canvas, and configuration panels do.

1. 介绍

信息图是一个令人回味的、视觉化的数据小插图。 通过综合可视化、插图、图像、颜色和文本,它将数据集浓缩成观众可以轻松理解的易于理解的要点和故事。 与数据视频等其他相关媒体(Amini等人,2017)不同,信息图表通常向可能没有时间或背景来分析数据并得出自己的结论的受众传递单一信息。 通过最大限度地减少解释信息所需的认知负荷,它们激励观看者对信息进行更深入的思考(Clark 和 Lyons,2010),并且已经看到了数据科学和设计之外的其他领域的使用,例如当代新闻业(Fu 和 Stasko,2023 年) 和教育(Chudá,2007 年;Firat 和 Laramee,2018 年)

然而,设计信息图表可能很困难、耗时且不直观。 当前的工作流程涉及根据设计者想要传达的信息创建、排列和编辑可视化、图形和文本组件。 尽管此消息是驱动创作过程的主要机制,但大多数工作流程首先从绘图 (Xia 等人,2018) 或可视化 (Wang 等人,2018) 开始。 然后,设计人员可以填写补充标题、说明文字或注释,以绘制视觉元素之间的关系。 这通常是一个迭代过程,其中创建图表、插图、文本和整体设计等元素,并传递给同行反馈(Cambre 等人,2018;Kulkarni 等人,2015;Bawabe 等人,2021),然后多次重新创作以补充信息并在信息和美学之间取得平衡。

但是,如果消息开始并始终成为整个信息图表设计过程中的焦点,该怎么办? 创作可以更类似于讲故事,其中设计直接由设计师想要传达的信息驱动。 鉴于用于自动设计的创作系统在研究(Guo 等人,2021 年;Tyagi 等人,2022 年)和商业产品(例如Adobe Express111https://www.adobe.com/express/, Figma222https://www.figma.com/、Canva333https://www.canva.com/),我们相信基于文本的信息可以成为一种强大的交互式媒介,用于自动创建信息图表组件 它可以充当锚点来检索数据的适当特征和视觉表示,并在信息图表中引入设计主题、图形和亮点。 当首先考虑文本的内容和布局时,设计师可以将其隐性的设计思维和发现转化为显性的设计编辑。 我们注意到,在这种情况下,我们特指直接传达信息图的含义或主题的消息,而不仅仅是基于文本的提示。 关注此消息类似于首先写出“替代文本”;通过给予生成模型一些创造性的自由并允许它们填补资产的空白,设计师可以创建一个更有凝聚力的数据故事。

虽然现有工具可以提供文本作为制作信息图表的起点(Cui 等人,2020;Qian 等人,2021;Tyagi 等人,2022)以及构建自然语言和可视化耦合的策略(Srinivasan 等人,2021),它们都依赖于第三方创建的现有信息图或可视化示例。 因此,可视化创建是一个检索然后修改的任务,而不是一个生成过程。 由此产生的信息图表是衍生的,这意味着设计师降低了其创作原创性的灵活性。 因此,我们提出了Epigraphics,这是一个网络应用程序,用户可以在其中制作基于文本的关键消息,并将其成分作为源来生成信息图表资产,例如图表基元、图形、颜色主题、数据过滤器、和动画。 它们作为用户在画布上添加和重新排列的建议。 与 PowerPoint 或 Figma 等其他数据无关的设计工具不同,文本始终在导入的数据集的上下文中进行处理。 生成的资产是模块化的——这是一个经过深思熟虑的设计决策,目的是 1) 提供成对合并的灵活性,2) 通过不提供整个设计来保留创意自主权。 这些组件可以通过资产之间的交互进行合并,例如重新着色、突出显示、动画同步以及将图形作为字形注入到可视化中。 使用该系统,用户可以快速生成与消息和数据两者一致的视觉元素,从而专注于其设计的组成和象征意义,而不是单个元素的美学。 我们通过案例研究和基于任务的可用性研究来评估系统的有效性。 演示展示了系统在经验丰富的用户手中的潜在表现力和功能,而研究则揭示了对新手用户的工作流程和首次使用结果的见解。 他们共同揭示了信息图表的消息优先创作工作流程可以有效地标准化内容,不提供有凝聚力的布局,但可以促进整体思维,并支持快速原型设计。 本文的主要贡献包括:

  1. (1)

    每当用户与文本交互时根据关键消息生成信息图表资产的系统,并支持组件内部和组件之间的交互。

  2. (2)

    从案例研究和用户研究中推断出的设计课程,涉及消息源工作流程如何影响设计流程和结果。

2. 相关工作

2.1. 数据到美丽的图形

许多帮助用户创建信息图表中常见的精美图形的系统都专注于将原始数据绑定到视觉表示。 例如,数据驱动指南(Kim 等人,2017)使设计人员能够创建可以链接自定义形状的指南。 然后,这些参考线可以将数据编码为每个形状的长度、面积和位置,并根据变化的数据动态地使绘图变形。 DataInk (Xia 等人, 2018) 采用类似的方法将原始数据绑定到形状,但不是属性,而是整个形状被视为单个字形。 用户可以使用直接操作将自由形式的草图符号链接到数据点,然后将其用于创作创意可视化。 DataQuilt (Zhang 等人, 2020) 在此基础上进一步扩展,允许用户为绘画和照片等真实图像创建这些绑定,以便可视化可以适应拼贴画的外观。 然而,此类策略的一个限制是每次都需要为新数据集重新创建映射本身。 为了解决这个问题,Charticulator (Ren 等人, 2019) 还支持导出映射的可视化效果,以便将其重新用作其他数据的模板。

在数据集复杂的情况下,动画可以有效引导观看者的视线从一条信息转向另一条信息。 Gemini (Kim 和 Heer,2021) 就是这样一种推荐系统,它允许用户编写声明性语法来生成相关统计图之间的动画转换。 Data Animator (Thompson 等人,2021) 通过匹配对象自动生成两个静态可视化之间的过渡,完全消除了编码的需要,并支持用于微调的可视化界面。 Animated Vega-Lite (Zong 等人, 2023) 或者将动画可视化重新构建为时变数据查询,其中时间编码将数据字段映射到关键帧。 除了过渡之外,图表和可视化中的动画也可以具有装饰性,以吸引观众的注意力。 Canis (Ge 等人, 2020) 是一种高级领域特定语言,允许用户从图表中选择标记并应用自定义动画(例如,圆环图上的“轮子”效果)标记单位。

这些将数据绑定到静态或动画元素的先前作品将图形本身视为一流对象以及用户在工作流程中首先生成的内容。 相比之下,我们的工作将 text 视为用户的第一个入口点,并推荐与该文本上下文相关的所有后续绑定。 然后,我们建立文本图表基元图形绑定以支持更广泛的数据表达。

2.2. 文本驱动的数据故事

当与文档中的现有图表结合使用时,文本可以为如何指导数据故事提供宝贵的上下文。 因此,我们创建了一些系统来利用此文本来 1) 突出显示、2) 重新格式化或 3) 生成数据可视化。 为了引导用户在阅读文档时找到相应的图表,Elastic Documents (Badam 等人, 2019) 将数据表与用户关注的文本结合起来,使用基于关键字的匹配算法生成文本- 要求用户正在阅读的内容可视化。 自动标注同步(Lai等人,2020)另外使用Mask R-CNN从图表中提取视觉元素,以自动将这些可视化同步到随附的文本描述,可以集中突出显示图表。 ChartText (Pinheiro 和 Poco,2022) 使用两阶段编码方法实现了相同的自动绑定,可用于为文档添加交互性。 Kori (Latif 等人,2022) 既会自动建议,又允许用户在键入时手动生成文本与数据库中现有图表之间的引用。

或者,另一种更明显地重新引导观众注意力的策略是完全重新排列文本和图表的顺序。 为了改善数据文章在不同设备的动态页面布局中的流动,VizFlow (Sultanum 等人, 2021) 建立文本图表链接,并根据每个布局重新组织文本和图表。 ToonNote (Kang 等人, 2021) 同样通过为计算笔记本提供可切换的“漫画视图”来提醒用户在数据分析过程中关注更大的图景。

在可视化可能无法传达文本传递的确切消息的情况下,系统可以生成它们,无论是否存在数据。 CrossData (Chen 和 Xia,2022) 建立文本数据连接,帮助用户在文档编写过程中检索、计算和探索表格和图表。 类似地,DataParticles (Cao 等人,2023)链接文本和数据,但专门利用潜在连接来帮助用户迭代伴随叙述的动画单元可视化。

CrossData 和 DataParticles 等生成系统与我们的工作最相似。 然而,与当前的系统侧重于检索现有图表,然后修改它们以适应用户的数据不同,我们生成其他与数据故事相关的资产,例如静态图像和动画,并支持交互以将它们组合起来,以更好地补充信息数据故事。

2.3. 信息图表创建建议

由于信息图创作通常是一个多步骤和多平台的过程,因此最近的推荐系统试图自动化或加速该过程的各个方面。 例如,对于新手来说,确定信息图表资产的正确布局和配置通常具有挑战性,因为链接视觉元素的不同底层语义结构可能会导致向用户传达不同的故事(Lu等人,2020) 为了缓解这一挑战,信息图表向导(Tyagi等人,2022)依靠半自动框架来推荐视觉信息流布局、视觉组和资产之间的连接元素。 同样,Zheng 等人 (Zheng 等人, 2019) 提出了一种完全自动化的方法,该方法使用输入图像和基于关键字的输入文本摘要来建议杂志布局。 De-Stijl (石等人,2023)和InfoColorizer (袁等人,2021)为新手用户推荐和谐的调色板,帮助他们快速进行设计迭代。

除了布局之外,其他系统更注重直接为信息图表内容提供建议。 InfoNice (王等人,2018)将自定义图形与汇总数据关联起来,将未经修饰的图表转换为带有自定义标记的信息图。 ChartSpark (Xiao 等人, 2023) 使用文本到图像生成模型将语义上下文嵌入到现有图表中。 InfoMotion (Wang 等人, 2021) 通过在可视化中生成组件的逻辑分解,将静态信息图表转换为动画信息图表。 DataShot (Wang 等人,2019) 自动生成情况说明书,TypeDance (Xiao 等人,2024) 根据现有模板的设计先验生成印刷徽标。 Text-to-Viz (Cui 等人, 2020) 通过从数据库中检索矢量图形并根据 20 个模板的预定义列表进行排列,根据报表中与比例相关的统计数据生成信息图内容。 同样,给定基于文本的提示,Retrieve-Then-Adapt (Qian 等人, 2021) 从数据库中检索现有信息图表,并转换内容以匹配用户输入的数据。

虽然我们的工作也强调信息图表内容的生成,但我们不依赖模板,而是从集中式消息中获取所有资产。 因此,该工作流程可以为用户提供更大的创作自主权,同时仍然确保维持最终设计所传达的主要思想。

Infographics Category Definition Authoring Method Artifact Examples System Examples Components
Statistical Relies on formal or stylized diagrams, charts, and graphs to summarize or highlight data Create either standardized, annotated, or stylized visualizations Posters, Maps (Kim et al., 2017; Xia et al., 2018; Yuan et al., 2021; Ren et al., 2019; Zhang et al., 2020; Wang et al., 2019; Cao et al., 2023; Pinheiro and Poco, 2022; Lai et al., 2020; Xiao et al., 2023) Text, Visualizations, Graphics
Mnemonic Relies on patterns, composition, and structure to highlight specific features and characteristics Arrange text, symbols, or images in thematic layouts Banners, Brochures (Cui et al., 2020; Yuan et al., 2021; Shi et al., 2023; Tyagi et al., 2022; Qian et al., 2021) Text, Graphics, Symbols, Colors, Layout
Transitive Relies on either interactive or automatic transitions to convey sequences of events or operations Design transitions within or between visualizations, images, and text Slideshows (Cao et al., 2023; Wang et al., 2021) Text, Visualizations, Graphics
Directive Relies on spatial ordering to establish logical flow or direction Sequentially arrange text, visualizations, and images Data comics, Instructions, How-to’s (Kim et al., 2019; Chen and Xia, 2022; Kang et al., 2021; Sultanum et al., 2021; Latif et al., 2022; Pinheiro and Poco, 2022; Lai et al., 2020) Text, Visualizations, Graphics, Symbols, Layout
表格1。 信息图表主要类型的摘要、通常如何以及通过哪个系统创作它们,以及其组件的细分。

A table with six columns and four rows depicting the infographic category, the definition of that category, the authoring method for that category, example infographics, example authoring systems, and components that make up that category.

3. 设计空间

为了将我们提出的基于消息的信息图创作范例置于上下文中,我们首先需要了解其现有的设计空间。 此前,其他专注于提出新交互以创建可视化的工具也遵循了这种提炼设计目标的过程(Chen 等人,2020,2019;Tong 等人,2023) 因此,我们调查了之前有关视觉数据故事创作的工作。 为了探究这个设计空间的实际使用场景,我们还采访了两位设计专家,一位来自学术界,另一位来自工业界。 我们得出的见解将在下面的小节中进行综合。

3.1. 信息图表有哪些不同类型以及它们包含什么?

根据之前关于信息图表使用的工作(Siricharoen,2013;Tarkhova 等人,2020),不同信息图表的创作方式及其组成部分的详细信息位于表1. 正式地,信息图被定义为“在简单图表中集成不同媒体的图形组织者的集合:文本、图像、符号和模式”(Siricharoen,2013) 图像可以进一步分解为总结数据的可视化或通过视觉隐喻传达信息的与数据无关的图形。 类似地,模式可以分解为控制媒体和布局的调色板,或视觉组(Lu等人,2020),它们被安排在其中。 因此,信息图可以被视为由 6 个主要基本组件组成:文本、(数据)可视化、(非数据)图形、符号、调色板和布局 我们进一步剖析原始组件以揭示创作系统可以提供的功能组件 首先,图形和符号可以从 (C1)光栅和矢量图形格式导出。 然后,可以从(C2)声明性语法和(C3)对图表数据的查询导出作为数据图表和注释的可视化。 布局归因于不同的(C4)视觉组模板(Lu等人,2020) 最后,(C5)调色板和(C6)文本可以分别是独立的色调或字体集合。 创作系统可以将这些项目作为基元提供,以便进一步组合和编辑以构建信息图。

3.2. 有形关键消息如何支持信息图组件的创作?

鉴于信息图表组件的广度,支持用户从头开始创建它们并不是一件容易的事,特别是当有效的信息图表要求作者清晰简洁地表达他们希望传达的内容时(Murray等人,2017) ,同时处理页面上的多个视觉元素。 我们在这里发现了一个机会,其中许多组件都源自同一概念:设计师想要传达的“关键信息”。 虽然在某些情况下,分析师首先对数据进行初步探索,但他们通常使用此类关键消息将他们想要的信息传递给设计师。 因此,我们提出了一个工作流程,通过使用基于显式单一文本的关键消息(暗示即将出现的内容的“铭文”)来生成这些组件。 这样的题词将包含丰富的语义信息,这些信息可以分解为主题、子短语和单个单词,这些单词可以单独视为组件基元的提示。 主题可以通过提取离散的单词并将它们和谐地组合来建议潜在的调色板 子短语可以为可视化提供抽象。 单个单词可用于检索图形符号 关键消息本身或其组成部分可以添加为文本 请注意,虽然 layout 是先前系统中生成的原始组件(Tyagi 等人,2022;Qian 等人,2021;Cui 等人,2020),但我们故意排除布局和字体建议,因为它们通常需要外部输入,例如无法从消息系统地推断出的用户样式或模板。 因此,我们期望一个独立的关键消息将提供以下组件:图形 (C1)、可视化(C2、C3)、调色板 (C5) 和文本内容 (C6)

Refer to caption
图 2. 从基于文本的关键消息到信息图表元素的完整管道。 它涉及从关键消息中选择文本块 (A),使用这些块推荐不同类型的资产 (B),例如可视化、数据过滤器、图形和调色板,合并生成的资产的不同组合 (C),以及微调画布上的配置 (D)。

A flowchart showing how a key message is converted to an infographic. The first node in the flowchart showcases a key message with different types of text (individual words, sub phrases, or the entire message) highlighted. Arrows from these text chunks feed into the next node, a list of icons showing different asset types. An arrow is drawn from them to a list of assets generated. From this list, two arrows are drawn–one straight to the final infographic and another to a list showing icons of the asset types added to each other, representing how assets can be combined. From this list, another arrow is drawn to the outcomes of these asset combinations. Finally, two arrows are drawn from these combinations–one back to the list of assets generated and another to the final infographic.

3.3. 如何进一步组合组件以形成不同类型的信息图表?

我们还希望支持制作信息图的每种类型(表1)的方法,这取决于分配给每个组件的目的以及它们之间的交互方式。 例如,统计信息图可能需要带注释或风格化的可视化;前者需要将文本作为注释集成到可视化中,而后者则将图形作为字形嵌入到可视化中。 相反,助记信息图表不是基于数据的,而是依赖文本、图形、符号和颜色的布局来传达信息。 传递信息图表将动画添加到可视化或图形中以说明顺序事件,而指令信息图表则通过空间顺序传达变化,并通过媒体布局组织指导符号。 在创作这些不同类型的信息图表时,同一组件可以提供多种功能 - 文本可以被视为总结可视化的标注或标题。 传达的消息也可以表示为不同的组件——它可以明确地显示为标题横幅,也可以作为图形的暗示而隐藏。 因此,允许将推荐的组件组合在统一的 UI 中,可以将组件重新调整为每种信息图表类型所需的不同角色。 此 UI 还应允许用户手动控制布局,而不能仅通过关键消息来自动控制布局。

3.4. 设计目标

我们的工具受到信息图表创作的现有设计空间的启发,并基于作者心中有关键信息的假设引入了自上而下的方法。 具体来说,它打算实现以下目标:

  • G1:支持与组件交互的自然方式,并从文本中提取所有相关信息以创建组件(消息到组件推荐)。

  • G2:容纳更高级别的抽象来组成组件,以便支持不同类别的信息图表(组件重新利用和组合)。

  • G3:所有交互都应该发生在一个统一的系统中,并且可以在一个统一的系统中进行微调,以减少上下文切换(人机交互来处理 G1 中无法通过自动化实现的组件和模式) + G2)。

4. 碑文系统

我们提出的工具Epigraphics位于更大的讲故事工具空间(Li等人,2023a;Lee等人,2015),特别是在规划和实施阶段工作流程的。 它还处于提供领域专家所需的完整低级细粒度控制的系统(Xia等人,2018;Cao等人,2023)和完全自动化文本的生成系统之间的利基市场设计流程(Cui 等人, 2020) 及其人工智能创建者和人类优化器模型(Li 等人, 2023a, b) 它旨在通过关键的消息源方法来组合和组合组件原语,从而增强信息图创作的能力。 为了清楚起见,我们将使用术语组件来指代构成一般信息图的基元,并使用术语资产来指代可以从密钥中提取的基元信息。 这两个集合大部分重叠,但存在一些差异,我们将在 4.3 节中讨论。

4.1. 管道概览

在我们的系统中,文本是用户交互以生成信息图表设计的不同资产的主要元素。 2 描述了描述此工作流程的管道,其中使用用户输入的句子的玩具示例(有关金丝雀翼展的句子)来说明如何推荐资产。 假设相关数据集已导入,用户首先通过用光标刷过文本来指示他们希望用于源输入的关键消息的哪些组成部分。 然后,他们指定想要查看的资产类型,系统使用该类型来生成与源输入 (G1) 最相关的所选资产类型的排名。 然后,用户可以从列表中单击每个资源,将其直接添加到画布上,或者通过组合生成的资源来进一步修改它(例如,使用调色板对金丝雀的 SVG 结果重新着色)(G2)。 最后,他们可以重新排列同一画布上的所有资源,并在必要时进行更多修改,以生成最终的信息图 (G3)。

4.2. 数据准备和生成模型

最近,大语言模型(大语言模型)由于其规模和基于注意力的架构(Kaplan 等人,2020),在广泛的任务中获得了高度的通用性。 这使它们成为文本到资产和文本到设计生成的理想候选者,特别是如果大语言模型用于在主草案中生成多个可迭代片段(Sultanum 和 Srinivasan,2023) 然而,由于这些模型实际上并不像人类那样理解为其提供的提示(Webson 和 Pavlick,2021),因此可以设计提示以更好地帮助模型将自然语言指令转换为所需的内容输出(Liu and Chilton,2022;White 等人,2023) 从包含数据集的 CSV 文件中,我们提取元信息,例如列名称、数据的高级摘要和唯一的分类值,以为大语言模型提供额外的上下文。 对于图形,我们使用视觉问答(VQA)模型(Antol等人,2015)通过询问“图像显示什么?”来提取每个图像的标题然后,我们使用适合每种资源类型的一系列生成模型。 具体来说,GPT-3.5 (OpenAI, 2023) 用于文本补全,Sentence-BERT (Reimers and Gurevych, 2019) 用于嵌入提取、BLIP (Li 等人, 2022) 用于图像标题生成,以及 Adob​​e Firefly444https://www.adobe.com/sensei/generative-ai/firefly.html 用于文本到图像生成以提取配色方案。

4.3. 推荐信息图表组件(文本到资产)

回想一下 3.1 节,通用信息图可能包含 6 个基本组件:文本、数据可视化、图形、符号、调色板和布局。 我们的系统使用这些组件之一(文本)来推荐除布局之外的所有其他组件。 我们注意到符号是图形的子集(Siricharoen,2013),可以根据特定文本生成。 我们进一步引入了一种额外的资产,即数据过滤器,它可以从文本中提取,并用于细化和重新调整其他组件的用途,例如可视化和文本。 因此,Epigraphics 支持的全套原始资源包括(静态)可视化、数据过滤器、静态和动画图形(包括符号)以及调色板。

4.3.1. [Uncaptioned image]静态可视化

文本可以是一个强烈的信号,表明可以显示什么以及如何显示数据摘要以传达所需的消息。 假设已导入适当的数据集并且用户已指示他们选择的文本,我们使用 GPT-3.5 提取不超过 5 个与用户最相关的列名称 -提供的文本。 然后使用 Lux (Lee 等人, 2021) 将这些列转换为意图语法。 Lux 的意图语言允许基于 CompassQL (Wongsuphasawat 等人,2016)进行部分规范。 具体来说,它只需要感兴趣的数据方面的规范(即列名称或数据过滤器),不需要可视化编码的输入。 这种列的减少是数据探索中的常见任务(Castro Fernandez 等人,2018),它缩小了可视化规范的搜索空间,从而使推荐不太可能依赖于图表推荐引擎。 5(或更少)列进一步细分为 2 列(散点图、折线图、条形图)、3 列(带有附加彩色图例的图表)或聚合/分箱(直方图、热图)的子集,以生成最常见的图表类型。 这些输出图表根据涉及的相关列数进行排名,然后转换为 Vega-Lite 规范(Satyanarayan 等人,2017),渲染为 SVG,供用户选择。

4.3.2. [Uncaptioned image]数据过滤器

文本可用于指示用户只想对数据的子集进行操作。 在这些情况下,提示将被输入到 GPT-3.5 中以输出数据集的 SQL 查询。 例如,诸如“2004 年湖人队 vs 底特律决赛特别令人兴奋”之类的虚拟句子将转换为

    SELECT * FROM df
    WHERE team_name = ’Los Angeles Lakers’
    AND opponent = ’DET’ AND season = ’2003-04’
    AND period = 2 AND playoffs = 1
    ORDER BY date LIMIT 10

查询应用于数据集,过滤后的数据作为表格返回,供用户交互。 该表可以独立使用来生成新的可视化效果,用于突出显示现有的可视化效果作为叠加,或者用于生成特定数据点的注释,我们将在第 4.4 节中讨论。

4.3.3. [Uncaptioned image][Uncaptioned image]静态和动画图形

虽然设计师传统上会查找相关图像以导入信息图表设计,但直接从文本中获取这些资源可以通过将其集中在创作工具中来简化流程。 我们的系统依赖于 SVGRepo555https://www.svgrepo.com/,一个开放许可的 SVG 数据库,作为其静态图形的来源。 对于每个图像,我们生成标题并从中提取句子嵌入。 同样,我们也从用户提供的文本中获取嵌入。 在计算字幕嵌入和用户输入之间的余弦相似度后,我们对分数进行排名并返回前 20 个 SVG 作为对用户的推荐。 动画图形的推荐以 GIF 形式返回。 GIF 类似地是通过用户输入和动画中每个帧之间的平均成对余弦相似度生成的。

4.3.4. [Uncaptioned image]调色板

最后,虽然文本结构本身不能表示全面的调色板,但特定的关键字可以建议构成调色板的潜在颜色。 用户选择的文本被分解为这样的关键字片段,每个关键字片段都被输入 Adob​​e Firefly 的文本到图像模块以生成多个相关图像。 我们通过计算每个图像的 5 箱颜色直方图来提取每个图像的颜色配置文件。 然后将直方图编译成调色板,颜色按亮度排序。

Refer to caption
图 3. 当用户刷过一大块文本时,会出现一个弹出窗口,其中包含代表资产推荐的潜在类型的图标。 用户单击图标后,将生成资产并自动链接到文本块。

Two text boxes containing the same key message next to a box contain three visualizations. In the first text box, a cursor brushes over a block of text and a popup with 5 icons indicating visualization, data filter, static graphic, animated graphic, and color palette shows up. In the second text box, the cursor clicks on the visualization icon and an interactive box is formed around the block of text. The box with visualizations contains a connected scatterplot and a scatterplot, both linked to the interactive text box via a chain icon.

Configuration Supported Asset Types
Hide/show axes & legends static visualizations, animated visualizations, data-oriented drawings
Add animation static visualizations
Manual recolor visualizations, graphics, text
Change opacity visualizations, graphics, data-oriented drawings, highlights, text
Change thickness/size visualizations, data-oriented drawings, annotation lines of highlights, text
Change style/pattern annotation lines of highlights, text
Change frame delay animated visualizations, animated graphics
表 2. 每种资产类型的所有可能配置的摘要。

A table with two columns showing the asset configurations possible and what asset types support them.

4.4. 组件重新利用和组合(资产交互之间)

生成基于文本的资产并将其添加到画布后,系统会提供进一步的选项来组合或细化它们,以适应每个组件在不同类型的信息图表中所服务的意图(表1)。 虽然这不是所有可能的资产-资产交互的完整列表,但大多数扩展组合可以基于核心资产的以下成对组合来实现。 请注意,这些交互是可交换操作,其中资产的顺序并不重要,并且每个组合的输出还可以与另一个组合的输出组合(例如,突出显示的可视化可以基于调色板重新着色或与动画图形同步)。

4.4.1. [Uncaptioned image]静态可视化 动画可视化

某些数据集还可能包含时间属性,这些属性可以通过动画来展示随时间的变化。 基于与相关数据集感兴趣的可视化,我们提示 GPT-3.5“输出具有面向时间的单词的列” 来提取这些列,然后将其呈现在用户的下拉菜单中。 用户选择一列后,我们将该列的唯一值转换为一组定义动画中每个帧的有序键。 然后针对每个键过滤可视化数据集,从而生成一个在每个唯一的面向时间的列值上无限循环的 GIF。 用户还可以自由控制帧延迟,从而控制动画的速度。

4.4.2. [Uncaptioned image] 调色板 + [Uncaptioned image] 可视化, [Uncaptioned image][Uncaptioned image] 图形 重新着色

从推荐列表中选择所需的调色板后,用户可以单击任何 SVG、GIF 或可视化,将调色板映射到该资产的颜色。 可视化或图形中的调色板是通过颜色直方图提取的,其方式与第 4.3.4 节类似。 给定两个直方图,系统然后通过映射它们来传输颜色,以最小化推土机距离。 请注意,无论可视化是否具有分类、发散或线性配色方案,生成的颜色都将保留这些属性。

4.4.3. [Uncaptioned image] 图形+ [Uncaptioned image] 可视化 面向数据的绘图

我们将面向数据的绘图 (DOD) 定义为一种程式化的可视化,它将自定义图像合并为字形,类似于 Charticulator (Ren 等人, 2019) 或 DataQuilt (Zhang 等人) 的输出,2020) 要创建 DOD,用户可以选择画布上任何带有分类彩色图例的现有可视化效果。 然后,在从推荐图形列表中选择要替换每个图例值的图像后,可视化将自动替换为字形。 此组合适用于散点图、条形图和带标记的折线图。

4.4.4. [Uncaptioned image] 数据过滤器 + [Uncaptioned image] 可视化 突出显示的可视化+注释

给定数据过滤器,有两种修改可视化的方法。 如果可视化是聚合数据的结果,则结果是相同的可视化,但从较少的数据中抽象出来。 如果数据尚未聚合,则结果是显示为覆盖的当前编码的选择。 我们还提供类似注释的行,其中包含提示突出显示的初始文本块,该文本块指向可视化中的过滤数据。

4.4.5. [Uncaptioned image] 动画可视化 + [Uncaptioned image] 动画图形 同步

当动画可视化与动画图形一起添加到画布时,用户可能希望同步动画以在信息图表中创建更大的统一性,前提是两者具有相同的帧数。 如果不是,我们要么修剪动画图形或动画可视化,以确保它们的帧数是另一个的倍数。 然后,我们通过将动画可视化的帧延迟映射到图形并将两个动画重置为同时启动来同步它们的计时。

Refer to caption
图 4. 使用 Epigraphics 创建的信息图表库以及用于生成它们的相应铭文。 A (McCrorie 等人, 2016), B (Fox 等人, 2016), C (Quealy 和 Sanger-katz, 2016),和 D (Lutz,2014) 展示了受现有信息图表启发的娱乐,而 E 和 F 是基于开源数据集的原创作品。 G (Zuñiga,2017) 也是一种娱乐,比较了使用我们的系统(顶部)与传统方法(底部)可以生成的内容,并带有解释每种资产类型的工作流程的标签。

A gallery of infographics arranged in 2 rows of 4 with the epigraphs used to create them on top. In order: A) A stylized bar graph with cities on top of each bar and a gradient of blue in the background from light (top) to dark (bottom). B) A scatterplot overlaid on top of a basketball court, with three points annotated. C) Icons of food items representing each data point of a scatterplot. Icons representing quinoa and granola bars are highlighted. D) A connected scatterplot overlaid on top of a graphic of a canary. E) A mirrored bar chart with icons representing each genre at the tips of the bars. Graphics of a record player and Spotify icon are above this chart. F) Icons representing weather conditions are highlighted and match the position of the sun in the background. G) Two similar infographics of four pie charts, one of which is contained within an avocado.

4.5. 创作界面

如图 1 所示的创作界面是一个使用 Node.js 和 Next.js 构建的 Web 应用程序。 对文本源推荐的 API 调用被发送到 Flask 后端。 在与界面交互之前,用户可以选择使用下拉列表提供的预设数据集,也可以上传自己的 CSV 来探索该数据。

4.5.1. 文本输入面板

文本输入面板(图1A)是一个功能丰富的编辑器,用户可以在其中输入信息图的关键消息或他们希望用来推荐资产的任何其他文本。 启动信息图表资产推荐涉及使用光标刷过感兴趣的短语以选择它(图3)。 这将打开一个面板,其中包含可推荐的潜在资产的图标([Uncaptioned image][Uncaptioned image][Uncaptioned image][Uncaptioned image][Uncaptioned image] 来自第 4.3 节)。 单击图标会发送 API 调用以获取相应的资产,然后将其附加到推荐列表的底部。 选定的文本块会自动链接到生成的资产列表,在文本编辑器中表示为该块周围的交互式框。 当推荐列表变长时,用户可以点击该框轻松过滤并找到相应的资产。

4.5.2. 推荐列表

推荐列表(图1B)包含用户请求的资产推荐的可滚动历史记录,并标有其来源文本。 对于可视化和图形建议,单击任何元素都会在画布上生成该资源的 SVG(或 GIF,如果是动画)实例。 数据过滤器表示为可选择的表格,并且在选择画布上的可视化效果时切换表格行将在该可视化效果上创建带注释的突出显示。 单击画布上选定的可视化或图形的调色板将根据调色板配色方案重新着色该资源。 推荐列表上方还有一个选项卡列表,用户可以使用这些选项卡根据所需的资产类别来过滤列表。

4.5.3. 帆布

画布(图1C)是用户自由操作资源、进行最终调整以及根据需要创作美观布局的空间。 它支持基本的编辑功能,例如添加文本、更改文本字体、更改颜色、撤消/重做、更改资源不透明度、锁定资源、向前/向后移动资源深度以及下载。 用户还可以使用直接操作来移动、旋转和重新缩放添加的资产。 由于动画在添加到画布后就会启动,因此我们还提供了一个附加函数来重置所有动画计时,以便它们可以在需要时同时启动。

4.5.4. 层系统+配置

可以在图层系统中对添加的资源进行额外的微调(图1D)。 2 中汇总了所有可能的配置。 例如,用户可以切换可视化属性(例如轴和图例)的可见性,以及选择面向时间的列来进行动画动画可视化。 所有资源都可以通过手动将资源中的一种颜色映射到另一种颜色来重新着色。 标注线的粗细、颜色、比例和起始/结束头部图案均可调整。 可以调整标注线的文本锚点位置。 动画的帧速率也可以调整。

5. 画廊和案例研究

Epigraphics 旨在促进快速、集中地创建基于消息的信息图表。 因此,它应该支持用户从头开始创建信息图,并在给出有意义的消息的情况下重新创建现有信息图的想法。 我们创建了一个画廊来展示系统在实现这些目标方面的表现力(图4)。 其中五个例子是受启发的复制(A (McCrorie 等人,2016),B (Fox 等人,2016),C (Quealy 和 Sanger-katz) , 2016), D (Lutz, 2014), G (Zuñiga, 2017)) 来自新闻文章、海报、在线博客和其他故事包含丰富图形、可视化和文本描述的讲述媒体。 其中两个(E、F)是原始信息图表,我们在探索公共数据集后得出了自己的信息。

为了说明工作流程并强调我们系统的功能、优势和局限性,我们还介绍了两个案例研究。 案例研究 1 是制作信息图 D 的演练,展示了鸟类飞行的机制,而案例研究 2 直接比较了信息图 G 中使用和不使用 Epigraphics 的工作流程。不使用 Epigraphics 是使用 Vega-Lite 手动构建可视化、使用 SVGRepo 来生成图形以及使用 Illustrator 来组合它们来完成的。 这可确保两个工作流程中的资产相同,以最大程度地减少比较中的混杂因素。

5.1. 解构金丝雀的飞行 (D)

将数据集导入系统后,我们在文本面板中输入关键消息(图4D顶部)。 受到原始信息图 (Lutz,2014) 的启发,我们注意到我们需要一个金丝雀的动画图形以及覆盖在顶部的每个时间范围内的机翼位置动画可视化,并寻找机会从文本(G1)中提取此信息。 对于图形,我们刷过文本“金丝雀拍打翅膀”,为动画金丝雀生成潜在的 GIF 候选对象,并选择了一只拍打翅膀的黄色鸟添加到画布中。 接下来,我们浏览文本“基于追踪身体位置的翅膀”以查看潜在的可视化候选者。 返回的 20 个选项包括不同数据列值(例如 x 位置、y 位置、时间范围、机翼类型和机翼行程方向)的混合散点图、条形图和折线图。 我们试图通过添加“作为动画折线图”来缩小这些选项的范围,但这不起作用。 相反,我们发现“随着时间的推移”添加语义上有意义的关键字可以通过减少返回的列数来更有效地修剪推荐。 也就是说,该工具使得生成广泛的探索性资产变得特别容易,这些探索性资产可以通过更精细的定性消息进行过滤,但事实证明,在执行人工智能聊天机器人通常采取的明确的技术命令方面更加困难。

滚动浏览选项后,一个连接的散点图被认为是最合适的,该散点图以时间范围绘制了 x 相对于 y 位置的图例。 为了真正说明鸟拍打翅膀 (G2) 时翼展如何演变,我们在配置面板中添加了动画,这会在可视化中显示与时间相关的列的下拉菜单。 在这种情况下,只有一个选择,那就是时间范围。 通过选择此选项,静态可视化会自动转换为动画叠加,其中散点图的连接线在每个时间帧的 x 和 y 位置上循环。 接下来,我们想要修改散点颜色以更好地匹配鸟的颜色。 为此,我们刷了“canary”,它返回一系列调色板,其中一个是我们应用于可视化的黄色集合。 然后我们同步了金丝雀和可视化的动画。 对于最后的润色(G3),我们添加了原始关键消息作为标题、标题,并修改了它们的字体以完成信息图。 在这里,我们注意到,虽然可以修改可视化和图形的颜色和不透明度,但不可能改变它们的整体风格(即使其具有绘画风格,如木炭草图,或像原始信息图中那样具有全息效果) (卢茨,2014))。 未来扩展画布功能或将 Epigraphics 作为插件合并到现有图形编辑器中的工作可以扩展其视觉结果的多样性。

5.2. 揭开素食主义的统计数据 (G)

在这两个工作流程中,要传达的关于素食主义应该了解什么的关键信息都很突出——在 Epigraphics 中,它总是显示在文本面板中,而在传统工作流程中,它被明确写为Illustrator 工作画布上的大横幅。 为了生成所需的可视化效果,Epigraphics 采用了类似于案例研究 1 的探索性方法,其中相关饼图是从其他图表类型的集合中挑选出来的,这些图表类型在浏览文本块后组合了最相关的数据集列。 对于图形,特别是受原始信息图(Zuñiga,2017)启发的鳄梨图像,Epigraphics在我们忽略“素食主义”之后生成了蔬菜选项。然而,鳄梨不是蔬菜,所以我们必须修改文本面板并直接输入“avocado”。 为了给饼图和鳄梨着色,我们忽略了“素食主义”,并对所有资源应用了土绿色调色板。

相反,对于传统方法,我们首先检查数据集以了解如何绘制它。 然后,我们决定创建饼图并编写脚本来对数据行求和并创建 Vega-Lite 语法。 可视化结果导出为 SVG 并导入到 Illustrator 中。 对于图形,我们直接在SVGRepo上查找“avocado”,然后选择我们想要的牛油果图像,下载它,并将其添加到Illustrator中。 然而,对画布上的每个元素重新着色更加乏味。 首先,我们思考“素食调色板”的含义。 然后,我们选择每个具有自己配色方案的资源,并使用 Illustrator 上的“重新着色”功能手动重新映射它。 一些资源被多次重新着色,以平衡整体视觉连贯性。

考虑到复制任务,Epigraphics 的组件并不一定会影响最终生成的内容,而是通过减少所有操作时的上下文切换来提高工作流程的效率可以在一个系统中执行。 Epigraphics 还通过提供源自您想要传达的消息的选项来帮助推理可能出现的潜在图表类型、图像和调色板,而决策过程是在传统工作流程中完全由用户独自完成。 然而,这可能会适得其反,因为系统原因会导致不良结果,例如“素食主义”“鳄梨”实例,但重写文本可以快速解决此问题。

6. 可用性研究

为了研究 Epigraphics 的文本优先方法如何指导或重定向设计师的心理模型,我们还分析了 1) 用户创建的中间和最终视觉工件,以及 2) 他们的交互模式和创作过程中的语言化思维过程。 我们首先对两名参与者进行了试点研究。 他们获得了一个数据集,并要求使用系统使用自己的基于文本的消息或草图创建信息图表。 在这个过程中,他们表示,仅看表格很难得出其中任何一个,因为很难从数据中获得洞察,也很难想出一个故事来讲述。 事实上,他们将该系统视为数据分析系统,并花费大部分时间使用推荐的可视化来探索数据。 为了避免目的偏差,我们在最终用户研究中为所有参与者提供固定的消息,以便他们能够专注于创作体验而不是学习数据集。

6.1. 参加者

通过滚雪球抽样招募的 10 名用户(6 名女性,4 名男性)参与了可用性研究。 他们的年龄从 19 岁到 56 岁 (μ=28.6,σ=10.3),具有不同的设计水平(2 名初学者、2 名新手、3 名中级、2 名高级、1 名专家)和编程水平(1 名新手、2 名中级、5 名高级) ,2名专家)专业知识。 其中一半人从未读过或写过讨论数据的文章,而另一半则经常与数据文章互动。 除一名用户外,大多数人之前都创建过可视化。 然而,只有两名参与者经常创建信息图表,而其余的人则很少设计信息图表。 然而,当他们这样做时,他们提到使用 Microsoft Excel、Figma、Adobe Illustrator、Adobe Express 和 Canva 等软件来创建它们。

6.2. 研究方案

参与者被随机分为两组,并获得从 Kaggle 中提取的两个不同的公共领域数据集。 第一个数据集包含利兹一天的天气状况666https://www.kaggle.com/datasets/muthuj7/weather-dataset,英国,而第二个数据集包含 2021 年 Spotify 前 50 首歌曲及其声学属性777https://www.kaggle.com/datasets/equinxx/spotify-top-50-songs-in-2021 各组之间的所有其他条件保持相同。 该研究总共持续了60分钟,可以分为以下几个部分:

6.2.1. 简介(10 分钟)

参与者填写了一份基础知识调查问卷,了解他们之前在设计和编程方面的专业知识、他们阅读/撰写带有数据的文章、创建可视化和创建信息图表的频率。 然后,他们被指示假装是一名可视化图形设计师,其任务是根据来自客户的单个基于文本的消息创建信息图表。 为了获得灵感,还向参与者展示了三个示例信息图表,以防他们之前没有太多查看或创建它们的经验。

6.2.2. 素描任务(10 分钟)

根据基于文本的消息,参与者被要求在数字画布上勾勒出他们的信息图想法。 此任务的目的是了解他们在阅读消息后对信息图的第一印象。 在此过程中,他们被提醒信息图表可以包括文本、图像、动画和可视化,但他们可以自由地使用(或不使用)他们想要的任何组合这些元素,并鼓励他们随时参考该消息这个过程中的点。

6.2.3. 信息图表创建任务(25 分钟)

通过两个演示视频向参与者介绍了 Epigraphics 系统,这两个演示视频展示了如何从具有两个不同数据集的文本创建信息图。 他们还展示了系统的功能,包括资产类型以及可能生成的资产间交互。 鼓励参与者提出此时可能有的任何问题。 演练结束后,参与者被指示导航至 Epigraphics 界面并使用该工具创建自己的信息图。 辅导员提醒他们可以直接复制并粘贴客户之前给他们的消息,也可以在文本面板中输入自己的消息。 他们还被鼓励自由修改信息或使用他们最初的草图(或不使用)来实现他们想要的愿景。 在此过程中,他们被要求大声思考并询问是否有任何问题。 当参与者认为信息图满足了信息或者直到 25 分钟结束时,该任务就被视为完成。

t Refer to caption 堆叠条形图显示每个参与者的资产生成与画布交互点击的比例。 与所有参与者的画布交互相比,资产生成明显减少。

图 5. 每个参与者在资产生成和与画布交互上花费的鼠标点击次数的分布。 所有参与者的大部分点击都是通过操作画布上的资源来完成的。
Refer to caption
图 6. 参与者随着时间的推移发起推荐的资产类型映射。 每个点都是参与者使用系统请求特定资产类型的实例。 每个浅绿色矩形跨越分配时间的一半(12.5 分钟),用于直观地突出显示该资产类型的大多数建议何时出现。 大多数参与者在前半部分(资产交互的50%)专注于生成可视化,在后半部分(资产交互的70%)专注于生成图形。

A scatter of what asset types were recommended at each minute. Points are color coded by the participant. There are shaded regions behind the points from minute 0-12.5 for visualization and from minute 12.5-25 for static and animated graphics.

Refer to caption
图 7. 从 10 名参与者获得的各个功能的系统可用性分数和创造力支​​持指数分数。 参与者发现可视化生成和图形生成功能最有用。 可视化生成、图形生成和调色板/重新着色是最容易学习和使用的。 总体而言,所有参与者都认为最终结果是值得付出努力的。

Stacked bar charts showing the 5 point Likert scale ratings participants made for creativity support as well as the usefulness and easiness to learn / use for each asset type.

6.2.4. 事后调查和访谈(25 分钟)

任务结束时,参与者根据 SUS 量表的子集(Brooke,1996)填写了关于各个功能的可用性的事后调查,以及他们的草图和最终信息图之间的相似性、总体满意度以及基于创造力支持指数的创造力支持感(Cherry 和 Latulipe,2014 年) 他们还参加了两次半结构化访谈。 第一个探讨了他们对创作过程的想法、与其他信息图表创建系统相比对系统的印象、对自动化水平的感受、系统的用例以及以自然语言为中心的工作流程。 第二个要求他们回顾性地反思他们在草图方面的资产生成选择以及他们的心智模型从开始到结束是如何演变的。

7. 结果

7.1. 工作流模式引发的角色

参与者如何使用鼠标点击的分布如图5所示。 虽然参与者的总点击次数 (μ=242.7,σ=56.5) 差别很大,但他们都将不到四分之一的点击次数用于生成资产 (μ=13.2%,σ=5.7%),其余的则在画布上排列资源。 一名参与者总共花费了 9 次点击 (4.7%) 来生成他们想要的视觉组件,并将其余的交互用于微调布局、大小和标题。 获得资产所需的点击次数相对较少,这让一些与会者感到惊讶,他们将此与之前工作流程中必须从不同来源收集资产的繁琐过程进行了比较,因为后者"确实阻碍了创造力的发挥,因为当你在做一些创造性的事情时,你会进入状态,但随后就会想,哦,等等,我需要一个云,然后你会在其他地方花费 5-10 分钟来寻找云"(P9)。 制作信息图表的精神负担被转移到了设计上。 根据资产生成点击次数,我们还细分了参与者随着时间的推移想要哪些类型的资产,如图 6 所示。 许多参与者在前 12.5 分钟内将大部分点击花费在可视化 (50%) 上,并在后半段想要静态和动画图形 (70%)。 相比之下,有两个小集群的调色板更理想,即可视化后 5 到 10 分钟内以及添加大多数其他视觉元素后 20 分钟后。 这在上下文中是有意义的,因为参与者希望在导入资产后更改资产的配色方案。 这些模式与传统编辑体验中的模式一致,表明存在遗留偏见 (Morris 等人,2014),并表明没有引入更陡峭的学习曲线打乱旧的编辑顺序。

在我们的采访中,我们还将参与者对这些交互模式的语言化心理模型总结为两个角色:1)“自信的用户”,无论是从他们之前的草图还是背景知识中,他们都清楚地知道他们想要描绘什么;2)“探索性的用户”用户”没有使用这些建议来进行构思。 前一组从功能角度处理工作流程,表示“我首先处理了最大且最重要的元素,这将是可视化 (P7)”,而后者则认为有更多选择探索可视化,图形将依赖于它们。 “自信”的小组还花时间寻找与他们的草图相匹配的确切资产;有些很容易成功(P5、P7),而另一些则必须重新校准并寻找替代选择(P9、P10)。 相反,“探索”组更多地使用关键消息作为他们探索的指南,特别是使用该消息将资产分组为视觉集。 例如,与消息中同一句子相关的可视化和图形将在画布上在空间上排列在一起。

Refer to caption
图 8. 参与者创作过程的概述。 (A) 覆盖在所提供的消息上的热图表明,用户如何浏览不同类型的资产推荐的文本存在趋势。 (B) 参与者在使用我们的系统之前的草图显示了不同的内容和布局。 (C) 参与者为其信息图选择了类似的资产。 (D) 最终的信息图显示内容趋同但布局不同。

A 4x2 table. The 4 columns show the key message, the participant sketch, selected assets, and the final infographic. The message column contains the message itself and heatmap underlines showing what the participants brushed over, color coded by asset types. The sketch column contains different participant sketches evenly spaced out. The selected assets column contains individual assets pulled from the final infographics arranged by similar type. The final infographic shows the final infographics even spaced out. The 2 rows show each different message provided to the participants with the corresponding sketches, selected assets, and final infographics.

7.2. 资产推荐和互动的有效性

每个系统功能的可用性分数和创造力的总体感受的摘要可以在图7中找到。 参与者一致认为,可视化和图形推荐是最有用和最容易使用的,因为它们是构成信息图的核心组件。 他们发现数据过滤器和调色板建议的用处相对较小,因为前者是间接的,而后者只能改善美观和风格,从而强化信息,但不一定是信息的核心。 动画创建/同步和可视化图形合并功能同样有用,但更难学习和使用。 他们的用例更加利基。 动画要求特定数据集具有要进行动画处理的面向时间的列,可视化图形合并需要具有图例的可视化,其中的标签可通过视觉替换来替换。 然而,在可以使用它们的情况下,参与者认识到它们可以使信息图表更具吸引力。 例如,P9 最初感觉他们“试图找到动画的用途”,但在对数据集和消息进行更多反思后,他们发现 “可以想象我可以用动画同步做一些事情。 就像遍历 GIF 的 24 小时并将其与可视化的昼夜周期相匹配。 我觉得如果我有时间这样做,那真的会非常酷而且非常独特。”

新手和专家都一致认为,该系统允许他们无需繁琐的交互即可创建设计,并且具有吸引力,并且可以让他们富有表现力。 所有参与者(5 人同意,5 人强烈同意)都认为他们能够制作出的最终设计值得付出努力。 将此工作流程与他们用来创建信息图表的现有工作流程进行比较,所有参与者都表示该系统速度更快。 具体来说,P8 说, “通常,我可能会使用 Figma 或 Photoshop 来制定布局。 但我必须离开程序去寻找图形,或者去 Illustrator 制作我自己的图形。 在这里,我觉得我可以做出一个像样的作品,而不必离开该项目。” 除了集中式工具的便利性之外,资产的自动推荐和集成资产的建议消除了手动决定哪些信息位所需的“数据科学知识”(P5)的一些障碍优先。 Epigraphics 不是设计师的狭隘视野,因为在现有工作流程中“在制作之前你必须有非常具体的想法 (P4)”,Epigraphics 允许参与者更全面地思考信息图表的构成 (P9) 。

Refer to captionRefer to caption
图 9. 通过维护内容和重新组织布局两次重新设计参与者(P1、P2)信息图表的前后。 修改背景以增强对比度、放大标题、旋转徽标、更改字体以及更紧密地分组图可以增强视觉凝聚力。

Four infographics with arrows pointed from the first one to the second one and from the third one to the fourth one. The first infographic features two overlapping scatterplots on the top half and a small title. The second infographic contains the same overlapping scatterplots now enlarged to span the entire page, a larger title, and modified fonts. The third infographic features a small title on top, a green bar chart on the middle top, an annotated scatterplot on the bottom left, two images stacked on top of each other on the bottom right, and a background of the Spotify logo. The fourth infographic features a large title, the bar chart on the top left, the annotated scatterplot on the bottom right with the two images cropped as a circle next to each annotation, and a dark background with the Spotify logo rotated 45 degrees.

7.3. 比较草图和信息图之间的消息保真度

所有参与者都认为他们的最终信息图表与客户提供的信息一致。 8 描绘了此消息的概述 (A)、中间草图 (B)、最终信息图 (D) 以及两个数据集的信息图 (C) 之间共享的共性。 在没有提示的情况下,参与者仍然在他们刷的资产类型的what文本中显示出类似的模式。 例如,定性的、更笼统的陈述,如“全天天气和天空条件的变化”和“长度和类型的趋势”被用于可视化,而具体的句子片段,如“温度超过 15 摄氏度”和“如何” Coldplay 或 Green Day 表演的歌曲”被用于数据过滤器。 图形和调色板集中在一两个关键字上,例如调色板的“天空条件”、“温度”和“Spotify”,图形的“天空”、“酷玩”和“绿日”。 这导致信息图中推荐的资产和最终使用的资产具有相似性(图8C)。 对于天气数据集,所有参与者都使用温度与小时的散点图,或将其叠加在湿度与小时的图上,以描述“全天”的信息。为了表示特定的温度,两位参与者分享了使用箭头作为符号的想法。 同样,对于 Spotify 数据集,四名参与者添加了 Spotify 徽标,并且所有参与者都适当突出显示了涉及 Coldplay 和 Green Day 歌曲的数据点。 相比之下,由于草图(图8B)是自由形式的,因此它们在视觉上显示了更加不同的内容和布局。 除了图表类型更加丰富之外,每个草图也有不同的侧重点;例如,一些人想要强调单个数据点(P1、P3),另一些人想要展示总体趋势(P2、P5、P6、P8、P9),而其他人则希望实现两者的组合(P4、P7、P10) )。

当被要求反思草图和最终信息图表之间的内容差异(不考虑美学修饰)时,十人中的八人更喜欢信息图表,并表示后者在呈现客户要求的信息方面更加全面信息。 例如,P1 认为,回想起来,他们的草图并没有充分传达一天中的湿度和温度变化,因为他们只是在三个特定时间戳上绘制了三个湿度和温度框。 同样,Spotify 的五篇小品中有两篇根本没有提及酷玩乐队或绿日乐队,尽管它们强调了关键信息。 多名参与者提到,反复刷过文本的身体动作鼓励他们“涵盖所有基础”(P2),而仅查看关键部分并不能强化这一点草图任务中的消息。 对于可视化,由于刷过的文本在幕后用作查询,以将列数减少为不同用户的相似子集,因此所有参与者最终都从共享相似轴和注释的“标准化”图表集中进行选择。 同样,图形和调色板也被标准化,因为文本到图形和文本到颜色为用户意图提供了统一的表示并将其转换为资产。 例如,参与者明白他们必须在信息图表中的某个地方引用 Spotify;两人在草图上写下了“Spotify”这个词。 这一意图在物理上转化为所有信息图表中 Spotify 徽标的变体,并反映在所使用的绿色/黑色调色板中。

总体而言,参与者认为使用自然语言来探索意图是一种“自动生成资产的酷[方式]” (P7)。 他们指出,对于“不擅长数学和统计学” (P4) 的人来说尤其如此,因为他们可以口头描述他们希望如何将可视化与图像、颜色或亮点相结合,但可能不一定具有手动操纵资产的先验知识。 然而,一些参与者(P2、P5、P7、P9、P10 等)确实希望在资产添加到画布后获得更广泛的自定义功能和替代样式建议,例如偏离可视化的平面度和将静态图形转变为“水彩风格” (P9) 或扩展可视化以采用更非传统的构图 (P1、P10)。 他们表达了通过文本实现这些结果的愿望,因为 “当我进行头脑风暴时,我必须把所有的事情都写下来,我会写一些东西。 我不画东西” (P9)。

7.4. 对最终信息图表质量的反思

参与者创建的最终信息图表位于图8D中。与图 4 中的示例相比,我们注意到它们在视觉上不太吸引人。 这种差异可能部分归因于关键信息意图的差异。 例如,将 Spotify 数据集的用户信息图表与根据同一数据集构建的图 4E 进行专门比较,我们注意到前者的关键信息包含更多探索性任务。 参与者的关键信息想要 1) 长度和流派的趋势,2) 更多“适合跳舞”的歌曲是否更短,以及 3) Green Day 或 Coldplay 的歌曲,而画廊的关键信息想要展示 1) 独立歌曲有能量最高,2)嘻哈歌曲最适合跳舞。 这种效果是我们希望参与者充分探索系统功能的目的。 副作用是,参与者更专注于使用建议来有效识别趋势或回答舞蹈能力问题,而不是关注资产布局。 然而,系统最终能够支持用户添加适当的信息图表组件,将消息发送到画布上。 从这一点出发,我们认为,一旦所有组件都位于画布上,通过资产布局改进最终信息图的外观并不需要太多额外的步骤。 9演示了如何重新排列两个参与者信息图表中的资产,以生成具有相同内容的视觉上更有效的信息图表。

但为什么参与者没有执行这些步骤呢? 虽然 Epigraphics 生成信息图表组件,但它不一定为组件提供源自消息的视觉分组或字体建议。 因此,为了创作更具视觉吸引力的最终信息图表,参与者可能需要更多布局设计背景。 支持这种“视觉冲击力”的是自动化和交互自由之间的权衡;虽然新手会更多地依赖自动化来生成传统上有吸引力的设计,但专家会更喜欢更灵活的表达。 我们的工作并不是要取代设计师的专业知识,而是为他们提供扩展专业知识的工具。 未来的工作可以在最后的管理步骤中更多地平衡自动化和交互,以最大限度地减少信息图表结果的视觉差异。

8. 讨论

尽管基于文本的工作流程的概念需要一些参与者(P1、P6)时间来适应,但所有用户都同意他们将来会使用此工作流程。 P5特别指出,系统提醒他们“语言允许用户做不常见的事情,UI允许用户做常见的事情。”因为Epigraphics不一定是最终的作为用于数据讲故事的文本驱动创作工具的形式,我们进一步总结了我们的发现,即自然语言来源的建议如何支持信息图表内容创建作为设计课程,并得出以下有效关键信息的核心组成部分的要点。

8.1. 文本作为第一类对象有效地标准化了内容和心理模型

当向参与者提供相同的基于文本的消息时,他们输出的草图在视觉上是不同的。 相比之下,当他们在Epigraphics中使用文本刷时,通常刷相同的块,他们最终的信息图表在视觉上更具凝聚力。 虽然后来因个人定制而内容不完全相同,但传达的语义信息是相似的。 参与者在使用的图表轴、颜色系列(对于 Spotify 信息图表更明显)和选择的图像方面存在重叠。 这表明“文本作为第一类对象”范式对内容创作作为文本中的关键字具有标准化作用:1)将数据集列简化为语义相关的子集以进行可视化和数据过滤器,2)将物理表示归因于隐式 调色板和图形的意图。 由于文本刷动的物理动作还促使用户批判性地思考和确定哪些单词最适合用于哪些资产类型,因此当他们开始在文本和资产类型之间形成心理映射时,它还为他们的心理模型提供了一些标准化。 通过这些交互,添加的资产也保证与源消息相关。 这种对集中信息的坚持意味着生成的信息图必然是全面的一个(Dunlap和Lowenthal,2016;Hernandez-Sanchez等人,2021;Martin等人,2019;穆雷等人,2017)

那么自然出现的一个问题是标准化是否会限制创造力。 从图7的创造力支持指数得分中,我们看到大多数参与者仍然认为该系统让他们非常具有表现力。 一位参与者特别表示,“虽然这有点限制,但由于该工具在这些限制内为您提供的功能多种多样,所以我觉得它给了我一些我从未想过的东西。” 其他参与者(P2、P5、P9)在调查后反思每种类型的资产生成时,继续自发地谈论他们想要通过结合已有资产来测试的新设计。 具有讽刺意味的是,标准化内的限制使用户更具创造力,因为它鼓励他们跳出框框思考,这导致了更个人有趣的结果。 这些观点与之前的研究一致,这些研究发现设计约束(Stokes,2001)(为创造性任务设置的一组边界)可以激发而不是抑制创造力(Caniëls 和 Rietzschel,2015;Rietzschel 等人,2014) 因此,我们认为创意内容的文本来源标准化是一种设计约束,可以纳入信息图表创作之外的交互工具中,并且可以对实践创造力产生积极影响。

8.2. 基于消息的内容推荐赋能大局思维

尽管基于消息的方法有利于标准化内容,但最终参与者信息图表的布局仍然多种多样。 尽管一些 (P2) 根据资产来源的消息的相似语义对资产进行分组,但这种分组的发生方式是非结构化的。 例如,参与者可以将一个可视化放置在页面中央,并用图像包围它,或者水平或垂直并排堆叠两个可视化,标题可以位于左上方、中上方或右上方。 有些使用推荐的突出显示功能来强调数据点,而另一些则手动添加箭头符号以达到相同的效果。 根据放置方式的不同,相同的图形具有不同的功能:作为背景、标题的装饰性强调、突出显示的数据点的注意力抽屉等。 这些不同决策中的深思熟虑反映在专门用于画布交互的创作任务期间的大部分点击中。 但是布局的灵活性和内容的限制意味着什么呢? 根据 P9,这种二分法表明, “我更专注于设计。 我认为它非常自然地融入创作过程,因为你只关注大局。 比如构图,比如视觉效果中的象征意义。” 相反,注意力从单个组件的特殊性转移到整体设计上。 这有助于一些参与者避免在草图任务期间发生的狭隘视野,并帮助其他人重新调整他们对如何呈现信息的期望。

虽然存在可以有效自动化布局的系统(Schrier 等人,2008;Tabata 等人,2019;Guo 等人,2021),但我们认为,保持用户对设计布局的完全自主权是有好处的,特别是如果资产生成过程已经自动化。 特别是对于个性化设计,积极思考设计替代方案可以让用户避免线性设计过程(Swearngin 等人,2020)并创建非衍生主题。 更重要的是,将资产的标准化与布局的灵活性相结合,支持并发聚合和发散思维,这两种思维都必然在创意中“重复循环”(Vidal,2010)过程(Goldschmidt,2016;Perkins,1992;Fricke,1996) 珀金斯(Perkins,1992)使这一点更加明确,指出“有创造力的人是聚合思维和发散思维之间的模式转变者”;因此,将两者合并到工作流程中的工具可以更有效地促进创新。

8.3. 加速资产生成促进心理模型的快速迭代

我们之前确定了资产生成模式的两个角色:1)“自信”用户,寻找与其先入为主的信念相匹配的特定资产;2)“探索性”用户,生成资产以了解并集体讨论他们想要的最终组件。 虽然除两个例外外,划分并不完全明确,但我们大多数新手倾向的用户都是“探索性的”,而专家倾向的用户是“自信的”。在这两种情况下,基于消息的方法从资产生成过程中卸载了点击计数,因此用户更多地关注画布交互。 这意味着“自信”的用户有更多的时间和空间来重新创建他们的愿景或将其与消息或工具功能重新对齐。 相反,对于“探索性”用户来说,他们能够看到大量可行的视觉刺激,以探索他们想要从库存中传达的内容的潜在表示。 P4 强化了这一点,指出, “这对于草图或头脑风暴来说非常有用,但对于预头脑风暴来说却非常有用。 我觉得这通常很难,但它可以为您提供大量随机图表、图像或需要强调的点。 这个系统中的这种关系实际上非常有趣”。由于基于消息的交互的查询性质,集中式创作环境和搜索空间的减少使两个团队能够快速迭代想法和资产。

为新手和专家设计一个系统通常很困难,因为他们在特定工具中完成特定任务的方式存在差异。 新手通常是“深度优先”,在做出决定之前深入考虑许多子解决方案,而专家可以通过在精神上将自己从特定示例中移开来设想更一般或抽象的概念来跳过这一步(Cross,2004). 我们发现,消息提供的资产的点击几下范例可以同时支持两者,支持更类似于新用户的预集思广益或原型设计的探索,以及为有经验的用户快速组装完整的信息图表。 因此,两种类型的用户都能够快速迭代他们的个人目标。 同样,其他有意最大限度地减少点击疲劳以增强性能的现有系统也报告了诸如减少挫败感和提高参与度等好处(Bao等人,2006),这两者都支持快速迭代过程。 因此,新手可以快速、愉快地更加熟悉可视化、设计概念和系统本身,直到他们成为专家并可以快速创建自己的完整信息图表。

8.4. 有效关键信息的策略及其可能失败的情况

基于我们的案例研究和用户研究,我们进一步反思了消息驱动方法的核心属性,即消息本身。 考虑到 Epigraphics 可以推荐的资产,有效的关键信息可以被解构为关键字或短语的组成部分,但也应该是对所设想的信息图的语义正确、独立的摘要。 尽管对于每种资产类型用户可以浏览的内容没有限制,但某些短语可以在推荐质量方面取得更大的成功。 考虑第一个案例研究中使用的关键信息(第 5.1 节),“一只金丝雀根据从慢动作视频捕捉到的鸟的追踪身体位置拍打翅膀,突出显示它的上划动作”。视觉描述性名词短语,例如“金丝雀”、“金丝雀拍打翅膀”、“视频捕获”和“鸟”可以暗示静态和动画图形或主题颜色系列的潜在来源。 修饰这些名词短语的定性或定量动词短语,例如“根据追踪的身体位置拍打翅膀”或“从慢动作视频捕捉中拍摄”是可视化的良好候选者。 修饰动词短语的特定形容词介词描述符(例如“突出显示其上划线”)可用于数据过滤器。 因此,根据用户希望包含的组件,标准关键消息可以由 1) 名词短语、2) 动词短语和 3) 形容词介词描述符的混合组成。

然而,当消息短语被错误地刷过时,可能会生成不需要的资产。 用户研究中一些明显的失败案例如图8A 所示,其中刷过的文本提供的信息过多或过少。 例如,一些用户刷了 Spotify 消息中的整个第一句话,其中包含多个可能暗示不同资产类型的短语,以请求图形。 随后的建议过于模糊且多种多样,没有什么用处。 相反,另一位用户错误地刷了“条件”一词来请求调色板,但上下文太少,导致没有推荐。 因此,虽然关键信息本身应该是全面的,但选择哪些单词或短语也需要精确和深思熟虑。 在如此依赖文本的工作流程中,我们因此强调刷牙交互的重要性;由于迭代所需资产时需要反复试验,因此简化这种交互可以提高效率。

8.5. 局限性和未来的工作

参与者报告说,该系统的主要局限性是它不具备与 Illustrator 或 Figma 等其他设计软件相媲美的定制功能。 他们还希望以绘画或素描般的方式创建超越平面矢量外观的风格化可视化效果。 该系统也不支持所有可视化图表类型。 因此,未来的工作可以通过应用 SVG 过滤器(周等人,2023)和添加更多图形类型来扩展图形样式的表现力。 此外,当前的图形生成检索过程可以被高保真文本到图像和文本到动画所取代,这将进一步扩大可以快速创建的信息图形的种类。 由于它是模块化的,Epigraphics 的最终形式也可以轻松地用作现有设计工具的插件。 与信息图表创作工具的其他半自动系统进行彻底比较也可以揭示消息源方法权衡的更多细微差别。

9. 结论

图形创作工具历来都是从画布开始的,规定了首先关注视觉效果的工作流程。 通过应用生成模型将消息转换为信息图的组成部分,Epigraphics 探索了一种从作者的意图开始快速构建信息图原型的方法。 该工作流程自动生成数据可视化、图形、颜色、突出显示和动画,以帮助设计人员组装完整的信息图表,传达有凝聚力的主题。 参与者注意到集成的工作流程允许他们在同一应用程序中的文本和画布之间来回切换,因为他们将资产组合在一起,同时仍然思考核心信息。 它通过刷牙的物理动作提高了信息图表对信息的保真度,并影响了最终产生的内容。 它还导致了内容和用户心理模型的融合,同时在最终信息图表中保持了风格的多样性,并帮助用户在专业水平不同的情况下更全面地构思。 文本和画布都有其优点——文本可以支持其输入中的语义细微差别和画布输出中的精度;虽然文本是线性的,但画布的布局和主题是多维的。 通过将两者结合在一起,Epigraphics 为信息图表创作添加了第二个维度,使快速迭代能够生成全面传达连贯视觉信息的初稿。

致谢。
我们要感谢 Eunyee Koh、Haijun Xia、Ji Won Chung 和 Adob​​e Research 的 AEL 小组提供的反馈意见,帮助形成了这份手稿。

参考

  • (1)
  • Amini et al. (2017) Fereshteh Amini, Nathalie Henry Riche, Bongshin Lee, Andres Monroy-Hernandez, and Pourang Irani. 2017. Authoring Data-Driven Videos with DataClips. IEEE Transactions on Visualization and Computer Graphics 23, 1 (2017), 501–510. https://doi.org/10.1109/TVCG.2016.2598647
  • Antol et al. (2015) Stanislaw Antol, Aishwarya Agrawal, Jiasen Lu, Margaret Mitchell, Dhruv Batra, C Lawrence Zitnick, and Devi Parikh. 2015. Vqa: Visual question answering. , 2425–2433 pages.
  • Badam et al. (2019) Sriram Karthik Badam, Zhicheng Liu, and Niklas Elmqvist. 2019. Elastic Documents: Coupling Text and Tables through Contextual Visualizations for Enhanced Document Reading. IEEE Transactions on Visualization and Computer Graphics 25, 1 (2019), 661–671. https://doi.org/10.1109/TVCG.2018.2865119
  • Bao et al. (2006) Xinlong Bao, Jonathan L. Herlocker, and Thomas G. Dietterich. 2006. Fewer Clicks and Less Frustration: Reducing the Cost of Reaching the Right Folder. In Proceedings of the 11th International Conference on Intelligent User Interfaces (Sydney, Australia) (IUI ’06). Association for Computing Machinery, New York, NY, USA, 178–185. https://doi.org/10.1145/1111449.1111490
  • Bawabe et al. (2021) Sarah Bawabe, Laura Wilson, Tongyu Zhou, Ezra Marks, and Jeff Huang. 2021. The UX Factor: Using Comparative Peer Review to Evaluate Designs through User Preferences. Proc. ACM Hum.-Comput. Interact. 5, CSCW2, Article 476 (oct 2021), 23 pages. https://doi.org/10.1145/3479863
  • Brooke (1996) John Brooke. 1996. Sus: a “quick and dirty’ usability scale. Usability evaluation in industry 189, 3 (1996), 189–194.
  • Cambre et al. (2018) Julia Cambre, Scott Klemmer, and Chinmay Kulkarni. 2018. Juxtapeer: Comparative Peer Review Yields Higher Quality Feedback and Promotes Deeper Reflection. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (, Montreal QC, Canada,) (CHI ’18). Association for Computing Machinery, New York, NY, USA, 1–13. https://doi.org/10.1145/3173574.3173868
  • Caniëls and Rietzschel (2015) Marjolein CJ Caniëls and Eric F Rietzschel. 2015. Organizing creativity: Creativity and innovation under constraints. Creativity and Innovation Management 24, 2 (2015), 184–196.
  • Cao et al. (2023) Yining Cao, Jane L E, Zhutian Chen, and Haijun Xia. 2023. DataParticles: Block-Based and Language-Oriented Authoring of Animated Unit Visualizations. In Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems (Hamburg, Germany) (CHI ’23). Association for Computing Machinery, New York, NY, USA, Article 808, 15 pages. https://doi.org/10.1145/3544548.3581472
  • Castro Fernandez et al. (2018) Raul Castro Fernandez, Ziawasch Abedjan, Famien Koko, Gina Yuan, Samuel Madden, and Michael Stonebraker. 2018. Aurum: A Data Discovery System. In 2018 IEEE 34th International Conference on Data Engineering (ICDE). IEEE, Paris, France, 1001–1012. https://doi.org/10.1109/ICDE.2018.00094
  • Chen et al. (2019) Zhutian Chen, Yijia Su, Yifang Wang, Qianwen Wang, Huamin Qu, and Yingcai Wu. 2019. Marvist: Authoring glyph-based visualization in mobile augmented reality. IEEE transactions on visualization and computer graphics 26, 8 (2019), 2645–2658.
  • Chen et al. (2020) Zhutian Chen, Wai Tong, Qianwen Wang, Benjamin Bach, and Huamin Qu. 2020. Augmenting Static Visualizations with PapARVis Designer. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI ’20). Association for Computing Machinery, New York, NY, USA, 1–12. https://doi.org/10.1145/3313831.3376436
  • Chen and Xia (2022) Zhutian Chen and Haijun Xia. 2022. CrossData: Leveraging Text-Data Connections for Authoring Data Documents. In Proceedings of the 2022 CHI Conference on Human Factors in Computing Systems (New Orleans, LA, USA) (CHI ’22). Association for Computing Machinery, New York, NY, USA, Article 95, 15 pages. https://doi.org/10.1145/3491102.3517485
  • Cherry and Latulipe (2014) Erin Cherry and Celine Latulipe. 2014. Quantifying the creativity support of digital tools through the creativity support index. ACM Transactions on Computer-Human Interaction (TOCHI) 21, 4 (2014), 1–25.
  • Chudá (2007) Daniela Chudá. 2007. Visualization in Education of Theoretical Computer Science. In Proceedings of the 2007 International Conference on Computer Systems and Technologies (Bulgaria) (CompSysTech ’07). Association for Computing Machinery, New York, NY, USA, Article 84, 6 pages. https://doi.org/10.1145/1330598.1330687
  • Clark and Lyons (2010) Ruth C. Clark and Chopeta Lyons. 2010. Graphics for Learning: Proven Guidelines for Planning, Designing, and Evaluating Visuals in Training Materials (2nd ed.). Pfeiffer & Company, San Francisco, CA.
  • Cross (2004) Nigel Cross. 2004. Expertise in design: an overview. Design studies 25, 5 (2004), 427–441.
  • Cui et al. (2020) Weiwei Cui, Xiaoyu Zhang, Yun Wang, He Huang, Bei Chen, Lei Fang, Haidong Zhang, Jian-Guan Lou, and Dongmei Zhang. 2020. Text-to-Viz: Automatic Generation of Infographics from Proportion-Related Natural Language Statements. IEEE Transactions on Visualization and Computer Graphics 26, 1 (2020), 906–916. https://doi.org/10.1109/TVCG.2019.2934785
  • Dunlap and Lowenthal (2016) Joanna C Dunlap and Patrick R Lowenthal. 2016. Getting graphic about infographics: design lessons learned from popular infographics. Journal of Visual Literacy 35, 1 (2016), 42–59.
  • Firat and Laramee (2018) Elif E. Firat and Robert S. Laramee. 2018. Towards a Survey of Interactive Visualization for Education. In Proceedings of the Conference on Computer Graphics & Visual Computing (United Kingdom) (CGVC ’18). Eurographics Association, Goslar, DEU, 91–101. https://doi.org/10.2312/cgvc.20181211
  • Fox et al. (2016) Joe Fox, Ryan Menezes, and Armand Emamdjomeh. 2016. Every shot Kobe Bryant ever took. all 30,699 of them. https://graphics.latimes.com/kobe-every-shot-ever/
  • Fricke (1996) Gerd Fricke. 1996. Successful individual approaches in engineering design. Research in engineering design 8 (1996), 151–165.
  • Fu and Stasko (2023) Yu Fu and John Stasko. 2023. More Than Data Stories: Broadening the Role of Visualization in Contemporary Journalism. IEEE Transactions on Visualization and Computer Graphics 14, 8 (2023), 1–20. https://doi.org/10.1109/TVCG.2023.3287585
  • Ge et al. (2020) Tong Ge, Yue Zhao, Bongshin Lee, Donghao Ren, Baoquan Chen, and Yunhai Wang. 2020. Canis: A High-Level Language for Data-Driven Chart Animations. Computer Graphics Forum 39, 3 (2020), 607–617. https://doi.org/10.1111/cgf.14005
  • Goldschmidt (2016) Gabriela Goldschmidt. 2016. Linkographic evidence for concurrent divergent and convergent thinking in creative design. Creativity research journal 28, 2 (2016), 115–122.
  • Guo et al. (2021) Shunan Guo, Zhuochen Jin, Fuling Sun, Jingwen Li, Zhaorui Li, Yang Shi, and Nan Cao. 2021. Vinci: An Intelligent Graphic Design System for Generating Advertising Posters. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (Yokohama, Japan) (CHI ’21). Association for Computing Machinery, New York, NY, USA, Article 577, 17 pages. https://doi.org/10.1145/3411764.3445117
  • Hernandez-Sanchez et al. (2021) Sergio Hernandez-Sanchez, Victor Moreno-Perez, Jonatan Garcia-Campos, Javier Marco-Lledó, Eva Maria Navarrete-Muñoz, and Carlos Lozano-Quijada. 2021. Twelve tips to make successful medical infographics. Medical Teacher 43, 12 (2021), 1353–1359.
  • Kang et al. (2021) DaYe Kang, Tony Ho, Nicolai Marquardt, Bilge Mutlu, and Andrea Bianchi. 2021. ToonNote: Improving Communication in Computational Notebooks Using Interactive Data Comics. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (Yokohama, Japan) (CHI ’21). Association for Computing Machinery, New York, NY, USA, Article 727, 14 pages. https://doi.org/10.1145/3411764.3445434
  • Kaplan et al. (2020) Jared Kaplan, Sam McCandlish, Tom Henighan, Tom B Brown, Benjamin Chess, Rewon Child, Scott Gray, Alec Radford, Jeffrey Wu, and Dario Amodei. 2020. Scaling laws for neural language models.
  • Kim et al. (2019) Nam Wook Kim, Nathalie Henry Riche, Benjamin Bach, Guanpeng Xu, Matthew Brehmer, Ken Hinckley, Michel Pahud, Haijun Xia, Michael J. McGuffin, and Hanspeter Pfister. 2019. DataToon: Drawing Dynamic Network Comics With Pen + Touch Interaction. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems (Glasgow, Scotland Uk) (CHI ’19). Association for Computing Machinery, New York, NY, USA, 1–12. https://doi.org/10.1145/3290605.3300335
  • Kim et al. (2017) Nam Wook Kim, Eston Schweickart, Zhicheng Liu, Mira Dontcheva, Wilmot Li, Jovan Popovic, and Hanspeter Pfister. 2017. Data-Driven Guides: Supporting Expressive Design for Information Graphics. IEEE Transactions on Visualization and Computer Graphics 23, 1 (2017), 491–500. https://doi.org/10.1109/TVCG.2016.2598620
  • Kim and Heer (2021) Younghoon Kim and Jeffrey Heer. 2021. Gemini: A Grammar and Recommender System for Animated Transitions in Statistical Graphics. IEEE Transactions on Visualization and Computer Graphics 27, 2 (2021), 485–494. https://doi.org/10.1109/TVCG.2020.3030360
  • Kulkarni et al. (2015) Chinmay E. Kulkarni, Michael S. Bernstein, and Scott R. Klemmer. 2015. PeerStudio: Rapid Peer Feedback Emphasizes Revision and Improves Performance. In Proceedings of the Second (2015) ACM Conference on Learning @ Scale (Vancouver, BC, Canada) (L@S ’15). Association for Computing Machinery, New York, NY, USA, 75–84. https://doi.org/10.1145/2724660.2724670
  • Lai et al. (2020) Chufan Lai, Zhixian Lin, Ruike Jiang, Yun Han, Can Liu, and Xiaoru Yuan. 2020. Automatic Annotation Synchronizing with Textual Description for Visualization. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI ’20). Association for Computing Machinery, New York, NY, USA, 1–13. https://doi.org/10.1145/3313831.3376443
  • Latif et al. (2022) Shahid Latif, Zheng Zhou, Yoon Kim, Fabian Beck, and Nam Wook Kim. 2022. Kori: Interactive Synthesis of Text and Charts in Data Documents. IEEE Transactions on Visualization and Computer Graphics 28, 1 (2022), 184–194. https://doi.org/10.1109/TVCG.2021.3114802
  • Lee et al. (2015) Bongshin Lee, Nathalie Henry Riche, Petra Isenberg, and Sheelagh Carpendale. 2015. More Than Telling a Story: Transforming Data into Visually Shared Stories. IEEE Computer Graphics and Applications 35, 5 (2015), 84–90. https://doi.org/10.1109/MCG.2015.99
  • Lee et al. (2021) Doris Jung-Lin Lee, Dixin Tang, Kunal Agarwal, Thyne Boonmark, Caitlyn Chen, Jake Kang, Ujjaini Mukhopadhyay, Jerry Song, Micah Yong, Marti A. Hearst, and Aditya G. Parameswaran. 2021. Lux: Always-on Visualization Recommendations for Exploratory Data Science. arXiv:2105.00121 [cs.DB]
  • Li et al. (2023b) Haotian Li, Yun Wang, Q. Vera Liao, and Huamin Qu. 2023b. Why is AI not a Panacea for Data Workers? An Interview Study on Human-AI Collaboration in Data Storytelling. arXiv:2304.08366 [cs.HC]
  • Li et al. (2023a) Haotian Li, Yun Wang, and Huamin Qu. 2023a. Where Are We So Far? Understanding Data Storytelling Tools from the Perspective of Human-AI Collaboration. Technical Report MSR-TR-2023-38. Microsoft. https://www.microsoft.com/en-us/research/publication/where-are-we-so-far-understanding-data-storytelling-tools-from-the-perspective-of-human-ai-collaboration/
  • Li et al. (2022) Junnan Li, Dongxu Li, Caiming Xiong, and Steven Hoi. 2022. BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation. https://doi.org/10.48550/ARXIV.2201.12086
  • Liu and Chilton (2022) Vivian Liu and Lydia B Chilton. 2022. Design Guidelines for Prompt Engineering Text-to-Image Generative Models. In Proceedings of the 2022 CHI Conference on Human Factors in Computing Systems (New Orleans, LA, USA) (CHI ’22). Association for Computing Machinery, New York, NY, USA, Article 384, 23 pages. https://doi.org/10.1145/3491102.3501825
  • Lu et al. (2020) Min Lu, Chufeng Wang, Joel Lanir, Nanxuan Zhao, Hanspeter Pfister, Daniel Cohen-Or, and Hui Huang. 2020. Exploring Visual Information Flows in Infographics. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI ’20). Association for Computing Machinery, New York, NY, USA, 1–12. https://doi.org/10.1145/3313831.3376263
  • Lutz (2014) Eleanor Lutz. 2014. Flight videos deconstructed. http://tabletopwhale.com/2014/09/29/flight-videos-deconstructed.html
  • Martin et al. (2019) Lynsey J Martin, Alison Turnquist, Brianna Groot, Simon YM Huang, Ellen Kok, Brent Thoma, and Jeroen JG van Merriënboer. 2019. Exploring the role of infographics for summarizing medical literature. Health Professions Education 5, 1 (2019), 48–57.
  • McCrorie et al. (2016) Alan David McCrorie, Conan Donnelly, and Kieran J McGlade. 2016. Infographics: healthcare communication for the digital age. The Ulster medical journal 85, 2 (2016), 71.
  • Morris et al. (2014) Meredith Ringel Morris, Andreea Danielescu, Steven Drucker, Danyel Fisher, Bongshin Lee, m. c. schraefel, and Jacob O. Wobbrock. 2014. Reducing Legacy Bias in Gesture Elicitation Studies. Interactions 21, 3 (may 2014), 40–45. https://doi.org/10.1145/2591689
  • Murray et al. (2017) Iain R Murray, AD Murray, Sarah J Wordie, Chris W Oliver, AW Murray, and AHRW Simpson. 2017. Maximising the impact of your work using infographics. Bone & joint research 6, 11 (2017), 619–620.
  • OpenAI (2023) OpenAI. 2023. https://platform.openai.com/docs/models/gpt-3-5
  • Perkins (1992) David N Perkins. 1992. Topography of Invention DAVID N. PERKINS. Inventive minds: Creativity in technology 10 (1992), 238.
  • Pinheiro and Poco (2022) Joao Pinheiro and Jorge Poco. 2022. ChartText: Linking Text with Charts in Documents. arXiv:2201.05043 [cs.HC]
  • Qian et al. (2021) Chunyao Qian, Shizhao Sun, Weiwei Cui, Jian-Guang Lou, Haidong Zhang, and Dongmei Zhang. 2021. Retrieve-Then-Adapt: Example-based Automatic Generation for Proportion-related Infographics. IEEE Transactions on Visualization and Computer Graphics 27, 2 (2021), 443–452. https://doi.org/10.1109/TVCG.2020.3030448
  • Quealy and Sanger-katz (2016) Kevin Quealy and Margot Sanger-katz. 2016. Is Sushi ’Healthy’? What About Granola? Where Americans and Nutritionists Disagree. https://www.nytimes.com/interactive/2016/07/05/upshot/is-sushi-healthy-what-about-granola-where-americans-and-nutritionists-disagree.html
  • Reimers and Gurevych (2019) Nils Reimers and Iryna Gurevych. 2019. Sentence-BERT: Sentence Embeddings using Siamese BERT-Networks. https://arxiv.org/abs/1908.10084
  • Ren et al. (2019) Donghao Ren, Bongshin Lee, and Matthew Brehmer. 2019. Charticulator: Interactive Construction of Bespoke Chart Layouts. IEEE Transactions on Visualization and Computer Graphics 25, 1 (2019), 789–799. https://doi.org/10.1109/TVCG.2018.2865158
  • Rietzschel et al. (2014) Eric F. Rietzschel, Bernard A. Nijstad, and Wolfgang Stroebe. 2014. Effects of Problem Scope and Creativity Instructions on Idea Generation and Selection. Creativity Research Journal 26, 2 (2014), 185–191. https://doi.org/10.1080/10400419.2014.901084
  • Satyanarayan et al. (2017) Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, and Jeffrey Heer. 2017. Vega-Lite: A Grammar of Interactive Graphics. IEEE Transactions on Visualization & Computer Graphics (Proc. InfoVis) 23, 1 (2017), 341–350. https://doi.org/10.1109/tvcg.2016.2599030
  • Schrier et al. (2008) Evan Schrier, Mira Dontcheva, Charles Jacobs, Geraldine Wade, and David Salesin. 2008. Adaptive Layout for Dynamically Aggregated Documents. In Proceedings of the 13th International Conference on Intelligent User Interfaces (Gran Canaria, Spain) (IUI ’08). Association for Computing Machinery, New York, NY, USA, 99–108. https://doi.org/10.1145/1378773.1378787
  • Shi et al. (2023) Xinyu Shi, Ziqi Zhou, Jing Wen Zhang, Ali Neshati, Anjul Kumar Tyagi, Ryan Rossi, Shunan Guo, Fan Du, and Jian Zhao. 2023. De-Stijl: Facilitating Graphics Design with Interactive 2D Color Palette Recommendation. In Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems (Hamburg, Germany) (CHI ’23). Association for Computing Machinery, New York, NY, USA, Article 122, 19 pages. https://doi.org/10.1145/3544548.3581070
  • Siricharoen (2013) Waralak V Siricharoen. 2013. Infographics: the new communication tools in digital age.
  • Srinivasan et al. (2021) Arjun Srinivasan, Nikhila Nyapathy, Bongshin Lee, Steven M. Drucker, and John Stasko. 2021. Collecting and Characterizing Natural Language Utterances for Specifying Data Visualizations. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (Yokohama, Japan) (CHI ’21). Association for Computing Machinery, New York, NY, USA, Article 464, 10 pages. https://doi.org/10.1145/3411764.3445400
  • Stokes (2001) Patricia D Stokes. 2001. Variability, constraints, and creativity: Shedding light on Claude Monet. American Psychologist 56, 4 (2001), 355.
  • Sultanum et al. (2021) Nicole Sultanum, Fanny Chevalier, Zoya Bylinskii, and Zhicheng Liu. 2021. Leveraging Text-Chart Links to Support Authoring of Data-Driven Articles with VizFlow. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (Yokohama, Japan) (CHI ’21). Association for Computing Machinery, New York, NY, USA, Article 16, 17 pages. https://doi.org/10.1145/3411764.3445354
  • Sultanum and Srinivasan (2023) Nicole Sultanum and Arjun Srinivasan. 2023. DataTales: Investigating the use of Large Language Models for Authoring Data-Driven Articles. arXiv:2308.04076 [cs.HC]
  • Swearngin et al. (2020) Amanda Swearngin, Chenglong Wang, Alannah Oleson, James Fogarty, and Amy J. Ko. 2020. Scout: Rapid Exploration of Interface Layout Alternatives through High-Level Design Constraints. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI ’20). Association for Computing Machinery, New York, NY, USA, 1–13. https://doi.org/10.1145/3313831.3376593
  • Tabata et al. (2019) Sou Tabata, Hiroki Yoshihara, Haruka Maeda, and Kei Yokoyama. 2019. Automatic Layout Generation for Graphical Design Magazines. In ACM SIGGRAPH 2019 Posters (Los Angeles, California) (SIGGRAPH ’19). Association for Computing Machinery, New York, NY, USA, Article 9, 2 pages. https://doi.org/10.1145/3306214.3338574
  • Tarkhova et al. (2020) Lyaylya Tarkhova, Sergey Tarkhov, Marat Nafikov, Ilshat Akhmetyanov, Dmitry Gusev, and Ramzid Akhmarov. 2020. Infographics and their application in the educational process. International Journal of Emerging Technologies in Learning (IJET) 15, 13 (2020), 63–80.
  • Thompson et al. (2021) John R Thompson, Zhicheng Liu, and John Stasko. 2021. Data Animator: Authoring Expressive Animated Data Graphics. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (Yokohama, Japan) (CHI ’21). Association for Computing Machinery, New York, NY, USA, Article 15, 18 pages. https://doi.org/10.1145/3411764.3445747
  • Tong et al. (2023) Wai Tong, Zhutian Chen, Meng Xia, Leo Yu-Ho Lo, Linping Yuan, Benjamin Bach, and Huamin Qu. 2023. Exploring Interactions with Printed Data Visualizations in Augmented Reality. IEEE Transactions on Visualization and Computer Graphics 29, 1 (2023), 418–428. https://doi.org/10.1109/TVCG.2022.3209386
  • Tyagi et al. (2022) Anjul Tyagi, Jian Zhao, Pushkar Patel, Swasti Khurana, and Klaus Mueller. 2022. Infographics Wizard: Flexible Infographics Authoring and Design Exploration. Computer Graphics Forum 41, 3 (2022), 121–132. https://doi.org/10.1111/cgf.14527 arXiv:https://onlinelibrary.wiley.com/doi/pdf/10.1111/cgf.14527
  • Vidal (2010) René Victor Valqui Vidal. 2010. Creative problem solving: An applied university course. Pesquisa Operacional 30 (2010), 405–426.
  • Wang et al. (2021) Yun Wang, Yi Gao, Ray Huang, Weiwei Cui, Haidong Zhang, and Dongmei Zhang. 2021. Animated Presentation of Static Infographics with InfoMotion. Computer Graphics Forum 40, 3 (2021), 507–518. https://doi.org/10.1111/cgf.14325
  • Wang et al. (2019) Yun Wang, Zhida Sun, Haidong Zhang, Weiwei Cui, Ke Xu, Xiaojuan Ma, and Dongmei Zhang. 2019. Datashot: Automatic generation of fact sheets from tabular data. IEEE transactions on visualization and computer graphics 26, 1 (2019), 895–905.
  • Wang et al. (2018) Yun Wang, Haidong Zhang, He Huang, Xi Chen, Qiufeng Yin, Zhitao Hou, Dongmei Zhang, Qiong Luo, and Huamin Qu. 2018. InfoNice: Easy Creation of Information Graphics. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (Montreal QC, Canada) (CHI ’18). Association for Computing Machinery, New York, NY, USA, 1–12. https://doi.org/10.1145/3173574.3173909
  • Webson and Pavlick (2021) Albert Webson and Ellie Pavlick. 2021. Do prompt-based models really understand the meaning of their prompts?
  • White et al. (2023) Jules White, Quchen Fu, Sam Hays, Michael Sandborn, Carlos Olea, Henry Gilbert, Ashraf Elnashar, Jesse Spencer-Smith, and Douglas C Schmidt. 2023. A prompt pattern catalog to enhance prompt engineering with chatgpt.
  • Wongsuphasawat et al. (2016) Kanit Wongsuphasawat, Dominik Moritz, Anushka Anand, Jock Mackinlay, Bill Howe, and Jeffrey Heer. 2016. Towards a General-Purpose Query Language for Visualization Recommendation. In Proceedings of the Workshop on Human-In-the-Loop Data Analytics (San Francisco, California) (HILDA ’16). Association for Computing Machinery, New York, NY, USA, Article 4, 6 pages. https://doi.org/10.1145/2939502.2939506
  • Xia et al. (2018) Haijun Xia, Nathalie Henry Riche, Fanny Chevalier, Bruno De Araujo, and Daniel Wigdor. 2018. DataInk: Direct and Creative Data-Oriented Drawing. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (Montreal QC, Canada) (CHI ’18). Association for Computing Machinery, New York, NY, USA, 1–13. https://doi.org/10.1145/3173574.3173797
  • Xiao et al. (2023) Shishi Xiao, Suizi Huang, Yue Lin, Yilin Ye, and Wei Zeng. 2023. Let the Chart Spark: Embedding Semantic Context into Chart with Text-to-Image Generative Model. arXiv:2304.14630 [cs.AI]
  • Xiao et al. (2024) Shishi Xiao, Liangwei Wang, Xiaojuan Ma, and Wei Zeng. 2024. TypeDance: Creating Semantic Typographic Logos from Image through Personalized Generation.
  • Yuan et al. (2021) Lin-Ping Yuan, Ziqi Zhou, Jian Zhao, Yiqiu Guo, Fan Du, and Huamin Qu. 2021. InfoColorizer: Interactive Recommendation of Color Palettes for Infographics. arXiv:2102.02041 [cs.HC]
  • Zhang et al. (2020) Jiayi Eris Zhang, Nicole Sultanum, Anastasia Bezerianos, and Fanny Chevalier. 2020. DataQuilt: Extracting Visual Elements from Images to Craft Pictorial Visualizations. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI ’20). Association for Computing Machinery, New York, NY, USA, 1–13. https://doi.org/10.1145/3313831.3376172
  • Zheng et al. (2019) Xinru Zheng, Xiaotian Qiao, Ying Cao, and Rynson W. H. Lau. 2019. Content-Aware Generative Modeling of Graphic Design Layouts. ACM Trans. Graph. 38, 4, Article 133 (jul 2019), 15 pages. https://doi.org/10.1145/3306346.3322971
  • Zhou et al. (2023) Tongyu Zhou, Connie Liu, Joshua Kong Yang, and Jeff Huang. 2023. Filtered.Ink: Creating Dynamic Illustrations with SVG Filters. In Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems (Hamburg, Germany) (CHI ’23). Association for Computing Machinery, New York, NY, USA, Article 129, 15 pages. https://doi.org/10.1145/3544548.3581051
  • Zong et al. (2023) Jonathan Zong, Josh Pollock, Dylan Wootton, and Arvind Satyanarayan. 2023. Animated Vega-Lite: Unifying Animation with a Grammar of Interactive Graphics. IEEE Transactions on Visualization and Computer Graphics 29, 1 (2023), 149–159. https://doi.org/10.1109/TVCG.2022.3209369
  • Zuñiga (2017) Amber Zuñiga. 2017. What You Should Know About Vegetarianism (Infographic). https://www.behance.net/gallery/59893615/What-You-Should-Know-About-Vegetarianism-(Infographic)