skip to main content
10.1145/3411764.3445354acmconferencesArticle/Chapter ViewAbstractPublication PageschiConference Proceedingsconference-collections
research-article

Leveraging Text-Chart Links to Support Authoring of Data-Driven Articles with VizFlow

Published: 07 May 2021 Publication History

Abstract

Data-driven articles—i.e., articles featuring text and supporting charts—play a key role in communicating information to the public. New storytelling formats like scrollytelling apply compelling dynamics to these articles to help walk readers through complex insights, but are challenging to craft. In this work, we investigate ways to support authors of data-driven articles using such storytelling forms via a text-chart linking strategy. From formative interviews with 6 authors and an assessment of 43 scrollytelling stories, we built VizFlow, a prototype system that uses text-chart links to support a range of dynamic layouts. We validate our text-chart linking approach via an authoring study with 12 participants using VizFlow, and a reading study with 24 participants comparing versions of the same article with different VizFlow intervention levels. Assessments showed our approach enabled a rapid and expressive authoring experience, and informed key design recommendations for future efforts in the space.

Supplementary Material

VTT File (3411764.3445354_videofigurecaptions.vtt)
VTT File (3411764.3445354_videopreviewcaptions.vtt)
MP4 File (3411764.3445354_videofigure.mp4)
Supplemental video
MP4 File (3411764.3445354_videopreview.mp4)
Preview video

References

[1]
Adobe. 2020. Adobe Spark. https://spark.adobe.com/
[2]
Fereshteh Amini, Nathalie Henry Riche, Bongshin Lee, Andres Monroy-Hernandez, and Pourang Irani. 2016. Authoring data-driven videos with dataclips. IEEE transactions on visualization and computer graphics 23, 1(2016), 501–510.
[3]
Benjamin Bach, D Stefaner, Jeremy Boy, Steven Drucker, Lyn Bartram, Jo Wood, Paolo Ciuccarelli, Yuri Engelhardt, Ulrike Koeppen, and Barbara Tversky. 2018. Narrative design patterns for data-driven storytelling. In Data-Driven Storytelling. CRC Press, Boca Raton, FL, USA, 107–133.
[4]
Sriram Karthik Badam, Zhicheng Liu, and Niklas Elmqvist. 2018. Elastic documents: Coupling text and tables through contextual visualizations for enhanced document reading. IEEE transactions on visualization and computer graphics 25, 1(2018), 661–671.
[5]
Oswald Barral, Sébastien Lallé, Grigorii Guz, Alireza Iranpour, and Cristina Conati. 2020. Eye-Tracking to Predict User Cognitive Abilities and Performance for User-Adaptive Narrative Visualizations. In Proceedings of the 2020 International Conference on Multimodal Interaction. ACM, Utrecht, Netherlands, 163–173.
[6]
Leilani Battle, Peitong Duan, Zachery Miranda, Dana Mukusheva, Remco Chang, and Michael Stonebraker. 2018. Beagle: Automated extraction and interpretation of visualizations from the web. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems. ACM, Montreal, Canada, 1–8.
[7]
Mike Bostock. 2014. How to Scroll. https://bost.ocks.org/mike/scroll/
[8]
John Brooke. 1996. Usability evaluation in industry. CRC press, Boca Raton, FL, USA, Chapter SUS: a “quick and dirty” usability scale, 189.
[9]
Ritwick Chaudhry, Sumit Shekhar, Utkarsh Gupta, Pranav Maneriker, Prann Bansal, and Ajay Joshi. 2020. LEAF-QA: Locate, encode & attend for figure question answering. In The IEEE Winter Conference on Applications of Computer Vision. IEEE, Aspen, CO, USA, 3512–3521.
[10]
Siming Chen, Jie Li, Gennady Andrienko, Natalia Andrienko, Yun Wang, Phong H Nguyen, and Cagatay Turkay. 2018. Supporting story synthesis: Bridging the gap between visual analytics and storytelling. IEEE transactions on visualization and computer graphics 26, 7(2018), 2499–2516.
[11]
Fanny Chevalier, Melanie Tory, Bongshin Lee, Jarke van Wijk, Giuseppe Santucci, Marian Dörk, and Jessica Hullman. 2018. From Analysis to Communication: Supporting the Lifecycle of a Story. In Data-Driven Storytelling. AK Peters/CRC Press, Boca Raton, FL, USA, 169–202.
[12]
Matthew Conlen and Jeffrey Heer. 2018. Idyll: A markup language for authoring and publishing interactive articles on the web. In Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. ACM, Berlin, Germany, 977–989.
[13]
Pierre Dragicevic, Yvonne Jansen, Abhraneel Sarma, Matthew Kay, and Fanny Chevalier. 2019. Increasing the transparency of research papers with explorable multiverse analyses. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems. ACM, Glasgow, Scotland, UK, 1–15.
[14]
Ryan Eccles, Thomas Kapler, Robert Harper, and William Wright. 2008. Stories in geotime. Information Visualization 7, 1 (2008), 3–17.
[15]
Honkytonk Films. 2020. Klynt. http://www.klynt.net/
[16]
Mario Garcia. 2019. The Story. Thane & Prose, New York, NY, USA.
[17]
Esther Greussing and Hajo G Boomgaarden. 2019. Simply bells and whistles? Cognitive effects of visual aesthetics in digital longforms. Digital Journalism 7, 2 (2019), 273–293.
[18]
Kaiming He, Georgia Gkioxari, Piotr Dollár, and Ross Girshick. 2017. Mask r-cnn. In Proceedings of the IEEE international conference on computer vision. IEEE, New York, NY, USA, 2961–2969.
[19]
Jane Hoffswell, Wilmot Li, and Zhicheng Liu. 2020. Techniques for Flexible Responsive Visualization Design. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems. ACM, New York, NY, USA, 1–13.
[20]
Fred Hohman, Matthew Conlen, Jeffrey Heer, and Duen Horng Polo Chau. 2020. Communicating with Interactive Articles. Distill 5, 9 (2020), e28. https://distill.pub/2020/communicating-with-interactive-articles/
[21]
Observable HQ. 2020. Observable. https://observablehq.com/
[22]
Dae Hyun Kim, Enamul Hoque, Juho Kim, and Maneesh Agrawala. 2018. Facilitating document reading by linking text and tables. In Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. ACM, Berlin, Germany, 423–434.
[23]
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. ACM, Glasgow, Scotland, UK, 1–12.
[24]
Ha-Kyung Kong, Zhicheng Liu, and Karrie Karahalios. 2017. Internal and external visual cue preferences for visualizations in presentations. Computer Graphics Forum 36, 3 (2017), 515–525.
[25]
Nicholas Kong, Marti A Hearst, and Maneesh Agrawala. 2014. Extracting references between text and charts via crowdsourcing. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems. ACM, Toronto, Canada, 31–40.
[26]
Robert Kosara. 2016. The scrollytelling scourge. https://eagereyes.org/blog/2016/the-scrollytelling-scourge
[27]
Sébastien Lallé, Dereck Toker, and Cristina Conati. 2019. Gaze-Driven Adaptive Interventions for Magazine-Style Narrative Visualizations. IEEE Transactions on Visualization and Computer Graphics 1, 1(2019), 1–10.
[28]
Sébastien Lallé, Tiffany Wu, and Cristina Conati. 2020. Gaze-Driven Links for Magazine Style Narrative Visualizations. In 2020 IEEE Visualization Conference (VIS). IEEE, Salt Lake City, UT, USA, 1–4.
[29]
Shahid Latif, Diao Liu, and Fabian Beck. 2018. Exploring Interactive Linking Between Text and Visualization. In EuroVis (Short Papers). IEEE, Brno, Czech Republic, 91–94.
[30]
Shahid Latif, Kaidie Su, and Fabian Beck. 2019. Authoring Combined Textual and Visual Descriptions of Graph Data. In Proc. Eurographics Conf. Visualization. IEEE, Porto, Portugal, 1–5.
[31]
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.
[32]
Zhicheng Liu, John Thompson, Alan Wilson, Mira Dontcheva, James Delorey, Sam Grigg, Bernard Kerr, and John Stasko. 2018. Data Illustrator: Augmenting vector design tools with lazy data binding for expressive visualization authoring. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems. ACM, Montreal, Canada, 1–13.
[33]
Sean McKenna, N Henry Riche, Bongshin Lee, Jeremy Boy, and Miriah Meyer. 2017. Visual narrative flow: Exploring factors shaping data visualization story reading experiences. Computer Graphics Forum 36, 3 (2017), 377–387.
[34]
Honghui Mei, Yuxin Ma, Yating Wei, and Wei Chen. 2018. The design space of construction tools for information visualization: A survey. Journal of Visual Languages & Computing 44 (2018), 120–132.
[35]
Ronald Metoyer, Qiyu Zhi, Bart Janczuk, and Walter Scheirer. 2018. Coupling story to visualization: Using textual analysis as a bridge between data and interpretation. In 23rd International Conference on Intelligent User Interfaces. ACM, Tokyo, Japan, 503–507.
[36]
Jorge Poco and Jeffrey Heer. 2017. Reverse-engineering visualizations: Recovering visual encodings from chart images. Computer Graphics Forum 36, 3 (2017), 353–363.
[37]
Arvind Satyanarayan and Jeffrey Heer. 2014. Authoring narrative visualizations with ellipsis. Computer Graphics Forum 33, 3 (2014), 361–370.
[38]
Arvind Satyanarayan, Bongshin Lee, Donghao Ren, Jeffrey Heer, John Stasko, John Thompson, Matthew Brehmer, and Zhicheng Liu. 2019. Critical reflections on visualization authoring systems. IEEE transactions on visualization and computer graphics 26, 1(2019), 461–471.
[39]
Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, and Jeffrey Heer. 2017. Vega-Lite: A Grammar of Interactive Graphics. IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis) 23, 1(2017), 341–350. http://idl.cs.washington.edu/papers/vega-lite
[40]
Manolis Savva, Nicholas Kong, Arti Chhajta, Li Fei-Fei, Maneesh Agrawala, and Jeffrey Heer. 2011. Revision: Automated classification, analysis and redesign of chart images. In Proceedings of the 24th annual ACM symposium on User interface software and technology. ACM, Santa Barbara, CA, USA, 393–402.
[41]
Edward Segel and Jeffrey Heer. 2010. Narrative visualization: Telling stories with data. IEEE transactions on visualization and computer graphics 16, 6(2010), 1139–1148.
[42]
Doris Seyser and Michael Zeiller. 2018. Scrollytelling–an analysis of visual storytelling in online journalism. In 2018 22nd International Conference Information Visualisation (IV). IEEE, Fisciano, Italy, 401–406.
[43]
Bill Shander. 2020. The Past, Present, and Future of Scrollytelling. https://medium.com/nightingale/the-past-present-and-future-of-scrollytelling-10dd37dc1003
[44]
Ben Shneiderman. 2007. Creativity support tools: Accelerating discovery and innovation. Commun. ACM 50, 12 (2007), 20–32.
[45]
Shorthand. 2020. Shorthand, a digital storytelling platform. https://shorthand.com/
[46]
Waralak V Siricharoen. 2013. Infographics: the new communication tools in digital age. In The international conference on e-technologies and business on the web (ebw2013). IEEE, Bangkok, Thailand, 169–174.
[47]
Codevise Solutions. 2020. Pageflow: Interactive multimedia storytelling with ease. https://www.pageflow.io/
[48]
Florian Stalph. 2018. Classifying Data Journalism: A content analysis of daily data-driven stories. Journalism Practice 12, 10 (2018), 1332–1350.
[49]
Markus Steinberger, Manuela Waldner, Marc Streit, Alexander Lex, and Dieter Schmalstieg. 2011. Context-preserving visual links. IEEE Transactions on Visualization and Computer Graphics 17, 12(2011), 2249–2258.
[50]
Charles D. Stolper, Bongshin Lee, N. Henry Riche, and John Stasko. 2016. Emerging and recurring data-driven storytelling techniques: Analysis of a curated collection of recent stories. Technical Report. Microsoft Research, Washington, USA.
[51]
Tableau. 2020. Stories. https://help.tableau.com/current/pro/desktop/en-us/stories.htm
[52]
Tableau. 2020. Tableau. https://www.tableau.com/
[53]
Dereck Toker, Cristina Conati, and Giuseppe Carenini. 2018. User-adaptive support for processing magazine style narrative visualizations: Identifying user characteristics that matter. In 23rd International Conference on Intelligent User Interfaces. ACM, Tokyo, Japan, 199–204.
[54]
Chao Tong, Richard Roberts, Rita Borgo, Sean Walton, Robert S Laramee, Kodzo Wegba, Aidong Lu, Yun Wang, Huamin Qu, Qiong Luo, 2018. Storytelling and visualization: An extended survey. Information 9, 3 (2018), 65.
[55]
Archie Tse. 2016. Why we are doing fewer interactives. https://github.com/archietse/malofiej-2016/blob/master/tse-malofiej-2016-slides.pdf
[56]
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. ACM, Montreal, Canada, 1–13.
[57]
Qiyu Zhi, Alvitta Ottley, and Ronald Metoyer. 2019. Linking and Layout: Exploring the Integration of Text and Visualization in Storytelling. Computer Graphics Forum 38, 3 (2019), 675–685.

Cited By

View all
  • (2024)A Design Language for Prototyping and Storyboarding Data-Driven StoriesApplied Sciences10.3390/app1404138714:4(1387)Online publication date: 8-Feb-2024
  • (2024)Where Are We So Far? Understanding Data Storytelling Tools from the Perspective of Human-AI CollaborationProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642726(1-19)Online publication date: 11-May-2024
  • (2024)Epigraphics: Message-Driven Infographics AuthoringProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642172(1-18)Online publication date: 11-May-2024
  • Show More Cited By

Index Terms

  1. Leveraging Text-Chart Links to Support Authoring of Data-Driven Articles with VizFlow
    Index terms have been assigned to the content through auto-classification.

    Recommendations

    Comments

    Information & Contributors

    Information

    Published In

    cover image ACM Conferences
    CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems
    May 2021
    10862 pages
    ISBN:9781450380966
    DOI:10.1145/3411764
    Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].

    Sponsors

    Publisher

    Association for Computing Machinery

    New York, NY, United States

    Publication History

    Published: 07 May 2021

    Permissions

    Request permissions for this article.

    Check for updates

    Author Tags

    1. Data Stories
    2. Data-Driven Articles
    3. Scrollytelling
    4. Text-Chart Links

    Qualifiers

    • Research-article
    • Research
    • Refereed limited

    Conference

    CHI '21
    Sponsor:

    Acceptance Rates

    Overall Acceptance Rate 6,199 of 26,314 submissions, 24%

    Upcoming Conference

    CHI 2025
    ACM CHI Conference on Human Factors in Computing Systems
    April 26 - May 1, 2025
    Yokohama , Japan

    Contributors

    Other Metrics

    Bibliometrics & Citations

    Bibliometrics

    Article Metrics

    • Downloads (Last 12 months)226
    • Downloads (Last 6 weeks)16
    Reflects downloads up to 16 Feb 2025

    Other Metrics

    Citations

    Cited By

    View all
    • (2024)A Design Language for Prototyping and Storyboarding Data-Driven StoriesApplied Sciences10.3390/app1404138714:4(1387)Online publication date: 8-Feb-2024
    • (2024)Where Are We So Far? Understanding Data Storytelling Tools from the Perspective of Human-AI CollaborationProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642726(1-19)Online publication date: 11-May-2024
    • (2024)Epigraphics: Message-Driven Infographics AuthoringProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642172(1-18)Online publication date: 11-May-2024
    • (2024)Design Patterns for Data-Driven News ArticlesProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3641916(1-16)Online publication date: 11-May-2024
    • (2024)Dash: A Bimodal Data Exploration Tool for Interactive Text and Visualizations2024 IEEE Visualization and Visual Analytics (VIS)10.1109/VIS55277.2024.00059(256-260)Online publication date: 13-Oct-2024
    • (2024)From Instruction to Insight: Exploring the Functional and Semantic Roles of Text in Interactive DashboardsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345660131:1(382-392)Online publication date: 10-Sep-2024
    • (2024)Struggles and Strategies in Understanding Information VisualizationsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.338856030:6(3035-3048)Online publication date: 15-Apr-2024
    • (2024)How Does Automation Shape the Process of Narrative Visualization: A Survey of ToolsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2023.326132030:8(4429-4448)Online publication date: Aug-2024
    • (2024)Are Claims Grounded in Data? An Empowering Linking Approach for Misalignment Identification in Online Data-Driven DiscussionsIEEE Access10.1109/ACCESS.2024.351103912(182045-182061)Online publication date: 2024
    • (2023)Living Papers: A Language Toolkit for Augmented Scholarly CommunicationProceedings of the 36th Annual ACM Symposium on User Interface Software and Technology10.1145/3586183.3606791(1-13)Online publication date: 29-Oct-2023
    • Show More Cited By

    View Options

    Login options

    View options

    PDF

    View or Download as a PDF file.

    PDF

    eReader

    View online with eReader.

    eReader

    HTML Format

    View this article in HTML Format.

    HTML Format

    Figures

    Tables

    Media

    Share

    Share

    Share this Publication link

    Share on social media