Interactive Data Comics

Zezhong Wang, Hugo Romat, Fanny Chevalier, Nathalie Henry Riche, Dave Murray-Rust and Benjamin Bach

Abstract—This paper investigates how to make data comics interactive. Data comics are an effective and versatile means for visual
communication, leveraging the power of sequential narration and combined textual and visual content, while providing an overview of
the storyline through panels assembled in expressive layouts. While a powerful static storytelling medium that works well on paper
support, adding interactivity to data comics can enable non-linear storytelling, personalization, levels of details, explanations, and
potentially enriched user experiences. This paper introduces a set of operations tailored to support data comics narrative goals that go
beyond the traditional linear, immutable storyline curated by a story author. The goals and operations include adding and removing
panels into pre-defined layouts to support branching, change of perspective, or access to detail-on-demand, as well as providing and
modifying data, and interacting with data representation, to support personalization and reader-defined data focus. We propose a
lightweight specification language, C OMIC S CRIPT, for designers to add such interactivity to static comics. To assess the viability of
our authoring process, we recruited six professional illustrators, designers and data comics enthusiasts and asked them to craft an
interactive comic, allowing us to understand authoring workflow and potential of our approach. We present examples of interactive
comics in a gallery. This initial step towards understanding the design space of interactive comics can inform the design of creation
tools and experiences for interactive storytelling.
Index Terms—Data comics, Non-linear narrative, interactive storytelling

1 I NTRODUCTION panels, load and switch comic layouts, highlight and filter elements, as
well as enable data input and manipulation.
Data comics leverage the storytelling and engaging power of sequential
art [21,44] to communicate compelling data-driven stories [8,74]. Built To inform the set and design of interactive operations, we estab-
upon the visual language of comics, this medium uses multiple panels lish six goals of interactivity for data-driven storytelling, and report
integrating visualization and text organized in a meaningful sequence on a systematic review of traditional (non-data) comics to understand
to convey a rich narrative. So far, data comics encountered in the which interactions the community of comics authors is currently pro-
wild [11, 15] and research [7, 67] are mostly static; the panel layout viding to support some of these goals (Sect. 3). When attempting to
itself encodes the flow of information, guiding the reader through a design and create interactive comics building on these operations, we
predefined sequence of panels [44]. A major advantage of static comics found no appropriate tool to support rapid prototyping for story authors
compared to other storytelling mediums is the absence of programming (Sect. 4). Creating interactive and potentially non-linear data comics in
or animation skills required for authoring them, making them more prototyping tools such as Adobe XD or Figma leads to exponentially
approachable to a wide audience of creators. complex views and a substantial performance challenge. The only
existing alternatives are full-fledged programming approaches (e.g.,
Conversely, interactivity is a core element in understanding data
HTML, CSS, and JavaScript), which are less approachable to many
through visualization and enables viewers to consume a story in
designers through their steep learning curve, but also require developers
different ways, giving more agency around how the narrative un-
significant development time.
folds, and eventually may improve comprehension and recall in story-
To mitigate this problem and allow story authors to more quickly
telling [38, 45, 50]. Interactivity in storytelling enables the viewer to
explore interactivity, we propose a lightweight declarative scripting
e.g., drill into parts of a story to access additional information, context,
approach: C OMIC S CRIPT (Sect. 5). C OMIC S CRIPT is grounded in
or explanations [12, 18, 64], or to curate their own version of the story
our formalization and operationalization of the core building blocks for
given their own approach to explore the data [25]. The comic artist
interactive data comics. C OMIC S CRIPT is inspired by other declarative
community has already experimented with interactivity in creative ways
languages such as Vega-Lite [52] and DataTheater [39]. In our ap-
such as letting the reader navigate an infinite canvas [43], or linking
proach, designers first create panels in traditional graphics editing tools
between nested panels to create multiple narrative paths for a personal-
or digitize hand-drawn sketches. Then, they define comic layouts and
ized story [29]. These compelling explorations hint at a larger design
script interaction in a web editor. Thus, rather than specifying graphi-
space for adding interaction to aid storytelling with data comics.
cal elements, C OMIC S CRIPT allows to augment existing graphics with
In this paper, we contribute the formalization of a core set of opera-
interactivity using a core set of operations.
tions for interactive data comics, which can help inform the develop-
To explore the design space of interactive operations and iterate
ment of future graphical user interfaces for creation tools. We propose a
on C OMIC S CRIPT, we engaged in a two-week-long design process
lightweight scripting approach enabling to add these operations to a set
with six illustrators, designers, and postgraduate computer science
of existing comic panels. Triggered by a user interaction, an operation
students (Sect. 6). Feedback suggests that our scripting approach
transforms one or more of the comic components: content, structure, or
is understandable by non-programmers and fosters exploration of
visual appearance. These operations dynamically append and replace
the potential of interaction for data comics. Our study shows po-
tential for interactive storytelling, while providing an extensible ba-
sis for exploring future authoring tools and types of interaction. It
• Z. Wang and B. Bach are with University of Edinburgh. E-mail:
suggests possibilities for a range of scenarios such as exploration,
{zezhong.wang, bbach}@ed.ac.uk.
personalization, learning data literacy as well as engaging viewers
• H. Romat is with ETH Zurich. E-mail: hugo.romat@gmail.com.
with messages. A gallery of interactive data comics can be found
• F. Chevalier is with University of Toronto. E-mail: fanny@cs.toronto.edu.
online, alongside the editor, tutorials, and detailed documentation:
• N. Henry Riche is with Microsoft Research. E-mail: nath@microsoft.com.
https://interactivedatacomics.github.io.
• D. Murray-Rust is with TU Delft. E-mail: D.S.Murray-Rust@tudelft.nl.
Manuscript received xx xxx. 201x; accepted xx xxx. 201x. Date of Publication 2 BACKGROUND
xx xxx. 201x; date of current version xx xxx. 201x. For information on
2.1 Interaction in Storytelling
obtaining reprints of this article, please send e-mail to: reprints@ieee.org.
Digital Object Identifier: xx.xxxx/TVCG.201x.xxxxxxx Interaction plays a crucial role in information visualization, enabling
analysts and domain scientists to explore multiple facets of their data
and discover patterns [17, 31]. Interactive visualization is also valuable pare panels. Large and information-rich panels can invite a reader into
to a more general audience and a variety of tasks and contexts [27] exploration and discovery. Small multiples, as used in exploratory visu-
such as searching histories of names [70], browsing through a corpus alization [6, 40], can provide the reader with an at-a-glance overview
of books [59], or learning experiences in museums [33]. Interaction is of actors, data, visualization, insights, and events in a data story, facili-
prevalent in data-driven storytelling [49], whether it allows the viewer tating individual access. While authors such as Chris Ware have been
to enhance story structure and enable reader-driven navigation, link experimenting with non-linear storytelling in static comics, adding
different story elements [55], or provide controlled explorations such as dynamic interaction to paper versions allows more possibilities [5].
dynamic queries [53, 54]. In fact, most data-driven stories encountered In this paper, we look at interactions that work with a digital comic
in the wild from news media outlets, designers and practitioners provide on a screen, making static data-comics dynamic by e.g., changing the
some degree of interaction (see, e.g., [34] for a comprehensive list). layout, the visibility of panels, or referencing particular elements. This
The value of interaction in storytelling is manyfold: it is used to is designed to complement hand-drawn and computer-generated comic
engage viewers more deeply with the data to enhance their compre- styles equally, by opening spaces for exploration. We hope to increase
hension and memorability, to prompting self-reflection, foster critical engagement with the story and data, especially by developing the way
thinking, or personalize reading, to name a few [34, 45]. Depend- that data and narrative presentations relate to each other.
ing on the type of message evidenced by the data, viewers may learn
something new [32, 46], change their perspective on a topic [56, 57], 2.3 Authoring Comics, Visualization, and Interaction
or modify their behavior [58]. A few research studies demonstrated
several of the direct benefits of adding interaction to data-driven stories. Creating comics requires many skills and steps such as storyboarding,
Hullman et al. [38] demonstrated that interactions eliciting the viewer illustration, layout planning, and more. Adding interactivity demands
to externalize their prior knowledge before contrasting it with the data an additional set of abilities around defining and keeping track of
enabled a deeper comprehension and recall of the information. Romat the state of panels and objects, and configuring dynamic operations.
et al. [50] found that providing interactions to personalize visual ele- These are currently supported through a range of diverse tools, some
ments was likely to impact how viewers related to data and encouraged targeted directly at comics, and some more general purpose. Besides
deeper reflection. Zhi et al. [75] demonstrated that interactions may the mainstream graphic design tools such as Adobe Photoshop, Adobe
also impact levels of user engagement. Illustrator, or design tools like Figma, an array of tools particularly
As pointed by Amanda Cox in her keynote at VisWeek 2011 [23], to create traditional comics exist. For example, Clip Studio Paint [2]
one of the challenges of interactive storytelling is how viewers discover provides a set of toolkits and features for comic drawing, including
the interactive elements and how to use them. Boy et al. [14] provide layout templates, environments, and characters. Comics can even be
solutions to enhance affordances and make these interactions discover- created without drawing, through tools that support creation by drag and
able. Other research shows that different interaction mechanisms may drop of assets from a library [3, 30, 62], automatic layout solution [16],
appeal to different people, making it difficult to recommend specific automatic generation of data story in comic strips [73], presentation of
types of interactions [45]. exploratory analyses in a computational notebook as a comic [35], and
creating comics from other media formats [19, 26, 60, 63].
To summarize, while there are challenges to creating appropriate,
compelling interactions for storytelling media and making them discov- Several digital comic creation systems have been developed for au-
erable, several studies demonstrate direct benefits to readers. Interactive thoring and presenting interactive comics, including branching comics
experiences may connect readers more deeply to the data, enhance com- with multiple storylines [61] or non-branching comics which trace the
prehension and recall of data-driven stories and open up new kinds of consequences of audience actions [24]. Making comics tangible, An-
engagement. This present work seeks to explore what interactions can drews et al. [5] built a physical and digital environment allowing an
be added to the data comics medium, and how it could be done. audience to interact with predefined objects in comics drawn on paper
above a multi-touch table. Other ad-hoc physical solutions involve
2.2 Data Comics creative cutting and folding of paper to support branching stories [E28,
E29] (see Section 3). However, these tools lack support for the kind of
Data comics have attracted the attention of the visualization and sto- interactions that data practitioners require, such as filtering, leaving a
rytelling community in recent years [8, 74] (see a collection on the considerable workload for the creator.
data comics website [11]) and have been defined as “juxtaposing multi- For visualization and visual storytelling, researchers have focused
ple visualizations into comic strip layouts consisting of a sequence of on interfaces for non-programmers, supporting direct manipulation
panels, each appropriately annotated and decorated with both visual and clever data binding methods. Tools have been created for creating
and textual elements, and arranged into a sequence that progressively visualization from templates [42] as well as creating expressive visual-
develops the overarching story told in the comic” [74]. ization designs [37,41,48]. Tools for data-driven storytelling can create
Compared to more open-ended infographics, data comics support infographics [72], static graph comics [36], personalized glyhs [71] or
understanding of complex information by breaking down the complex- animated video clips [4]. Only few tools provide interactivity through,
ity of stories into smaller chunks (i.e. panels), laid out in a sequential e.g., navigating a slideshow [51], showing annotations [47], or scrol-
order [69]. They have been used in multiple domains such as telling lytelling [1, 55]. Libraries for creating interactive explorables and
stories about temporal networks [7], presenting statistical analysis [67] articles, such as Tangle [65] and Idyll [22] provide for scripting interac-
and teaching people to decode novel data visualizations [66]. tions such as sliders and update visual representations based on these
Data comics can be graphically very rich, with styles ranging from values. Tableau also allows the export of interactive visualizations into
clean vector graphics and visualizations created with charting software a specific layout, resembling comics or dashboards. Visual elements in
to free-hand illustrations [66]. This graphic expressiveness can be visualizations are highlighted on mouseover and show tool-tips.
key to reaching specific audiences and attracting readers, with artistic To support more flexible workflows, Bigelow et al. [13] provide a
and engaging presentations often giving richer context around more bridge between Illustrator and D3. Our approach is similar to Bigelow
formal data visualizations. As with infographics or comics for science et al. and Idyll in spirit, as we also separate the visual design of comics
communication [28], data comics can include more literal references from the specification of interactivity.
to data through characters, numbers, and metaphors [11]. Data comics
can use the unfolding narrative structure to provide a rich space for
information about people and places, the origin and context of data, as 3 I NTERACTION FOR DATA C OMICS
well as information about data transformation and analysis [67]. To streamline our exploration and creation of interactive data comics,
Data comics are typically created as ‘static’ pieces, which makes the we define six goals for interaction in data comics. These goals either
creation and sharing easy compared to dynamic work such as anima- address shortcomings in static data comics, or open up new opportuni-
tions and interactive media. Comics can be read at an individual pace: ties for storytelling, exploration, personalization, and engagement with
a reader can pause, reflect, glance back to previous panels, or com- this medium. We then report on a systematic analysis of interactions in
traditional (non-data) comics to collect specific low-level interactions if?”), or as reactions to the reader’s answer to a knowledge question.
(Figure. 1) that inform interactions for data comics. [G5] PAUSE & R EVEAL—Gradually revealing information can be
used as a device to build tension and force the reader to pause to think,
3.1 Goals of Interaction or make a choice. Many web comics have played with gradual reveal
Our goals are informed by extensive discussion among the authors, through continuous scrolling, or upon clicking on a visual element or
our own exploration of creating interactive data comics, our analysis panel. Interaction can build artificial barriers for the reader to advance in
of traditional static and interactive comics and existing static data the story. These range from a simple proof of attention (e.g. mouse over
comics, as well as our own review of the body of work on interaction a panel), to an interaction demonstrating the knowledge of the reader
in storytelling (Sect. 2.1). In defining these goals, we aim to exclude or understanding of the prior panels (e.g. multiple choice question), to
interactions that merely support general engagement without a specific prompting the reader to make guess or a decision [38].
link to data-driven storytelling. For example, general interactions [G6] I NPUT DATA—Data comics and data stories usually contain
may trigger entertaining animations by moving or shaking elements or data provided by the author. However, interaction allows the reader
panels without any semantics associated with it; objects can be made to input or alter data used in the story, decide on manipulations to
interactive for the reader to play with it, like a music instrument, or apply to the existing data, or on parameters for data simulation. For
a toy present in a panel scene. As the design space of such playful example, providing input mechanisms for readers to enter their calorie
interactions is virtually limitless, and few studies indicate most effective consumption or favorite movie can update the panels content for a more
ones to retain and focus the reader, we opted to scope them out in the personalized, and potentially compelling message. Inputting (personal)
present work. data could make data stories more engaging and informative through
[G1] N AVIGATE—Navigation moves the readers between different personalization and explore the effect of different parameters onto the
parts of the story and provides agency to decide what parts to focus on. data through dynamic queries.
Static data comics already enable different levels of navigation through 3.2 Analysis of Interactive (non-data) Comics
skimming, following the proposed sequence, pausing, focusing only on
the text or graphics, or skipping entire panels and pages. Interactions We collected 33 traditional interactive comics (found online) to analyze
with comics can support or reinforce these different reading experi- which interactions existing interactive comics already provide, and to
ences, or provide entirely for new modes of navigation through, e.g., inform the authoring process of interactive data comics. Two of the
hyperlinks, drilling-down into specific panels, flashbacks, or selecting authors examined the collection and converged on a code book. One
panels of interest. Interactive navigation in data comics can provide of the authors then proceeded to the coding of the corpus, categorizing
more flexibility to experience a story, follow one’s interests, as well as interactions into higher level operations (e.g. add/remove element,
revisit the information in an already read story. reorder panel, Fig. 1) and relating them to our goals G1-G6.
[G2] D ETAILS ON D EMAND—Well known in information visual-
ization, details on demand provide additional information to the inter- Interaction Analysis—Trigger and Effects We describe an
ested reader. Static comics and stories are inherently author-driven with interaction as having a trigger mechanism, that is, how the interaction
the author deciding on the type of information and level of detail in each is activated, and the resulting effects of the interaction, that is, what
panel. Moreover, the space for each panel is naturally limited to show changes occur in the comics. We also found interactions to either
multiple panels side by side, which limits the amount and complexity impact the content within panels, or the structure of the comic and its
of content that each panel can afford. Interaction can help provide panels. References to example comics are indicated as E1, E2. The full
details about, e.g., visual encodings and visualization techniques [68], list of example comics is found in the Appendix.
data provenance and transformation [67], context, side-stories or other Interaction trigger At the top of the table, we list the elements in
background information. Designing with D ETAILS ON D EMAND in the comic that acts as the trigger for an interaction. Interactive triggers
mind, allows an author to streamline the storyline while remaining include (i) a particular visual element in a panel, such as an object, or a
inclusive to audiences with different interests, backgrounds, and data data point that can be hovered over, clicked, or dragged; (ii) a widget,
and visualization literacy skills. such as a button, a slider, or a text field for the reader to input data or
[G3] C HANGE P ERSPECTIVE—Author-driven stories usually specify a choice, which may be integrated within a panel, or placed on
present a single perspective of the author. This often requires balancing the side; (iii) an entire panel, that can be clicked to indicate a choice,
the amount of information with how these information are presented, or reveal what comes next; or (iv) the whole canvas, that the reader can
the author’s interests with those of the audience, objective aspects with navigate through scrolling [E1], panning or zooming, or even explore
perspectives of subjectivity, as well as between different stories cen- in augmented reality by moving a device around [E19, E32].
tered around a particular data element. For example, a story focusing Panel Content lists all of the changes that occur within the panels
on geographic data might favor a ‘global’ holistic perspective over a of the comics. These include (i) change viewport e.g. when the viewer
‘local’ more personal one. Interaction can enable readers to select and focuses the story on a particular geographical area, a panel showing
change main characters, seeing different facets of the data. Switching geographical automatically recenters on that area [E4]; (ii) add/remove
the main character may filter out panels irrelevant to the new character, element in a panel, for instance, when the reader makes a choice in a
add panels directly relevant, and/or update existing visuals to put the given panel, this choice is reflected in the story (e.g. selecting an apple
spotlight on this new character. C HANGE P ERSPECTIVE allows authors or an orange in [E20] results in the character holding the corresponding
to integrate different perspectives in their story and use complementary, fruit in their hand); (iii) change properties of existing elements, as for
contrasting, or contradictory perspectives as narrative devices [9]. instance updating their color, size or location as the result of a story
[G4] B RANCH—Branching introduces forking paths into the sto- choice [E4], or putting a halo effect to put emphasis on the visual
ryline, where each path results in a slightly, or sometimes drastically element; (iv) input data, where the content of the panel is updated
different story. This type of non-linear storytelling provides for a very based on the underlying data that changes, e.g. a line chart [E4].
personal reading experience defined by a set of choices that the reader Panels Layout lists all of the changes that impact the comics struc-
makes. Branching in static comics leads to structures akin to flow ture, i.e., the number and/or layout of panels. These include (i) reorder
charts. Such comics may prove quite challenging to layout, use a lot of panel, e.g. when panels can be swapped to result in a different story
space, and make any single path in the story tree difficult and tedious [E12], or moved around the canvas to reveal panels placed underneath
to reconstruct when looking at the overview (see [E30]). Interaction [E11]; (ii) add/remove panels, e.g., when a choice results in a different
can support branching while offering a linear reading experience for ending, panels that are no longer relevant are removed, and new panels
each path in the tree at any given moment, or displaying two or more are added [E20], or when panels are revealed progressively, either to
paths at once for comparison. In data comics, branching can be used, build up tension and create a surprise effect [E13], or as the result
e.g., to show different versions and perspectives, contrast data and of particular choices [E22]; (iii) change panel properties, such as its
alternatives, as well as explain possible future scenarios (i.e. ”what aspect ratio, or orientation [E12].
 E1 E6 E33 E2 E3 E4 E5 E6 E25 E26 E31 E32 E26 E4 E21 E27 E10 E14 E18 E4 E1 E2 E5 E5 E12 E12 E19 E20 E22 E23 E26 E28 E29 E30 E33 E13 E15 E16 E19 E22 E23 E24 E1 E1 E5 E7 E8 E9 E11 E17 E17 E19 E24

Visual element
Trigger Widget
Panel
Canvas
Change viewport
Panel Add/remove element
Content Change properties
Input data

Panels Reorder panels

Layout Add/remove panel
Change panel properties

G1: NAVIGATE
G2: DETAILS ON DEMAND
G3: CHANGE PERSPECTIVE
Goal G4: BRANCH
G5: PAUSE & REVEAL
G6: INPUT DATA

local effect (within the same panel) propagated effect (across panels) local and propagated effect (within and across panels)

Fig. 1. Results of the manual coding of interactive comics from our corpus (see list at the end of the paper). Interactions are defined by a trigger,
results in visual effects that can affect panel content, and/or panel layout, to achieve a particular communication goal.

Findings The above triggers and effects can be used to enrich the question [E1], or simply because of screen real estate [E5, E17, E26].
storytelling experience in otherwise static comics. Below, we discuss Other examples of reveal are achieved through flipping panels [E9], or
trends and examples relating to our goals. through changing the perspective with parallax, revealing potentially
Interactions vary in the scope of their effect: changes are sometimes important/relevant details only visible from a different angle [E26].
contained within the panel where interaction was triggered, or have an We found only a few instances of I NPUT DATA, through a range
effect that propagates throughout the story. Most commonly, we found of traditional widgets, that can be hand-drawn and fully integrated
a choice or object involved in an early panel to be made consistent in within the comic (like the form and slider in [E22], or buttons in
the rest of the story [E10,E14]. These are more profound actions that [E4]), or computer-generated, like that found in traditional explorable
change the course of the story, and therefore the set of panels presented explanations [E1]. An interesting instance of data input we found is
to the reader. We note also instances where data is inputted in a panel, randomization [E10]: random generation of content of balloons (in
and where this data is reflected throughout the story [E4,E23]. emoticons), resulting in a new story left to the interpretation to the
NAVIGATE is typically supported by scrolling, or hyperlinks to reader, every single time, and even order and content of panels [E14].
jump to a particular place in the story, when it is not an enforced
slideshow presentation that resembles flipping pages through. We found Summary There is a rich set of interactions found in traditional
interesting instances of aids to navigation in the form of providing a comics and many of these operations can directly be used to support
hint of what choices are possible [E20], or what will come next as the storytelling with data comics; hovering elements to emphasize perspec-
result of a choice [E2], when hovering over different interactive panels tives, adding panels to show details on demand, or posting the reader a
or visual elements. Other supporting effects include highlighting the question to decide on which panels to show next. The design space in
panel where the reader is currently at [E13, E30], or even embodying Fig.1 serves as a blueprint to apply these interactions to data comics.
the reader as a character progressing through panels [E15,E16,E12].
D ETAILS ON D EMAND is supported mostly by two types of inter- 4 E XAMPLES OF I NTERACTIVE DATA C OMICS
action: showing pop-ups or adding and filtering out elements [E4], as
commonly found in visualizations; as well as providing side stories, i.e. Over the course of several months, we engaged in creating sev-
branching on a set of secondary panels, to access more details, context, eral interactive data comics, available on our website: https://
or other perspectives on a point [E6] by adding and removing panels. interactivedatacomics.github.io/examples.html. This section describes
C HANGE P ERSPECTIVE can be supported through instances where two interactive comics to show how interaction has been used for in-
the same character changes their personal perspective, e.g., by changing teractive data-driven storytelling. We then report and reflect on our
the viewport through drag-and-drop, or moving and tilting a device in creation process and the lessons learned that motivate our scripting
the context of augmented reality [E26,E27]. An interesting instance approach discussed in Sect. 5.
of a perspective change is by moving a phone device to a particular
location on a poster, which then triggers the story of a particular set of 4.1 Example 1: Interactions for Detail-on-Demand, Naviga-
characters at the location of focus [E32]. This metaphor is also found tion, and Changing Perspectives
in the famous project HERE [E18], where multiple spatio-temporal This story presents a dynamic network of historic alliances between
viewports are materialized as panels around a larger big room, each of countries in Europe (Fig. 2), based on a static data comic [7]. With the
which providing a “window” in time of a location in the room. goal of informing and educating, this interactive comic offers the option
B RANCH is a popular goal that interaction enables in digital comics. to read the story at different predefined information granularities.
We found many instances where the reader is prompted to make a choice The comic is initialized with two panels (a), a timeline highlighting
that has repercussion on the rest of the story, by e.g. clicking on a visual major events (b), and three version buttons able to change the detail
element or widget [E22], panel [E20], or indicating the direction of of the comic (c). Clicking on a version button shows the correspond-
progression [E13]. Other interesting branching instances are the result ing version of the story: (1) short, (2) medium, and (3) long version
of personalized input, e.g. the reader writes what a character says [E22], (NAVIGATE), adding more events and descriptions at a finer level of
or indicates physical characteristics of a character, which is then used granularity. Some panels show small blue detail buttons (d). Upon click,
to calculate the outcome of the story [E23]. these buttons drill down into the respective panel, again providing more
PAUSE & R EVEAL in our corpus uses add/remove elements and information about the respective event shown in that panel (D ETAILS
panels, for purposes including hiding the result of choices away from ON D EMAND ). Hovering over a country label or one of the events in
the reader to not influence their decision [E13, E28], creating an effect the timeline highlights all occurrences of this element throughout the
of surprise [E2, E7], prompting the reader to guess a result, or answer a comic, supporting navigation by indicating what panels are relevant to
Fig. 2. The interactive comic of European Alliances before World War I presents a dynamic network with a set of countries in Europe, from
forming alliances to regressions. With a goal of informing and educating, this interactive comic presents the story of different information granularity
(N AVIGATE), provides drill gown to acquire information on demand (D ETAILS ON D EMAND), and highlights elements as visual navigation (N AVIGATE).
 N

Fig. 4. Workspace in Figma for the European Alliances comic (Fig. 2);
each small white square is a a full replication of the comic (state) while
blue links represent interactive state transitions.

vector graphics drawing capabilities, as well as features for prototyping

interactivity, and live previews. Visualizations and content can be
created both inside the tool as vector graphics, or imported as hand-
drawn pictures in PNG. Then, a designer can set regions in elements
that trigger specific operations which are then prototyped inside the tool,
by showing in hiding different frames in elements. While being able to
support simple interactions, these no-coding prototyping tools suffer
from serious limitations; an abundance of manual specification and an
increasing amount of duplicating panels was required for even simple
comics and interaction and made it a week-long process to create the
first versions of the comics in Sect. 6.
The resulting workspace in Figma for the example in Sect. 4.1 is
presented in Fig. 4. Maintaining complete states of the comics at
all points of the interactions required many panel duplication. These
number of elements made the workspace challenging to navigate, the
general interaction design hard to preview and possibly fixed. In addi-
Fig. 3. The comic of CO2 emissions presents viewers with personal- tion, the number of visual assets required affected the performance of
ized contents by allowing data input, and provides different equivalent the software itself, making it more tedious to author and preview.
comparisons (B RANCH). Separating the specification of interactions from the visual assets
appeared a necessity, to simplify the authoring process but also to
enable the creation of rich sets of interactions. In addition, enabling
a particular event or country (NAVIGATE), as well as allowing to follow
interactions tailored to data comics and triggered when the reader inputs
a single element through the story (C HANGE P ERSPECTIVE).
data or select a specific value are missing from generic design tools.
4.2 Example 2: Interaction for Data Input and Branching For these reasons, we started developing C OMIC S CRIPT.
The example in Fig. 3 displays the amount of CO2 emissions resulting 5 AUTHORING I NTERACTIVE DATA C OMICS
from personal air-traffic and puts these numbers into context using
To address the issues raised by our initial exploration in Sect. 4 and to
concrete scales [20]. The goal is to engage an audience with their
further explore the possibilities for interactive data comics, we devel-
personal data (I NPUT DATA) and to promote sensitivity for an important
oped C OMIC S CRIPT, a lightweight, declarative language for specifying
issue. The comic allows a reader to input their amount of flights using
comics and interactions over them, with particular support for data
a widget (P1). Internally, this number is converted into (roughly) the
comics. C OMIC S CRIPT is our approach to balance and combine as-
equivalent CO2 emissions, and travel distance. Both numbers are
pects from graphical user interfaces and the power of coding interaction.
shown through a set of pictograms (clouds and globes, respectively)
C OMIC S CRIPT is based on JSON and can be edited and interpreted by
and change with the readers’ input (P2-P4). Then, the comic features
an online editor, and the resulting interactive comics can be exported
three alternative tracks (B RANCH), relating the amount of CO2 emitted
and linked into any website. C OMIC S CRIPT captures most of the inter-
to the average CO2 produced by a human (P5), CO2 absorbed by trees
actions set out in our design space (Sect. 3) through a set of operations
(P6) and equivalent green house gasses produced by cows (P7). Panels
that change content, layout, structure and appearance:
P5-P7, showing these options, are presented as piled stack inspired by
[E11]. Clicking one of these three units adds a set of panels showing • structure operations manipulate structure and layout of a comic,
the values of the respective comparison. The last row of this comic adding or replacing panels or specifying panel layout to make
explains the goal of the Paris climate deal in a static panel and finishes wholesale changes to the layout of all or part of the comic. This
by illustrating the exceed of CO2 of the reader, based on their input. includes navigation such as jumping the reader to a specific panel.
• content operations use classes of objects to highlight and group
4.3 Authoring Challenges in Using Design Tools
visual elements across the comic, or apply Isotype techniques to
Authoring interactive data comics like those described above requires indicate the value of variables.
a wide range of skills and techniques to function, which makes many • Techniques for data input allow users to input numbers through text
existing tools not quite the right fit. As traditional comics, they require or sliders and compute variables and formulas that can be used in
strong visual design, with fonts, appealing color schemes, layout, and the content or to create conditions on whether other operations can
potentially characters and illustrations. As interactive data storytelling be triggered.
media, they require identifying data elements, placing triggers for
interactions, and specifying their effects within and across panels. In the remainder of this section, we first explain the steps involved
In our design process, we first tried common design tools such in creating interactive comics and then explain how C OMIC S CRIPT
as Figma, and Adobe XD. These interfaces come with sophisticated supports scripting interactive comics.
5.1 Creating Comics with C OMIC S CRIPT the referred elements have unique IDs in the file. IDs can be the same
Our process of creating comics has two stages. In the preparation across panels, e.g., the first bar can always be called bar1 across several
phase, a designer specifies each individual panel and its content. This panels with a bar chart.
phase includes thinking through the comic layout, as the designer {"classes":{
needs to decide on a specific layout of panels, i.e., the size and their "name": "countries",
order to achieve a meaningful reading order. Here, they can use their "elements":["france", "germany", "uk"]
usual workflows: a designer could create visualization contents and }}
panels inside vector graphics tools, import hand-drawn images, or rely
on existing visualizations in both pixel and vector format. The only Variables store numerical values which in turn can be shown inside a
restriction is that a single SVG or PNG file should be produced for each text element through a place holder that has the same ID as the variable,
panel in the comic, and they should be provided at a public URL so or used to render a number of ISOTYPE like symbols. Variables can
that the web editor can load them. be obtained from data, or through user input, e.g., using a slider.
A C OMIC S CRIPT comic starts with definitions for each panel, con- {"variables":[
taining a unique ID and a URL for the image (Sect. 5.2). An initial {
layout is also specified, using the panel IDs in a nested structure to "name": "movement","value": 0
describe rows and columns (Sect. 5.2). At this point, the comic can be },{
displayed as a static webcomic, while interaction is added next. "name": "totalkm",
In the scripting phase, the designer defines the list of operations "value": 0,
that can be applied to the comic. Operations are attached to specific "what": [ "movement","*1000"]
elements through their unique IDs and parameterized in the script. }]
Operations such as adding panels or setting a new layout refer to the }
panels through their IDs. The set of structure operations (Sect. 5.5) The optional value field specifies the default value if the variable
works equally well with PNG or SVG files, and allows a large degree is not set. Calculated variables are created by functions, expressed
of flexibility with panel manipulation. However, if the graphics have through a what attribute. Variables can come directly from data or
been created as vector-based SVG files, a wider range of interaction input via input elements (Sect. 5.6).
is possible, as the individual elements in the graphic can be addressed.
Vector elements can be used as triggers for operations, e.g., functioning 5.4 Content Operations
as buttons, or as the targets for effects, such as being added or removed, According to our design space in Sect. 3.2, content operations de-
or highlighted. Objects with the same ID will be applied the same fine which elements are shown inside panels and how they are shown.
effects, allowing for cross panel interaction, such as brushing to high- C OMIC S CRIPT currently provides three content operations.
light related data. Vector elements with IDs also allow the integration
of text input, sliders, isotype pictograms and other types of interac- Highlight changes the appearance of all visual
tion (Sect. 5.4). The remainder of this section explains the individual elements with the same ID across all panels (e.g.,
components of C OMIC S CRIPT, and how they come together to create panels or SVG elements) on mouseover. Highlighting
interactive comics. Our set of operations represents a careful balance can be used as a visual reference when the author
of low-level operations as they are described in the design space in wants the audience to look back/forward at a certain
Sect. 3.2 (e.g., append a panel) and high-level operations that subsume panel or show that an element is the same across the panel (C HANGE
a set of low-level operations (e.g., load layout). More information and P ERSPECTIVE, NAVIGATE). An example of highlight is shown in
a detailed tutorial are included on our website. Fig. 2-bottom). The appearance of a highlighted element is specified
through its CSS attributes scale, stoke, color.
5.2 Panels and Layout
C OMIC S CRIPT loads panels from a URL and assigns them a string ID, Layers enable showing and hiding
which is used throughout the specification to refer to this panel. SVG layers and their elements. This opera-
tions could be used for presenting D ETAILS
{"panels": [{ "id": "myPanel", "url":"panel1.svg"}]} ON D EMAND and linking texts and its visu-
Since the existence and order of panels can vary over the course alisations NAVIGATE. Fig. 5 shows an example how layers can be used
of the interaction, C OMIC S CRIPT provides a flexible way to define to show temporal data as the users clicks dates.
layouts. With the width of each panel given by the SVG or PNG image,
a layout in C OMIC S CRIPT can be specified as a nested structure (e.g.
panels organized in rows, organized in pages). Alternative layouts
can be specified and loaded upon interaction, resulting in rearranging,
adding or removing panels. Layout are thus expressed as nested arrays,
Fig. 5. Using layers, hovering over different time on the timeline triggers
different layers.

Isotype aims to reduce the difficulty of under-

standing abstract content and to support I NPUT DATA
through the user. The operation creates one or more
ISOTYPE like pictograms inside a specified element
the first corresponding to a row in a comic, the second to a column in (i.e., TreesPlaceHolder in Fig 3) and binds the number of icons to
this row and so on (see example above). Panels within a row or column the value of the variable. The size of each icon could be adjusted in
are laid out side-by-side, separated by a gutter which size is specified widthIcon. The icon is loaded from the SVG specified by url.
by the gutter parameter.
5.5 Structure Operations
5.3 Data and Variables
Structure operation change the set of shown panels and potentially
C OMIC S CRIPT allows operations to refer to constructs and data: classes their order. C OMIC S CRIPT provides the following structure operations:
and variables. Classes group visual elements in the comic into groups, append panel, load layout, replace panel, and pan and zoom.
which can be used to highlight elements and refer to groups of ele-
ments. Classes are only possible with SVG panels since they require
 creating process, the purpose of interaction and the corresponding se-
lected interactive operations as well as identifying missing interactions
and operations to iterate on C OMIC S CRIPT. Respective tutorials and
examples can be found on our website.

6.1 Procedure
We conducted a creation workshop consisting of a series of live ses-
sions to help participants create their own interactive comics using
C OMIC S CRIPT. First, we ran a tutorial session, introducing the concept
of data comics and interactive data comics. We showed examples of
Fig. 6. Example for a pan and zoom operation: panning and zooming in data comics, interactive data and non-data comics. Then we used a
one of the panels with a map synchronize the other panels so that the simple example to explain the workflow we followed (Sect. 5) including
same detail of the map is shown in all three years. how to create and export individual comic panels with a design tool
(Figma) and how to add interactions to the comics using our script-
ing approach. Participants attended the tutorial live or could consult
Append adds one or more panels after a speci- the recorded version. We offered 2 hours of daily face-to-face online
fied panel. This operation could be used for different drop-in sessions for answering questions about designing and using
narrative purposes, e.g., B RANCH; providing D ETAILS ON D EMAND C OMIC S CRIPT. Participants volunteered for an individual 15-minute
by drilling down from this panel (Fig. 2-center); revealing the answer semi-structured interview after the completion of their comics. During
for a question raised in the panel; or PAUSE & R EVEAL. This operation the interviews, we asked five questions followed by an open discussion.
does not remove or replace any panels. If the creator wants an operation Questions asked for 1) the desired intentions of interaction for data
to remove any panel and load new panels, ‘replace’ or ‘Load layout’ comics, 2) inspiration and ideation of interactions, 3) creation process
should be applied instead. If multiple panels are inserted, the same and challenges with C OMIC S CRIPT, 4) possible future interactions, and
notion as in layouts is used: e.g., ["p3",["p4","p5"]]. 5) the potential of interactive storytelling.
Replace removes a panel to replace it with one
or more (newpanels). This operation can be used 6.2 Participants
for replacing panels presenting overview with details Six participants (four from Europe, one from Canada and one from
or replacing the following narratives by selecting different data set as Asia) completed their interactive comics and attended the interview.
inputs (C HANGE P ERSPECTIVE). Replacing an overview with details The participants were: a professional illustrator for 15 years (Illu), a
(D ETAILS ON D EMAND) (e.g., clicking the button (d) in Fig. 2). postgraduate student in digital media with 6-year experience of creating
illustration (IlluDigt), a computer science postgraduate student with
Load layout enables to display a fresh set of 15-year experience working as an illustrator (IlluDigitComp), a post-
panels in a specific layout, removing any panel speci- graduate student in design and data science (DesignData), a doctoral
fied by the after attribute. This high-level operation student in creative art and visualization (ArtViz), and a a team of data
can be used similar to a menu on a website (NAVIGATE), which shows storytellers from the company Gramener [30] (DataStr) with experience
alternative versions, e.g., in length, visual style or narration, (Fig. 2). in creating data comics and interactive data comics by programming.
Similar to append, loadlayout could also be used for presenting
D ETAILS ON D EMAND, C HANGE P ERSPECTIVE and B RANCH. 6.3 Qualitative Findings
Pan and Zoom creates a simple pan and zoom We gathered feedback during the creation process, and the interview.
behavior for a single panel, and can synchronize pan We organize insights around three themes: creation process, C OMIC -
and zoom across multiple panels (e.g., in Fig. 6). S CRIPT, and participants’ perspective on the value of interaction.
Pan and zoom help to achieve the goals C HANGE Creation process. Participants worked at their own pace and con-
P ERSPECTIVE and D ETAILS ON D EMAND. tacted the instructor occasionally, mostly towards the end of their cre-
Jump brings the user to another panel, similar ation process. Once selecting a topic and gathering data for their story,
to anchors in HTML. This operation is designed for participants devoted the largest portion of their time to crafting the
non-linear reading by NAVIGATE, and to provide vi- visuals (e.g. elements and panels) of their comics (seven to ten days).
sual navigation in a web comic when a pointed panel For this stage, they used graphics editing tools such as Adobe Illustrator,
is not visible due to limited screen real estate. Photoshop, Figma, INKSCAPE (https://inkscape.org/) and Microsoft
PowerPoint. Participants reported thinking of the interactions as they
Conditions can be attached to operations to designed the comics and crafted the visuals. They integrated the inter-
express constraints when an operation is triggered. actions using C OMIC S CRIPT over one to three days.
This operation allows for personalization, e.g, through I NPUT DATA. The overall comments suggest that all participants appreciated the
For example, depending on the user’s input in P11, Fig. 3 the comic final product. This was particularly salient for creators with no coding
tells tons more than, tons less than or equal to when comparing that experience: “I have all this inspiration imagination and creative ideas
user’s data to other values. but I’ve never been able to transfer them into code because it’s a
5.6 UI Elements for Data Input completely different realm, so what this does is it allows you (a creator)
to take your creative imaginative processes ideas and concepts put
UI elements can be added into SVG panels, replacing an element them into an already constructed editor and then feel proud of yourself.”
with a specific ID. Values from these UI elements are then mapped to (ArtViz). Several participants gravitated towards “different perspective”
variables and used to, trigger conditions or show ISOTYPE symbols. (Illu) (C HANGE P ERSPECTIVE) and non-linear comics (B RANCH) “like
C OMIC S CRIPT currently supports a slider and number input, both Chris Ware [in which] you can almost just choose a panel on a page
demonstrated in Fig. 3. and then see where it leads” (IlluComp).
Participants reported that spending the majority of their time in
6 C REATING I NTERACTIVE DATA C OMICS WITH D ESIGNERS graphics editing software to create the story and design the comic
We asked designers, illustrators and visualization practitioners to create panels. To create different layers or branches, they needed to make more
interactive data comics with our tool. We wanted to gain insights on images and variations than it presented. Also, participants switched
many aspects of the creation process as well as improve C OMIC S CRIPT. between tools, e.g, taking raster images to vector editors to add IDs
We gathered insights on the workflow people follow to craft interactive if there were buttons or placeholders in the panels, and making sure
data comics, their biggest challenges, the role of C OMIC S CRIPT in the the size of the image was not changed across tools (IlluDigt, DataStr).
 After the images were exported, participants started editing from one in number and complexity of the comics (e.g., exploring non-linear data
of the examples on our website, since “the editor already had like a comics). Compared to classic web programming combining HTML,
pretext in it and because I could see what your functionality did and CSS, and Javascript, C OMIC S CRIPT lowers the complexity of the code
with the what your process was I could just change parts of that code and thus lowers the learning curve and saves time to professional devel-
and I didn’t have to know too much as a user.” (ArtViz). opers. C OMIC S CRIPT provides a core set of interactions that designers,
C OMIC S CRIPT usage. Participants completed their comics with illustrators and creators with minimal or no coding skills can copy and
little to no help from the facilitator. Overall, they used nine out of paste and apply to sets of elements and panels crafted in graphics de-
eleven operations in the comics they created. Most participants used sign tools. Our goal with C OMIC S CRIPT is to strike a balance between
operations dealing with the panel layout (Load layout, Replace and approachability of the language and interaction capabilities added to
Append), as well as content operations across panel (Highlight, Layers). static comics.
Half of the participants also used operations enabling readers to modify Extending C OMIC S CRIPT while preserving its simplicity. Par-
the data (Slider, Condition Number input, and Isotype). C OMIC S CRIPT ticipants suggested many extensions to C OMIC S CRIPT: from low-level
definitely involved a learning curve: “Once you understand it then it’s fine control of interactions (e.g. resizing or rotating elements in pan-
totally fine” (IlluDigt). After a few explorations using the code samples els) to higher-level more advanced layouts (e.g. nesting or overlaying
provided, participants were able to implement their ideas: “I always panels). Other desirable features include more sophisticated animated
felt like I knew what I wanted to do and I knew how to do it” (IlluComp). transitions and the creation of visualizations, annotations, data comics
Two participants expressed their enthusiasm for a user interface layer, design patterns [10] as well as enabling incorporating different affor-
enabling them to drag-and-drop the interaction of their choice directly dances to convey interactivity. Animated transitions can help readers
on top of the comics elements. The JSON language was commented as understand changes to the comic following an interaction. Creating
“a very refined code for a specific task” (ArtViz), and “really structured” visualizations, on the other hand, could be done by adding specific
(IlluDigt). The most challenging aspect reported by participants was directives to the language, e.g., by calling on D3 or Vega-Lite [52].
the low-tolerance to common syntax error of C OMIC S CRIPTFour Creating other content, such as text, characters or annotations, could
participants suggested extending current operations, for example, to happen through similar approaches, as partially explored elsewhere [30].
enable panel replacement when using a slider. Two participants wanted Adding different affordances to suggest interactivity is a research di-
a finer control over operations such as resizing or translating elements, rection in itself [14]. The difficulty with these extensions is to balance
which is implemented as low-level operations in C OMIC S CRIPT but the power of the language vs. its simplicity. While adding lower-level
was not surfaced to them at that point. operations (e.g. hide or resize elements) is trivial, adding more com-
Goal of interaction. With regards to the potential of interac- plex functionality may necessitate writing more complex specifications
tion in data comics, participants indicated that providing navigation even for simpler examples. To avoid re-implementing functionality and
(NAVIGATE) and branching (B RANCH) enabled conveying information avoid frequent switching between design tools, C OMIC S CRIPT could
from different perspectives (C HANGE P ERSPECTIVE), e.g., “[Readers] be integrated with other visualization and comic design tools.
can just dive right into it click on something see the connection and Towards easier authoring of interactive data comics. C OMIC -
it’s way easier to get” (IlluDigt). Participants commented that interac- S CRIPT is a first step towards understanding what interactions matter
tions made data more engaging, “get the curiosity of people” (DataStr), most to authors and constitutes a probe into the process they are fol-
“with interactivity you can kind of be[ing] inside of it” (IlluDigt), and po- lowing when creating them. Still, C OMIC S CRIPT requires designers
tentially being used “as weekly reports replacing dashboard” (DataStr) to learn a new syntax, although it is arguably simpler than learning
or in news article to enable audience to “think beyond just the passive full-fledged programming languages. To further lower the effort to
presentation of imagery” (IlluComp). A participant suggested that craft- create interactive data comics, future work should explore graphical
ing interactive comics with C OMIC S CRIPT could both foster creativity user interfaces that can generate C OMIC S CRIPT code from directly
and [enable] learning programming, since this activity “introduces manipulating the graphical elements in comics and their interactive
people to code but also within the creative process, creativity and data operations. Perhaps one of the most pressing issues in streamlining the
can be pushed apart so it’s kind of merging them together in this very authoring process is to facilitate the creation, reuse and organization
nice safe space” (ArtViz). of the many graphical and interactive assets necessary for interactive
data comics. Observations and comments from our study participants
7 D ISCUSSION AND F UTURE W ORK confirm that interactive data comics require a much larger set of visual
assets than traditional comics. Managing these assets and generating
Crafting interactive data comics involves challenges at multiple
the variations involved in each interactive state is arguably the main
levels of the creation process. For several of our workshop partici-
bottleneck for the creation of this new medium and which should be
pants, the experience of using C OMIC S CRIPT was their first attempt
aided through future user interfaces.
to create dynamic, computationally mediated material. Challenges
Eventually, since our approach is agnostic of panels’ content, it
occur at multiple levels: from the design and conception of the interac-
can be extended to other genres of data-driven storytelling such as
tions and non-linear narratives, to the creation and organization of the
infographics, flow diagrams or data-driven articles; sets of panels can
collection of assets composing the comics, to the implementation of
simply be defined as individual graphical components of these artifacts.
the interactive medium. While the effort is substantial, our workshop
Beyond tools to craft interactive comics, we need to support a
revealed that creators see tremendous opportunities in incorporating
change in practice. Authors and designers need to adapt both their
interactions in data comics, making it worthwhile.
mental model and their creation workflow to design and execute in-
Participants’ feedback also suggests that integrating interaction adds
teractive data comics. The learning curve is not only about mastering
many design considerations to the design of comics—what comics
tools (e.g. C OMIC S CRIPT) to craft them, it largely lies in adjusting the
structures can benefit most from interaction, how to make interactivity
mental model to design them: understanding what is possible, and then
discoverable—and presents a set of new challenges—designing multi-
what is desirable. A key enabler is certainly to provide inspiration and
ple combinations of content and panel layout and keeping track of the
examples to draw from—participants relied on examples created with
state of the comic at a given point. To provide guidance and potential
the system and existing interactive comics to develop a sense of what
solutions for these design considerations, further research is needed to
is possible. Additional material to support and inspire the design of
evaluate use and engagement with interaction in data comics.
interactive comics is certainly critical for the future.
C OMIC S CRIPT: a lightweight language to create interactive
data comics. C OMIC S CRIPT provides a scripting mechanism to add ACKNOWLEDGMENTS
interactivity to static comics. It serves as a conceptual middle ground
between traditional interactive prototyping tools, and full-fledged pro- We thank our workshop participants for their time and valuable in-
gramming languages. Compared to interactive prototyping tools, sights. The CO2 emission comic was inspired by earlier exploration of
C OMIC S CRIPT facilitates experimenting with interactions and scaling interactive data comics involving Jacob Ritchie and Dandi Huang.
R EFERENCES [25] P. Dragicevic, Y. Jansen, A. Sarma, M. Kay, and F. Chevalier. Increasing
the transparency of research papers with explorable multiverse analyses.
[1] Flourish. https://flourish.studio/. In Proc. SIGCHI Conference on Human Factors in Computing Systems
[2] Clip studio paint. https://www.celsys.co.jp/en/, 2013. (CHI), pp. 1–15, 2019.
[3] Comic life. http://plasq.com/, 2021. [26] A. Durrant, D. Rowland, D. S. Kirk, S. Benford, J. E. Fischer, and
[4] F. Amini, N. H. Riche, B. Lee, A. Monroy-Hernandez, and P. Irani. Author- D. McAuley. Automics: souvenir generating photoware for theme parks.
ing data-driven videos with dataclips. IEEE Transactions on Visualization In Proc. SIGCHI Conference on Human Factors in Computing Systems
and Computer Graphics, 23(1):501–510, 2016. (CHI), pp. 1767–1776, 2011.
[5] D. Andrews, C. Baber, S. Efremov, and M. Komarov. Creating and using [27] N. Elmqvist, A. V. Moere, H.-C. Jetter, D. Cernea, H. Reiterer, and
interactive narratives: Reading and writing branching comics. In Proc. T. Jankun-Kelly. Fluid interaction for information visualization. Informa-
SIGCHI Conference on Human Factors in Computing Systems (CHI), p. tion Visualization, 10(4):327–340, 2011.
1703–1712. New York, NY, USA, 2012. doi: 10.1145/2207676.2208298 [28] M. Farinella. The potential of comics in science communication. Journal
[6] B. Bach, N. Henry-Riche, T. Dwyer, T. Madhyastha, J.-D. Fekete, and of science communication, 17(1):Y01, 2018.
T. Grabowski. Small multipiles: Piling time to explore temporal patterns [29] D. M. Goodbrey. From comic to hypercomic. In cultural excavation and
in dynamic networks. In Computer Graphics Forum, vol. 34, pp. 31–40, formal expression in the graphic novel, pp. 291–302. Brill, 2013.
2015. [30] Gramener. Comicgen. https://gramener.com/comicgen/#, 2019.
[7] B. Bach, N. Kerracher, K. W. Hall, S. Carpendale, J. Kennedy, and [31] J. Heer and B. Shneiderman. Interactive dynamics for visual analysis.
N. Henry Riche. Telling stories about dynamic networks with graph Communications of the ACM, 55(4):45–54, 2012.
comics. In Proc. SIGCHI Conference on Human Factors in Computing [32] J. Hilton, N. Cammarata, S. Carter, G. Goh, and C. Olah. Understanding
Systems (CHI), pp. 3670–3682, 2016. rl vision. Distill, 5(11):e29, 2020.
[8] B. Bach, N. H. Riche, S. Carpendale, and H. Pfister. The emerging genre [33] U. Hinrichs, H. Schmidt, and S. Carpendale. EMDialog: Bringing infor-
of data comics. IEEE Computer Graphics and Applications, 37(3):6–13, mation visualization into the museum. IEEE Transactions on Visualization
2017. and Computer Graphics, 14(6):1181–1188, 2008.
[9] B. Bach, D. Stefaner, J. Boy, S. Drucker, L. Bartram, J. Wood, P. Ciuc- [34] F. Hohman, M. Conlen, J. Heer, and D. H. P. Chau. Communicating with
carelli, Y. Engelhardt, U. Koeppen, and B. Tversky. Narrative design interactive articles. Distill, 5(9), 2020.
patterns for data-driven storytelling. In Data-Driven Storytelling, pp. [35] D. Kang, T. Ho, N. Marquardt, B. Mutlu, and A. Bianchi. Toonnote: Im-
107–133. CRC Press, 2018. proving communication in computational notebooks using interactive data
[10] B. Bach, Z. Wang, M. Farinella, D. Murray-Rust, and N. Henry Riche. comics. In Proc. SIGCHI Conference on Human Factors in Computing
Design patterns for data comics. In Proc. SIGCHI Conference on Human Systems (CHI), pp. 1–14, 2021.
Factors in Computing Systems (CHI), pp. 1–12, 2018. [36] N. W. Kim, N. Henry Riche, B. Bach, G. Xu, M. Brehmer, K. Hinckley,
[11] B. Bach, Z. Wang, N. H. Riche, and S. Carpendale. Data comics collection. M. Pahud, H. Xia, M. J. McGuffin, and H. Pfister. Datatoon: Drawing
https://datacomics.github.io. dynamic network comics with pen+ touch interaction. In Proc. SIGCHI
[12] S. K. Badam, Z. Liu, and N. Elmqvist. Elastic documents: Coupling Conference on Human Factors in Computing Systems (CHI), pp. 1–12,
text and tables through contextual visualizations for enhanced document 2019.
reading. IEEE Transactions on Visualization and Computer Graphics, [37] N. W. Kim, E. Schweickart, Z. Liu, M. Dontcheva, W. Li, J. Popovic,
25(1):661–671, 2018. and H. Pfister. Data-driven guides: Supporting expressive design for
[13] A. Bigelow, S. Drucker, D. Fisher, and M. Meyer. Iterating between tools information graphics. IEEE Transactions on Visualization and Computer
to create and edit visualizations. IEEE Transactions on Visualization and Graphics, 23(1):491–500, 2016.
Computer Graphics, 23(1):481–490, 2016. [38] Y.-S. Kim, K. Reinecke, and J. Hullman. Explaining the gap: Visualizing
[14] J. Boy, L. Eveillard, F. Detienne, and J.-D. Fekete. Suggested interactiv- one’s predictions improves recall and comprehension of data. In Proc.
ity: Seeking perceived affordances for information visualization. IEEE SIGCHI Conference on Human Factors in Computing Systems (CHI), pp.
Transactions on Visualization and Computer Graphics, 22(1):639–648, 1375–1386, 2017.
2015. [39] S. Lau and P. J. Guo. Data Theater: A live programming environment
[15] S. Cagle. Humans have made 8.3bn tons of plastic since for prototyping data-driven explorable explanations. In Workshop on Live
1950. https://www.theguardian.com/us-news/2019/jun/23/ Programming (LIVE), 2020.
all-the-plastic-ever-made-study-comic, 2019. [40] F. Lekschas, X. Zhou, W. Chen, N. Gehlenborg, B. Bach, and H. Pfister. A
[16] Y. Cao, A. B. Chan, and R. W. Lau. Automatic stylistic manga layout. generic framework and library for exploration of small multiples through
ACM Transactions on Graphics (TOG), 31(6):1–10, 2012. interactive piling. IEEE Transactions on Visualization and Computer
[17] M. Card. Readings in information visualization: using vision to think. Graphics, 2020.
Morgan Kaufmann, 1999. [41] Z. Liu, J. Thompson, A. Wilson, M. Dontcheva, J. Delorey, S. Grigg,
[18] B.-W. Chang, J. Mackinlay, and P. T. Zellweger. Fluidly revealing informa- B. Kerr, and J. Stasko. Data Illustrator: Augmenting vector design tools
tion in fluid documents. In Proc. Smart Graphics AAAI Spring Symposium, with lazy data binding for expressive visualization authoring. In Proc.
2000. SIGCHI Conference on Human Factors in Computing Systems (CHI), pp.
[19] B. Chen, R. Jablonsky, J. B. Margines, R. Gupta, and S. Thakkar. Comic 1–13, 2018.
circuit: an online community for the creation and consumption of news [42] M. Mauri, T. Elli, G. Caviglia, G. Uboldi, and M. Azzi. Rawgraphs: a
comics. In CHI’13 Extended Abstracts on Human Factors in Computing visualisation platform to create open outputs. In Conference on Italian
Systems, pp. 2561–2566. 2013. SIGCHI Chapter, pp. 1–5, 2017.
[20] F. Chevalier, R. Vuillemot, and G. Gali. Using concrete scales: A practical [43] S. McCloud. Reinventing comics: How imagination and technology are
framework for effective visual depiction of complex measures. IEEE revolutionizing an art form. Harper Collins, 2000.
Transactions on Visualization and Computer Graphics, 19(12):2426–2435, [44] S. McCloud and A. Manning. Understanding comics: The invisible art.
2013. IEEE Transactions on Professional Communications, 41(1):66–69, 1998.
[21] N. Cohn. The Visual Language of Comics: Introduction to the Structure [45] S. McKenna, N. Henry Riche, B. Lee, J. Boy, and M. Meyer. Visual
and Cognition of Sequential Images. A&C Black, 2013. narrative flow: Exploring factors shaping data visualization story reading
[22] M. Conlen and J. Heer. Idyll: A markup language for authoring and experiences. In Computer Graphics Forum, vol. 36, pp. 377–387, 2017.
publishing interactive articles on the web. In Proc. ACM Symposium on [46] R2D3. A visual introduction to machine learning. http://www.r2d3.
User Interface Software and Technology (UIST), pp. 977–989, 2018. us/visual-intro-to-machine-learning-part-1/, 2015.
[23] A. Cox. How editing and design changes news graphics. In IEEE Con- [47] D. Ren, M. Brehmer, B. Lee, T. Höllerer, and E. K. Choe. Chartaccent:
ference on Visual Analytics Science and Technology (VAST), pp. xiii–xiii, Annotation for data-driven storytelling. In Proc. IEEE Pacific Visualization
2011. Symposium (PacificVis), pp. 230–239, 2017.
[24] E. S. De Lima, B. Feijó, A. L. Furtado, S. D. J. Barbosa, C. T. Pozzer, and [48] D. Ren, B. Lee, and M. Brehmer. Charticulator: Interactive construction of
A. E. Ciarlini. Non-branching interactive comics. In Proc. Conference on bespoke chart layouts. IEEE Transactions on Visualization and Computer
Advances in Computer Entertainment Technology, pp. 230–245. Springer, Graphics, 25(1):789–799, 2018.
2013. [49] N. H. Riche, C. Hurter, N. Diakopoulos, and S. Carpendale. Data-driven
 storytelling. CRC Press, 2018. In Proc. SIGCHI Conference on Human Factors in Computing Systems
[50] H. Romat, N. Henry Riche, C. Hurter, S. Drucker, F. Amini, and K. Hinck- (CHI), pp. 1–13, 2020.
ley. Dear pictograph: Investigating the role of personalization and im- [73] J. Zhao, S. Xu, S. Chandrasegaran, C. Bryan, F. Du, A. Mishra, X. Qian,
mersion for consuming and enjoying visualizations. In Proc. SIGCHI Y. Li, and K.-L. Ma. Chartstory: Automated partitioning, layout,
Conference on Human Factors in Computing Systems (CHI), pp. 1–13, and captioning of charts into comic-style narratives. arXiv preprint
2020. arXiv:2103.03996, 2021.
[51] A. Satyanarayan and J. Heer. Authoring narrative visualizations with [74] Z. Zhao, R. Marr, and N. Elmqvist. Data comics : Sequential art for
ellipsis. In Computer Graphics Forum, vol. 33, pp. 361–370, 2014. data-driven storytelling. Technical report, University of Maryland, 2015.
[52] A. Satyanarayan, D. Moritz, K. Wongsuphasawat, and J. Heer. Vega-lite: [75] Q. Zhi, A. Ottley, and R. Metoyer. Linking and layout: Exploring the
A grammar of interactive graphics. IEEE Transactions on Visualization integration of text and visualization in storytelling. In Computer Graphics
and Computer Graphics, 23(1):341–350, 2016. Forum, vol. 38, pp. 675–685, 2019.
[53] E. Segel and J. Heer. Narrative visualization: Telling stories with data.
IEEE Transactions on Visualization and Computer Graphics, 16(6):1139– C ATALOG OF INTERACTIVE COMICS
1148, 2010. [E1] N. Case. How to Remember Everything Forever-ish. 2018. https:
[54] C. Stolper, B. Lee, N. Henry Riche, J. Stasko, C. Hurter, N. Diakopoulos, //ncase.me/remember/
and S. Carpendale. Data-driven storytelling techniques: Analysis of a [E2] R. Chang. What the Blob. Undated. https://rosalind-chang.
curated collection of visual stories. Data-Driven Storytelling, pp. 85–105, myportfolio.com/what-the-blob
2018. [E3] M. Cisneros. Is That True?. 2017. https://public.tableau.com/
[55] N. Sultanum, F. Chevalier, Z. Bylinkskii, and Z. Liu. Leveraging text-chart profile/mikevizneros#!/vizhome/IsThatRight/IsThatTrue
links to support authoring of data-driven articles with vizflow. In Proc.
[E4] Gramener. Yikes! 6ft please. Undated. https://gramener.com/
SIGCHI Conference on Human Factors in Computing Systems (CHI), p.
nyc311/
In press., 2021.
[E5] Goodboy Digital. Tell me your secrets. https://www.
[56] The New York Times. You draw it: How family income predicts children’s
goodboydigital.com/case-study/tell-me-your-secrets
college chances. https://www.nytimes.com/interactive/2015/
[E6] M. Huynh. The boat. Undated. https://www.sbs.com.au/theboat/
05/28/upshot/you-draw-it-how-family-income-affects-
[E7] M. Kühni. CLAMS II. Undated. https://abwaesser.net/comic/
childrens-college-chances.html, 2015.
clams-ii/#drop
[57] The New York Times. You draw it: Just how bad is the drug overdose
[E8] M. Kühni. Coming of age. Undated. https://abwaesser.net/
epidemic. https://www.nytimes.com/interactive/2017/04/14/
comic/coming-of-age/
upshot/drug-overdose-epidemic-you-draw-it.html, 2017.
[E9] M. Kühni. Heidi. Undated. https://abwaesser.net/comic/heidi/
[58] The Washington Post. Why outbreaks like coronavirus spread exponen-
tially, and how to ‘flatten the curve’. https://www.washingtonpost. [E10] M. Kühni. New speak. Undated. https://abwaesser.net/comic/
com/graphics/2020/world/corona-simulator/, 2020. new-speak/#
[59] A. Thudt, U. Hinrichs, and S. Carpendale. The bohemian bookshelf [E11] M. Kühni. Visiting the aquarium. Undated. https://abwaesser.net/
supporting serendipitous discoveries through visualization. Technical comic/visiting-the-aquarium/
report, University of Calgary, 2011. [E12] Loveshack Entertainment. FRAMED Collection. 2018. http://
[60] H. Tobita. Digestmanga: interactive movie summarizing through comic framed-game.com/
visualization. In CHI’10 Extended Abstracts on Human Factors in Com- [E13] D. Merlin Goodbrey. A Duck Has An Adventure. 2012. https://www.
puting Systems, pp. 3751–3756. 2010. youtube.com/watch?v=YBRhf2jMHvM
[61] H. Tobita. Comic-crowd: interactive comic creation that supports multiple [E14] D. Merlin Goodbrey. Hidden factions. 2000. http://e-merl.com/
storylines, visualizations, and platforms. In Proc. Conference on Mobile hyper/hapf/hf1.htm
and Ubiquitous Multimedia, pp. 163–172, 2015. [E15] D. Merlin Goodbrey. Icarus Need. 2012. https://www.youtube.com/
[62] H. Tobita and K. Shibasaki. Enformanga: Interactive comic creation using watch?v=tuzaKLowWTA
drag-and-drop and deformation. In Proc. IEEE International Symposium [E16] D. Merlin Goodbrey. The Empty Kingdom. 2014. https://www.
on Multimedia, pp. 269–274, 2009. youtube.com/watch?v=9vKuLap55CM
[63] S. Uchihashi, J. Foote, A. Girgensohn, and J. Boreczky. Video manga: [E17] S. McCloud. The Right Number. 2003. http://www.scottmccloud.
generating semantically meaningful video summaries. In Proc. ACM com/1-webcomics/trn-intro/index.html
Conference on Multimedia, pp. 383–392, 1999. [E18] R. McGuire. HERE. Undated. https://screendiver.com/
[64] B. Victor. Explorable explanations. http://worrydream.com/ directory/here-by-richard-mcguire/
ExplorableExplanations/, 2011. [E19] Monde Binaire. Hello World !!!. 2012. https://transmii.com/
[65] B. Victor. Tangle: explorable explanations made easy. http:// project/monde-binaire/
worrydream.com/Tangle, 2013. [E20] C. Muckenhoupt. Interactive comic prototype. https://muckenhoupt.
[66] Z. Wang, H. Dingwall, and B. Bach. Teaching data visualization and itch.io/interactive-comics-prototype
storytelling with data comic workshops. In CHI’19 Extended Abstracts on [E21] R. Munroe. xkcd: Click and Drag. https://xkcd.com/1110/
Human Factors in Computing Systems, pp. 1–9, 2019. [E22] R. Munroe. xkcd: Lorentz https://xkcd.com/1350/
[67] Z. Wang, J. Ritchie, J. Zhou, F. Chevalier, and B. Bach. Data comics for [E23] R. Munroe. xkcd: Throw calculator. https://xkcd.com/2198/
reporting controlled user studies in human-computer interaction. IEEE [E24] R. Munroe. xkcd: xkcloud https://xkcd.com/1506/
Transactions on Visualization and Computer Graphics, 2020. [E25] R. Munroe. xkcd: Zach Weiner (SMBC) https://xkcd.com/826/
[68] Z. Wang, L. Sundin, D. Murray-Rust, and B. Bach. Cheat sheets for data [E26] Netwars. The Butterfly Attack. 2014. http://www.netwars-project.
visualization techniques. In Proc. SIGCHI Conference on Human Factors com/novels/graphic-novel
in Computing Systems (CHI), pp. 1–13, 2020. [E27] PLASTIEK. RRR2. 2018. http://plastiek.com/RRR-2/RRR-2.
[69] Z. Wang, S. Wang, M. Farinella, D. Murray-Rust, N. Henry Riche, and html
B. Bach. Comparing effectiveness and engagement of data comics and in- [E28] J. Shiga. How To Make Your Own Interactive Comic. 2010. https:
fographics. In Proc. SIGCHI Conference on Human Factors in Computing //www.youtube.com/watch?v=A9Er7kmcPcI
Systems (CHI), p. 1–12, 2019. [E29] J. Shiga. Numberphile. Paper Caluculator. 2016. https://www.
[70] M. Wattenberg. Baby names, visualization, and social data analysis. youtube.com/watch?v=siawhQBRC8I
In Proceedings of the IEEE Symposium on Information Visualization [E30] J. Shiga. Meanwhile. https://www.zarfhome.com/meanwhile/
(Infovis’05)., pp. 1–7, 2005. [E31] Sutu et al. Modern Polaxix. 2014. https://screendiver.com/
[71] H. Xia, N. Henry Riche, F. Chevalier, B. De Araujo, and D. Wigdor. directory/modern-polaxis/
DataInk: Direct and creative data-oriented drawing. In Proc. SIGCHI [E32] Transmı̈i Studio. Memory Catcher. 2014. https://screendiver.com/
Conference on Human Factors in Computing Systems (CHI), pp. 1–13, directory/memory-catcher/
2018. [E33] Turbomedia. Coup de Pompe. Undated. https://turbointeractive.
[72] J. E. Zhang, N. Sultanum, A. Bezerianos, and F. Chevalier. DataQuilt: fr/coup-de-pompe/
Extracting visual elements from images to craft pictorial visualizations.