Interactive Data Comics

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, COMICSCRIPT, 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.

How Does Automation Shape the Process of Narrative Visualization: A Survey on Tools

“…After the design is completed, it is presented directly to the audience and readers do not need to interact with the narrative visualization. Meanwhile, it has been proved that when users interact with the visualization, they are more likely to remember the information [42], [90]. Therefore, in future research, the development of visualizations with interactive infographics and data comics can be explored to improve the exploration of user information by enhancing the interaction between the user and the work.…”

“…It also enables users to switch between the two view modes, thus solving the visual distraction caused by code and other unnecessary information. To enhance the user experience of data comics, Wang et al [90] proposed a lightweight declarative scripting language, Comic Script, to support users in personalizing their operations in static comics. This approach breaks away from the original model of only being able to create linear or immutable story narratives to enable nonlinear narratives for personalized layouts, exploring levels of detail, and other potential user experiences.…”

ScrollyVis: Interactive Visual Authoring of Guided Dynamic Narratives for Scientific Scrollytelling

“…In addition to narrative videos and text enriched with data visualization, interactive data comics are another approach for presenting scientific insights. Wang et al [49] presented a lightweight specification language entitled Comic Script to create interactive and dynamic data comics. The approach supports branching, change of perspective, and detailson-demand, as interaction methods for the viewer.…”

No Grammar to Rule Them All: A Survey of JSON-style DSLs for Visualization

“…While generic approaches could achieve similar ends, they would not match the expressivity found by localizing the syntax to the domain. ComicScript has limited support for data exploration but enables interactive data comics in a way that would otherwise be unmanageable [113]. As with DSLs in any domain, this may come at the cost of generality.…”

“…Cicero [47], ComicScript [113], CompassQL [119] D Data Theater [57], deck.gl/json [112], DGML [77], DotML [67], DXR [101] E ECharts [59], Encodable [117] F Flex-ER [66], Frappe [25], FusionCharts [27] G Gemini 1 [48], Gemini 2 [49], Genome Spy [58], gg [124], Glinda [17], Gosling [68], GoTree [60], GraphML [8], GXL [116] H Highcharts [37] I Ivy [73] J JSOL [126] K Kyrix-S [103] M Multiclass-Density-Maps [44] N NEO [32] P P4 [61], P5 [62], P6 [63], PapARVis [13], Plotly JSON [86] S Scholz 3D Vis Language [98], SetCoLa [38], Shih Volume Vis Language [100], StructGraphics [107], SVL [80] V Vega [96], Vega-Lite [95], VizGrammar [122], VizML [115], VizQL [33], VR-Viz [92], VRIA [10] X XML Charts [2] Z ZingChart [128]…”