[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-565333-105":53,"doc-detail-565333-en":127},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":120,"head_meta":122,"extra_data":124,"updated_unix":126},105,"en","wonderflow-narration-centric-design-of-animated-data-videos","WonderFlow - Narration-Centric Design of Animated Data Videos","","Creating animated data videos with audio narration requires extensive expertise and time, spanning complex animation design, conversion of scripts into speech, and precise synchronization between visuals and narrations. WonderFlow is an interactive authoring tool for narration-centric design, letting authors link text to semantic chart elements and automatically generate narrations via text-to-speech while aligning them with animations. It also includes a structure-aware animation library and in-system preview and refinement, confirmed by evaluations to simplify narration-animation interplay.",{"@graph":63,"@context":119},[64,80,102],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":51,"@type":70,"position":76},"https://docshare.wps.com/template/general/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/wonderflow-narration-centric-design-of-animated-data-videos/565333/",4,{"url":78,"name":59,"@type":81,"image":82,"author":87,"headline":59,"publisher":90,"fileFormat":93,"inLanguage":57,"description":61,"dateModified":94,"datePublished":95,"encodingFormat":93,"isAccessibleForFree":96,"interactionStatistic":97},"DigitalDocument",{"url":83,"@type":84,"width":85,"height":86},"https://docshare.wps.com/thumbnails/wonderflow-narration-centric-design-of-animated-data-videos/565333.png","ImageObject",442,249,{"name":88,"@type":89},"jay","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-11-01","2026-10-13",true,{"@type":98,"interactionType":99,"userInteractionCount":101},"InteractionCounter",{"@type":100},"ViewAction",6,{"@type":103,"mainEntity":104},"FAQPage",[105,111,115],{"name":106,"@type":107,"acceptedAnswer":108},"What problem does WonderFlow target in creating animated data videos?","Question",{"text":109,"@type":110},"It targets the complexity of coordinating animation design with audio narration, which usually requires expertise and separate tools and slows iterative creation.","Answer",{"name":112,"@type":107,"acceptedAnswer":113},"How does WonderFlow generate and align narration with animations?",{"text":114,"@type":110},"Authors specify semantic links between text and chart elements, then WonderFlow uses text-to-speech to generate narration and aligns it with the animation timeline.",{"name":116,"@type":107,"acceptedAnswer":117},"What features help authors create chart animations more efficiently?",{"text":118,"@type":110},"WonderFlow provides a structure-aware animation library that eases chart animation creation by enabling pre-designed effects for common visualization components.","https://schema.org",{"og:url":78,"og:type":121,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":123,"canonical":78},"index,follow",{"doc_id":125,"site_id":56},565333,1792294804,{"code":4,"msg":5,"data":128},{"doc_id":125,"user_id":129,"nickname":88,"user_avatar":130,"doc_module":9,"category_id":50,"category_name":51,"doc_title":59,"doc_description":61,"doc_content":131,"file_id":132,"file_url":133,"file_type":134,"file_size":135,"view_count":101,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":35,"language":136,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":137,"faqs":138,"seo_title":139,"seo_description":61,"update_tm":140,"read_time":101},3985747858866,"https://ap-avatar.wpscdn.com/davatar_a8503ba1806abce46bf441b54a3ca4cd","IEEE TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS, VOL. XX, NO. X, XX 2024 1  \nWonderFlow: Narration-Centric Design of Animated Data Videos  \nYun Wang* , Leixian Shen* , Zhengxin You , Xinhuan Shu  , Bongshin Lee , John Thompson , Haidong Zhang , and Dongmei Zhang   \nAbstract—Creating an animated data video with audio narration is a time-consuming and complex task that requires expertise. It involves designing complex animations, turning written scripts into audio narrations, and synchronizing visual changes with the narrations. This paper presents WonderFlow, an interactive authoring tool, that facilitates narration-centric design of animated data videos. WonderFlow allows authors to easily specify semantic links between text and the corresponding chart elements. Then it  \nautomatically generates audio narration by leveraging text-to-speech techniques and aligns the narration with an animation.  \nWonderFlow provides a structure-aware animation library designed to ease chart animation creation, enabling authors to apply pre-designed animation effects to common visualization components. Additionally, authors can preview and refine their data videos within the same system, without having to switch between different creation tools. A series of evaluation results confirmed that  \nWonderFlow is easy to use and simplifies the creation of data videos with narration-animation interplay.  \nIndex Terms—Data video, Data visualization, Narration-animation interplay, Storytelling, Authoring tool ~~ ~~ ✦ ~~ ~~  \n1 INTRODUCTION  \nDATA videos have gained increasing popularity in recent  \nyears, being widely used in digital journalism, knowledge sharing, business, etc. With data videos, data and numbers can be accurately described with charts and annotations [3], while insights and contexts behind the data are usually conveyed through voice narration [14] . Data video creators leverage animations to demonstrate the data characteristics and echo them with voice narrations to attract viewers’attention and enhance cognition and memorability [4] .  \nCreating a data video involves various tasks, such as organizing data insights, recording narration audio, designing animation effects, aligning visual effects with the audio narration, and etc. These tasks require not only significant amounts of time and effort, but also expertise in multiple fields—data analysis, animation design, and audio & video production—and professional tools [64]. Therefore, creating animated data videos enriched with audio narrations involves a complex workflow and is not accessible to people without the required expertise.  \nRecently, several research efforts have been devoted to easing the workflow of creating data-driven animations. Researchers have adopted animation templates [5], [47],  \n• Y. Wang, H. Zhang, D. Zhang are with Microsoft. E-mail:{wangyun, haizhang, [dongmeiz](dongmeiz}@microsoft.com)[}](dongmeiz}@microsoft.com)[@microsoft.com](dongmeiz}@microsoft.com).  \nY. Wang is the corresponding author.  \n• L. Shen is with The Hong Kong University of Science and Technology. E-mail: [lshenaj@connect.ust.hk](lshenaj@connect.ust.hk).  \n• Z. You is with The Hong Kong Polytechnic University. E-mail: [zhengxin.you@connect.polyu.hk](zhengxin.you@connect.polyu.hk).  \n• [X. Shu is with Newcastle University. E-mail: xinhuan.shu@gmail.com](X. Shu is with Newcastle University. E-mail: xinhuan.shu@gmail.com).  \n• B. Lee is with Yonsei University. E-mail: [b.lee@yonsei.ac.kr](b.lee@yonsei.ac.kr).  \n• [J. Thompson is with Autodesk. E-mail: john.roger.thompson@gmail.com](J. Thompson is with Autodesk. E-mail: john.roger.thompson@gmail.com).  \n• Work done during L. Shen and Z. You’s internship at Microsoft, and when  \nB. Lee and J. Thompson were with Microsoft Research.  \n• * These authors contributed equally to this work.  \nManuscript received XX XX, 2024; revised XX XX, 2024.  \ndeveloped declarative grammar [17] and visual specification [16], leveraged keyframes [58], [16], and","cbCaiu55adweF1cR","https://ap.wps.com/l/cbCaiu55adweF1cR","pdf",14469657,"English","# Abstract\n# 1 Introduction\n## Data videos and narration\n## Workflow challenges and tool limitations","[{\"question\":\"What problem does WonderFlow target in creating animated data videos?\",\"answer\":\"It targets the complexity of coordinating animation design with audio narration, which usually requires expertise and separate tools and slows iterative creation.\"},{\"question\":\"How does WonderFlow generate and align narration with animations?\",\"answer\":\"Authors specify semantic links between text and chart elements, then WonderFlow uses text-to-speech to generate narration and aligns it with the animation timeline.\"},{\"question\":\"What features help authors create chart animations more efficiently?\",\"answer\":\"WonderFlow provides a structure-aware animation library that eases chart animation creation by enabling pre-designed effects for common visualization components.\"}]","WonderFlow - Narration-Centric Design of Animated Data Videos | PDF",1791851432]