An Interactive Data Visualisation Approach for Next...

11
An Interactive Data Visualisation Approach for Next Generation Presentation Tools Towards Rich Presentation-based Data Exploration and Storytelling Reinout Roels, Yves Baeten and Beat Signer Web & Information Systems Engineering Lab, Vrije Universiteit Brussel, Pleinlaan 2, 1050 Brussels, Belgium {rroels,bsigner}@vub.ac.be Keywords: Presentations, Slideware, Narrative Visualisation, Data Exploration Abstract: Existing research in the field of information visualisation has shown that interactive data exploration and storytelling can significantly improve the extraction and transfer of knowledge from raw data. Established visualisation techniques help viewers to strengthen their mental model and improve the understanding of the underlying data. However, these techniques are not yet manifested in slide decks created by existing pre- sentation tools which offer little to no support beyond static charts for transferring knowledge. Based on a detailed analysis of interactive and narrative data visualisation solutions and the shortcomings of existing presentation tools, we derived a set of requirements for interactive information visualisation in presentation tools. The presented prototype of a presentation tool for interactive data visualisation addresses these require- ments and has been implemented as a plug-in for the MindXpres presentation platform. Our approach for rich presentation-based data exploration and storytelling enables the presenter to predefine a series of interactive views as support for their oral narrative, but also allows them to freely explore the data during presentation time. 1 INTRODUCTION The field of information visualisation investigates graphical data representations that reinforce human cognition and help us in detecting causal relationships between data. Recent technological advances led to more dynamic and interactive information visualisa- tions. Current developments therefore emphasise on providing users more control over the visualisation process in order to enable the interactive exploration and discovery of meaningful relations between data points. Storytelling has shown to be an effective approach for sharing insights that have been acquired by study- ing specific data sets (Kosara and Mackinlay, 2013). Facts that are tied together as part of a story are easier to present as well as more memorable by the audi- ence. This is one of the reasons why we have seen the rise of so-called narrative visualisations or visual- isations that help us tell stories with data (Segel and Heer, 2010). For example, educational textbooks of- ten contain various charts and diagrams in order to support the message that the text is trying to convey. These narrative visualisations have been adapted to more recent media and are becoming increasingly dy- namic. For instance, news on the TV might use ani- mated graphs to show changes in oil prices or election results, whereas online news articles might be com- plemented by user-controllable interactive visualisa- tions. A common medium used for narrative visualisa- tions are the slide decks created by presentation tools such as PowerPoint. With over 30 million PowerPoint presentations created every day (Parker, 2001), we cannot deny the role that presentation tools play in knowledge transfer. These tools allow us to display content such as text, images or charts. Nevertheless, unlike other digital media, presentation tools do not exploit recent techniques for interactive information visualisation to their full potential. We have seen little evolution in the core ideologies of presentation tools which were originally designed for the production of physical photographic slides. For example, most slide decks are still linear sequences of spatially restricted slides with static content. However, from a techno- logical point of view, there is no reason why some of these limitations would still apply. Visualisation tech- niques such as zoomable user interfaces allow us to get rid of spatial boundaries. Furthermore, hardware such as tablets, smartphones or digital pens support

Transcript of An Interactive Data Visualisation Approach for Next...

Page 1: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

An Interactive Data Visualisation Approach forNext Generation Presentation Tools

Towards Rich Presentation-based Data Exploration and Storytelling

Reinout Roels, Yves Baeten and Beat SignerWeb & Information Systems Engineering Lab, Vrije Universiteit Brussel, Pleinlaan 2, 1050 Brussels, Belgium

{rroels,bsigner}@vub.ac.be

Keywords: Presentations, Slideware, Narrative Visualisation, Data Exploration

Abstract: Existing research in the field of information visualisation has shown that interactive data exploration andstorytelling can significantly improve the extraction and transfer of knowledge from raw data. Establishedvisualisation techniques help viewers to strengthen their mental model and improve the understanding of theunderlying data. However, these techniques are not yet manifested in slide decks created by existing pre-sentation tools which offer little to no support beyond static charts for transferring knowledge. Based ona detailed analysis of interactive and narrative data visualisation solutions and the shortcomings of existingpresentation tools, we derived a set of requirements for interactive information visualisation in presentationtools. The presented prototype of a presentation tool for interactive data visualisation addresses these require-ments and has been implemented as a plug-in for the MindXpres presentation platform. Our approach for richpresentation-based data exploration and storytelling enables the presenter to predefine a series of interactiveviews as support for their oral narrative, but also allows them to freely explore the data during presentationtime.

1 INTRODUCTION

The field of information visualisation investigatesgraphical data representations that reinforce humancognition and help us in detecting causal relationshipsbetween data. Recent technological advances led tomore dynamic and interactive information visualisa-tions. Current developments therefore emphasise onproviding users more control over the visualisationprocess in order to enable the interactive explorationand discovery of meaningful relations between datapoints.

Storytelling has shown to be an effective approachfor sharing insights that have been acquired by study-ing specific data sets (Kosara and Mackinlay, 2013).Facts that are tied together as part of a story are easierto present as well as more memorable by the audi-ence. This is one of the reasons why we have seenthe rise of so-called narrative visualisations or visual-isations that help us tell stories with data (Segel andHeer, 2010). For example, educational textbooks of-ten contain various charts and diagrams in order tosupport the message that the text is trying to convey.These narrative visualisations have been adapted tomore recent media and are becoming increasingly dy-

namic. For instance, news on the TV might use ani-mated graphs to show changes in oil prices or electionresults, whereas online news articles might be com-plemented by user-controllable interactive visualisa-tions.

A common medium used for narrative visualisa-tions are the slide decks created by presentation toolssuch as PowerPoint. With over 30 million PowerPointpresentations created every day (Parker, 2001), wecannot deny the role that presentation tools play inknowledge transfer. These tools allow us to displaycontent such as text, images or charts. Nevertheless,unlike other digital media, presentation tools do notexploit recent techniques for interactive informationvisualisation to their full potential. We have seen littleevolution in the core ideologies of presentation toolswhich were originally designed for the production ofphysical photographic slides. For example, most slidedecks are still linear sequences of spatially restrictedslides with static content. However, from a techno-logical point of view, there is no reason why some ofthese limitations would still apply. Visualisation tech-niques such as zoomable user interfaces allow us toget rid of spatial boundaries. Furthermore, hardwaresuch as tablets, smartphones or digital pens support

Page 2: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

the non-linear presentation of content and enable vari-ous forms of real-time interactions with the content ofa presentation. Nevertheless, existing workarounds toimplement this functionality either require too muchtime and effort or the presenter has to use some third-party tools during a presentation, interrupting the flowof the narrative.

We address some of the discussed shortcomingsof current presentation tools and introduce an interac-tive data visualisation solution for the MindXpres pre-sentation tool. By applying well-established conceptsfrom information visualisation and visual storytelling,we aim to provide more effective narrative visualisa-tions in presentations. Our interactive data visualisa-tion solution for an existing presentation tool supportsthe predefinition of a series of views for a given dataset as well as transitions between these views in orderto support the narrative. In contrast to existing pre-sentation tools, the visualised data and visualisationparameters can be changed between the steps of thenarrative. For instance, the chart type (e.g. bar chartor pie chart) can be changed, filters can be appliedon the data or the focus might be adjusted. Further-more, the same functionality remains available at pre-sentation time, allowing the presenter to break freefrom any predefined visualisation series in order toexplore and discuss the data without restrictions. Byapplying established information visualisation guide-lines and techniques, the resulting presentation helpsaudience members to strengthen their mental modaland enhances the effectiveness of knowledge transfer.In addition, our proposed approach not only reducesthe time needed to create compelling narratives out ofraw data, but also allows for a shift towards audience-driven narratives.

In Section 2 we discuss information visualisationand narrative visualisation concepts in more detail, re-late them to existing presentation tools and discussshortcomings of existing presentation tools. We thenpropose enhancements for some of these shortcom-ings and derive a number of general requirementsfor interactive narrative information visualisation inpresentation tools in Section 3. In Section 4, somedetails about our prototype implementation for theMindXpres presentation tool are provided, which isfollowed by a use case in Section 5 to illustrate someof our prototype’s functionality. We conclude with adiscussion and outline of future work.

2 BACKGROUND

We now have a look at existing information visu-alisation and narrative visualisation concepts and out-

line the limitations of existing presentation tools interms of information visualisation as well as narrativevisualisation.

2.1 Interactive Visualisation

An important goal of information visualisation is tostrengthen a viewer’s understanding of the under-lying data, which might be hard to interpret in itsraw form. Abstract data representations can offera high-level overview and help us to reinforce ourmental model (Zhicheng and Stasko, 2010). Suchgraphical representations make use of our highly de-veloped ability to process the continuous stream ofinformation-rich signals captured by our eyes (Ware,2012). Concepts such as shape, colour, size or dis-tance are intuitive to us and the interpretation of someof these concepts comes naturally. Research in thisdomain led to Gestalt psychology, a research fieldthat identified a series of laws helping us to under-stand these natural interpretations (Ellis, 1999). Forinstance, when comparing objects in a visualisation itis clear that a larger object represents a larger quan-tity or something of higher importance. Similarly, ob-jects that are spatially close to each other are likelyto be more related than objects with a larger distancein between them. The field of information visualisa-tion tries to exploit these findings in order to facili-tate knowledge transfer. Few (Few, 2004) proposesa classification consisting of eight types of messagesthat can be derived from a visualisation, includingtime series, rankings, part-to-whole, deviation, distri-bution, correlation, geospatial messages and nominalcomparison.

The formation of a mental model can further beaugmented by allowing the user to interact with thedata (Ware, 2012). The significance of interactionwhile processing information was illustrated in Gib-son’s cookie cutter experiment (Gibson, 1962) andis often used as a classic example to prove the rele-vance of interaction in information visualisation. Gib-son concluded that our brain performs better as ac-tive explorer, even if the act of exploring requiresadditional coordination and processing. Interactiontechniques in information visualisation can be seenas the features that provide users with the ability todirectly or indirectly manipulate and interpret repre-sentations. Note that this also includes menu inter-faces that allow users to manipulate the representa-tion and, for instance, switch to another chart type orsort a bar chart in descending order (Yi et al., 2007).Furthermore, Dix and Ellis (Dix and Ellis, 1998) em-phasise two important principles in interacting withvisualisations. The first principle “same representa-

Page 3: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

tion, changing parameters” states that users shouldbe able to interactively change parameters of the pre-sentation. The second principle “same data, changingrepresentation” implies that a user should be able toswitch between conceptually different data visualisa-tions. Various representations can be appropriate fordifferent types of data and each representation needsto be tuned for its purpose.

There are various academic studies on different in-teraction techniques (e.g. zooming or filtering) whichresulted in the categorisation of frequently used tech-niques in information visualisation. One of the widelyaccepted classifications was independently proposedby both Siirtola (Siirtola, 2007) and Yi (Yi et al.,2007). Even though the authors did not collaboratethe proposed interaction categories are very similar:

• Select: mark something as interesting

• Explore: show something else

• Reconfigure: show a different arrangement

• Encode: show a different representation

• Abstract/Elaborate: show more or less details

• Filter: show something conditionally

• Connect: show related items

2.2 Narrative Visualisation

Interactive visualisation techniques cover the explo-ration and analysis of data but there is also a need forpresenting and communicating data effectively. Asstated by Kosara, “tying facts together into a story isone of the most effective ways of presenting them andmaking a point” (Kosara and Mackinlay, 2013). Themain reason for using stories is the fact that they areknown to be a popular way of conserving informationand passing it on. Not only do narratives preserveand advertise information, they also act as an adhe-sive between facts to make them memorable (Austin,2011). Segel and Heer (Segel and Heer, 2010) pro-vide a classification of the different approaches anddesign techniques used in news media to visually tellstories.

In the context of presentations, narrative visuali-sations are mainly author driven. The scenes and sce-narios are linear and predefined by the presenter, mes-sages and conclusions are explicitly mentioned andthe audience has little to no influence on the story.This contrasts with reader-driven narratives found inother contexts where there is no prescribed order-ing, the free interaction and exploration is central andpossible interpretations are left to the reader. Segeland Heer state that ideally, visual narrative genresmust balance a narrative, intended by the author, with

story discovery by the reader (Segel and Heer, 2010).Kosara confirms that this also holds true for collab-orative settings where stories can not only be usedto support discussion and decision making, but alsoduring the analysis process. Hence, stories can serveas a source for drawing conclusions, similar to thenarrated history of an event (Kosara and Mackinlay,2013).

Note that narrative visualisations can be manip-ulated to emphasise specific messages during freeexploration. For instance, Hullman and Diakopou-los (Hullman and Diakopoulos, 2011) identified anumber of approaches and design techniques toprioritise particular interpretations in visualisations.These findings imply that narrative visualisations canbe designed to deliver a predefined message withoutexplicitly giving the message away.

2.3 Existing Presentation Tools

Even though the visualisation of information ingraphs is an important feature of current presenta-tion tools, existing presentation solutions clearly lackthe interactive or narrative aspects discussed earlierin this section. PowerPoint makes it easy to visualisenumbers stored in a spreadsheet and provides a lot offreedom in terms of chart types and styling options.Nevertheless, the final result of this process is alwaysa static graph. Of course, as with any content in Pow-erPoint, it is possible to apply transitions (e.g. fade inor slide out) and motion path animation effects. Theseeffects can either be applied to the complete chart or,depending on the type of chart, to smaller parts withinthe chart. By using these transitions and motion pathanimations as a workaround, authors can compose ba-sic narratives by, for example, making parts of a piechart appear one by one. However, this approach hasseveral shortcomings. First of all, it requires a majorauthoring effort since animations have to be manuallyapplied to the different parts to achieve the desiredeffect. This can get even more complicated whenchanges need to be made at a later stage. In order toswitch to another chart type, it might even be neces-sary to define multiple versions of the graph with thecorresponding transitions between them. Second, ifwe depend on these transition effects, the result con-sists of a predefined sequence of states and there is noway to deviate from this fixed path. While it can bedesirable to predefine a path through the data, it mightalso be beneficiary to have the flexibility to show al-ternative unprepared variations when answering un-expected questions. Last but not least, it is importantto note that a chart is rendered only when the underly-ing data or configuration is changed at authoring time,

Page 4: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

but from then on the chart has to be considered a col-lection of static images. This implies that any effectsonly operate on the graphical level but cannot do any-thing that would require the components of the chartto adapt between steps. We can make the bars of a barchart appear one by one but it is impossible to applymodifiers to the information or configuration that de-fines the graph. For example, we cannot just switchto another chart type, change the scale of a graph orfilter out specific values as a step in the animation.There are third-party plug-ins (e.g. oomfo1 or think-cell2) which add even more options for creating chartsbut one has to be aware that these third-party plug-ins typically only add additional authoring and stylingfeatures for designing what will ultimately result in astatic chart with the same limitations. So far we haveonly discussed charts in PowerPoint but we came tosimilar conclusions for alternative presentation toolssuch as Apple’s Keynote3 or Prezi4.

In terms of academic work, there are a num-ber of tools based on the interactive visualisationprinciples discussed earlier. Notable examples areVICKI (Dawkes et al., 1996), Spotfire (Ahlberg,1996) and GGobi (Swayne et al., 2003). Whilethey are promising tools founded on the principlesof proven concepts, they also show a few shortcom-ings making them less suited for usage in presenta-tions. First of all, these solutions were built as stan-dalone applications and their interfaces are not opti-mised for use during a presentation. The presenterhas to leave the presentation and switch to anotherapplication which interrupts the flow. These toolsalso consist of multiple windows and have complexmenus that do not translate well to the limited reso-lution offered by most projectors. Additionally, sig-nificant interaction is needed to operate these tools,requiring the presenter to focus on the software anduse the keyboard or mouse to go through a series ofactions to switch between desired visualisations. Itis clear that these solutions focus on the interactiveexploration part, but the ability to use them as nar-rative visualisation tools is limited. Note that GGobialso provides an Application Programming Interface(API) that allows programmers to embed and inter-act with visualisations pragmatically. There are otherdeveloper frameworks such as UC Berkeley’s prefusevisualization toolkit5 for the Java programming lan-guage or the popular D36 JavaScript library. While

1http://oomfo.com2http://www.think-cell.com/en/products/3http://www.apple.com/mac/keynote/4https://prezi.com5https://github.com/prefuse/Prefuse6http://d3js.org

they offer a broad range of features for modern datavisualisation, these frameworks are usually used forbuilding standalone applications. More importantly,they require the programming of the desired visuali-sation which is not suitable for the average presenter.

Hans Rosling’s 2006 TED talk entitled “The BestStats You’ve Ever Seen” (Rosling, 2006) is an ex-cellent example of the fact that it is not impossibleto build a presentation around dynamic and interac-tive data visualisation. During his talk, Rosling madethe point that there is so much data related to humandevelopment trends but it is difficult to educate peo-ple and transfer knowledge about current issues if wecannot present these statistics in an accessible way.For his presentation, he used a proprietary tool (nowforming part of the Gapminder7 suite) that allowedhim to animate and visualise data over time, switchbetween chart types or highlight areas of interest andannotate them. The success of the talk can partly beattributed to Rosling’s energetic personality and com-pelling arguments, but also his novel approach to pre-senting data gained quite some attention (Kosara andMackinlay, 2013) and has been explored in greaterdetail. Robertson later showed that animated transi-tions can have a negative effect on the viewer’s abil-ity to follow trends (Robertson et al., 2008), but be-cause they are entertaining and capture the attentionthey work well in front of a live audience. While thisis definitely a major step in the right direction, theGapminder series of tools also has some shortcom-ings. First of all, they are again standalone applica-tions and require us to switch from our presentationtool. More importantly, the tools were built specif-ically for educating people about specific topics re-lated to human development which implies that thedata sets are fixed and the functionality and visualisa-tions are tweaked for drawing conclusions from datasuch as geographic and demographic data over time.

The discussed related research highlights theadded value of interactive and narrative visualisa-tions but we have to conclude that existing presen-tation tools do not offer the required support forapplying such narrative visualisations in practice.There are some workarounds such as creating mul-tiple static charts and manually defining transitionsbetween them but often presenters are not willing tomake this effort and rather opt for a less dynamic nar-rative. On the other hand, it is possible to use stand-alone tools which were not intended to be used in thecontext of live presentations and are difficult if notimpossible to be applied as tools for narrative visual-isation.

7http://www.gapminder.org/downloads/

Page 5: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

3 REQUIREMENTS

Research in the field of information visualisationand narrative visualisation shows that a lot can begained by using specific visualisation techniqueswhen transferring knowledge. However, as discussedearlier we see that presentation tools do not exploitthese visualisation techniques to their full potential.Our goal is to close this gap and apply lessons learnedfrom interactive information visualisation as wellas narrative visualisation to presentations in orderto improve presentation-based knowledge transfer.Based on the presented related work and the short-comings of existing presentation solutions discussedin Section 2, we derive a set of requirements forinteractive information visualisation in presentationtools.

R1: Integration in presentation tools As slidedecks are one of the most frequently used media fortransferring knowledge in education and businesssettings, it is preferable to directly integrate interac-tive visualisations into our presentation rather thanrelying on third-party applications. If an interactivevisualisation is not integrated into the presentationtool, the presenter is forced to switch betweenapplications which takes time and interrupts thepresentation flow.

R2: Focus on proven techniques and guidelinesPopular presentation tools put their main focus onaesthetics and looks but the offered features are notalways beneficial in terms of knowledge transfer. Forinstance, the ability to show three-dimensional barcharts or pie charts has been proven to cause longerinterpretation times and may even be interpretedincorrectly (Siegrist, 1996; Fischer, 2000). Similarly,Tufte (Tufte and Graves-Morris, 1983) argues thatmost graphical bells and whistles (what he calls“chartjunk”) increase the signal-to-noise ratio anddilute the message one wants to deliver. Presentationtools should not only create visually appealingvisualisations but also support the presenter in cre-ating visualisations that focus on strengthening theviewer’s mental modal and transferring knowledgemore efficiently. Therefore, a presentation tool shouldoffer features based on the message that the presenteris trying to pass on, for instance based on Few’sclassifications introduced earlier (Few, 2004). Notethat this is not only relevant for static visualisationsbut should also apply to the currently non-existentinteractive features by, for example, basing ourselveson Siirtola’s classification of relevant tasks for dataexploration (Siirtola, 2007).

R3: Interactive visualisations as support for oralnarratives When using interactive and dynamicvisualisations as support for an oral narrative, it isdesirable to be able to predefine a sequence of viewsfor a given data set and to step through these viewsduring the presentation. In addition to simple enterand exit animations offered by existing tools, it isimportant to be able to apply the two interactionprinciples by Dix and Ellis (Dix and Ellis, 1998)introduced earlier. This implies that it should be pos-sible to apply new parameters in between the steps ofa presentation (e.g. change the scale or apply a filteron the data) and to change the data representation(e.g. by switching to another chart type). By allowingthe presenter to define such a sequence of states,they can synchronise the visualisation state with theoral narrative beforehand and ensure that limitedinteraction with the computer is needed during thepresentation.

R4: Unscripted data exploration In addition tostepping through the predefined states of a visuali-sation, the presenter should also be able to changethe representation or parameters at any point duringthe presentation. Segel and Heer (Segel and Heer,2010) pointed out the importance of balancing anarrative intended by the author with story discoveryfrom the side of the reader in visual narrative genres.This also applies to certain presentation styles wherequestions or discussions with the audience can drivethe presentation. Therefore, a presentation toolshould also allow the presenter to interact with thevisualisation during the presentation with the sameset of interactions offered at authoring time. Sincethe resolution (screen real estate) and interaction islimited during a presentation, special care needs tobe taken to offer the available interactions in a waythat does not clutter the visualisation and can becontrolled without intensive user input.

R5: Interactivity after the presentation As men-tioned earlier, readers or audience members shouldnot be excluded from the interaction. This does notonly apply during a presentation but should be validfor a slide deck’s entire lifetime. For example, inhigher education slide decks are often offered as partof the study material. A student reviewing the slidesat home should at least be able to play back the vi-sualisation as it was defined by the presenter. Ideallystudents should also have the option to freely navigatethe data in order to clarify any doubts they may haveand to strengthen their mental model by exploring thedata. Another use case is the inverted or flipped class-

Page 6: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

Figure 1: MindXpres architecture

room setting where activities that are typically consid-ered homework become central during class and theteacher merely guides the completion of these activi-ties (Bishop and Verleger, 2013). By offering studentsthe interactive slide decks that were used in the pre-recorded lectures, they are not only able to replicatesituations from the videos, but they also have a toolfor further data exploration in order to come to theirown conclusions.

4 IMPLEMENTATION

Our interactive data visualisation prototype hasbeen implemented as a plug-in for the MindXprespresentation tool (Roels and Signer, 2014b).MindXpres was developed to overcome the limitedextensibility of well-known slideware tools such asPowerPoint or Keynote and to offer a rapid proto-typing platform for novel presentation ideas. WhilePowerPoint offers an Application Programming Inter-face (API), it enforces the usage of a linear sequenceof slides with relatively static content which makesit difficult to experiment with radically new ideasfor next generation presentation tools. In contrast,the highly modular MindXpres architecture allowsany component to be replaced and new componentsand functionality can easily be added. For instance,users may choose to use a plug-in that visualisescontent using a zoomable user interface (ZUI) or theycan use a plug-in that visualises the same contentin a classic linear fashion as in existing slideware.As shown in Figure 1, the core MindXpres engineprovides various abstractions that allows plug-increators to focus on their ideas instead of having toreimplement the basic functionality. The graphicsengine, for example, provides functionality relatedto the visualisation of content which drive featuressuch as the ZUI and interactive rich media visuali-sation plug-ins. The communication engine allowsinstances of a MindXpres presentation to form net-

works which enables plug-ins to communicate acrossdevices and supports audience-driven functionalitysuch as polls, quizzes or screen mirroring (Roelsand Signer, 2014a). MindXpres uses HTML5 andrelated technologies for enhanced portability andplug-ins are written entirely in JavaScript. Althougha graphical editor is under development, MindXprespresentations are currently defined in a XML-baseddeclarative language similar to the LATEX languageused for text documents. Listing 1 shows an exampleof a presentation in the XML authoring language.The goal is that a user should focus on the authoringof the content and the presentation tool deals withthe layout and styling. While MindXpres comes witha default set of plug-ins for basic components suchas images, bullet lists, videos or slides, it is easy toadd new plug-ins for new content types. Note thatthese plug-ins also extend the vocabulary used inthe MindXpres document format. More specifically,a plug-in can add new XML tags to be used in thedocument format. A plug-in that introduces newtags also takes responsibility for visualising contentplaced within these tags.� �1 <presentation>

2 <slide title="Vannevar Bush">

3 <bulletlist>

4 <item>March 1890 - June 1974</item>

5 <item>Founder of Raytheon</item>

6 </bulletlist>

7 <image file="bush.jpg"/>

8 <quote source="As We May Think (1945)">

9 A record , if it is to be useful to

10 science , must be continuously extended ,

11 it must be stored , and above all it must

12 be consulted.

13 </quote>

14 </slide>

15 </presentation>� �Listing 1: MindXpres presentation in XML

Page 7: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

Table 1: List of implemented abstractions for manipulating a visualisation

Parameters Abstractions Description

highlighting focus, defocus highlighting and fading out specific elementsvisibility show, hide showing and hiding specific elementsdata sources load, unload, unload all load and unload data setsdata display show, hide, set name, set colour data or group display settingsaxis settings group, label, min, max, range assign data group and display settings to axesfiltering apply filter, remove filter apply or remove filter to dataselecting select, unselect selecting or unselecting datarepresentation set chart type transform visualisation to a specified typegrouping make group combine columns or groups into a new groupsorting sort sort data based on specified groupgridlines set spacing, enable, disable settings for horizontal or vertical grid linesregions add, remove select intervals on an axis for side by side displaylegend show, hide, set groups legend visibility and groups to be includedtooltip show, hide turn tooltip on or offview area set zoom, set x, set y view manipulation (zooming or panning)chart size resize resize the chart to a given height and widthchart rendering redraw, clear request a refresh or clear everything

In the past, MindXpres has been used for imple-menting new presentation components such as for theinteractive visualisation of source code (Roels et al.,2015). For the presented solution, we have taken asimilar approach and realised interactive data visual-isation by implementing a data visualisation plug-infor MindXpres. Since MindXpres is based on client-side web technology we did not have to start fromscratch but could make use of existing visualisationlibraries. As a starting point we use Bostock’s Data-Driven Documents (D3) JavaScript library (Bostocket al., 2011) which supports complex data-driven vi-sualisations through code. The library then uses thewidely supported SVG, HTML and CSS standards togenerate the desired visualisation. D3 is a powerfulsolution offering control over every possible aspect,but it is also quite complex to use since even a simplestatic bar chart requires tens, if not hundreds of linesof code (Bostock, 2013). For this reason, we alsouse the C3.js JavaScript library8, a D3-based reusablechart library that provides abstractions for most of thecommon chart types out of the box. Based on C3’sAPI, one can control the state of a chart such as focus-ing on a data series, selecting data points, showing orhiding the data series or updating the data. With thesefeatures it is possible to change the chart in responseto events such as user input or temporal triggers.

The data to be used in a visualisation can be spec-ified in two ways. It can either be directly definedin the MindXpres XML language or an external file

8http://c3js.org

can be provided. By default, D3 supports the load-ing of data in plain text, JSON, XML, HTML, CSVand TSV format. We extended this list of formatswith support for Excel spreadsheets by implement-ing a compile-time trigger in the MindXpres plug-in. The compiler converts any referenced spreadsheetdata to JSON and bundles it with the presentationwhich makes it easier for the JavaScript plug-in toprocess the data at runtime.

After providing a data set, the author can definethe visualisation’s starting state. This includes but isnot limited to setting a chart type, specifying whichparts of the data to show initially and configuringspecific chart components such as zoom level, axesor legends. Subsequently the author can define ad-ditional visualisation states to match their narrative.During the presentation, the author will be able tostep through these states and the plug-in automati-cally applies the settings specified for each state. Notethat any part of the configuration can change betweenstates. This includes the data set, chart type and otherparameters that cannot be changed in conventionalpresentation tools. In order to hide the complexityof the used D3 and C3 libraries, we provide abstrac-tions for useful configuration changes in accordanceto the interaction techniques provided by Yi et al. (Yiet al., 2007). Table 1 highlights a list of abstractionsimplemented by our prototype. These abstractionsmake it easier for a presenter to define the transfor-mations needed to get the visualisation to the nextdesired state. Listing 2 shows an example of how avisualisation and its states are defined in the XML

Page 8: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

language. In this case, the data is retrieved from anexternal file but the visualisation states are defined inthe XML language. Note that the data could also bedefined in the XML document and on the other handthe configuration might be defined in an external file.

Figure 2: Interaction menu at presentation time

In addition to predefining the required states, thepresenter is free to apply unscheduled abstractions atany point during the presentation. Some of the ab-stractions are triggered with the mouse, for instanceby hovering over an element it is highlighted andthe corresponding tooltip is shown. Similarly, datagroups can be hidden or shown by clicking on the rel-evant group in the legend if it is shown. However,not all interactions can be offered via non-intrusivemouse actions. For this reason we have integrated aninteraction menu that allows the presenter to performany of the offered interaction abstractions during thepresentation as illustrated in Figure 2.

5 USE CASE

In order to demonstrate the benefits of our inter-active data visualisation plug-in, we present a shortscenario that demonstrates how one can use the plug-in to create a narrative visualisation. In contrast toexisting presentation tools, a presenter only needs tocreate one visualisation with one data set for whichthey define a sequence of views that support their oralnarrative. This requires not only much less time andeffort than existing workarounds, but it also becomeseasier to apply changes at a later point in time. In thepresented scenario, the goal is to compare the tax andsocial burdens of salaried employees in the 27 mem-ber states of the European Union. As a starting point,a CSV file that contains the relevant data for 2014 isused (Rogers and Philippe, 2014). A dynamic and in-teractive visualisation is then used to illustrate the ex-tra money an employer has to pay in order that an em-

ployee will receive exactly one euro after taxes. Sincethe presentation is delivered to a Belgian audience,the presenter starts with an explanation of the tax sit-uation in Belgium. At first, a simple chart is shownin Figure 3a with a blue bar representing the one eurothe employee receives.

In a next step, the presenter introduces the conceptof employer social security and adds it to the chart inthe form of the orange extension to the original bluebar in Figure 3b, in order to provide an idea of the pro-portions. Note that the scale of the horizontal axis au-tomatically adjusts and now shows a linear scale from0 to the total costs of 1.6 euro so far. The same pro-cedure is repeated for the income tax (green) and theemployee social security (red), introducing one itemat a time in order to keep the audience focussed on theexplanations (Figure 3c). The exact values of the dif-ferent parts that make up the bar are shown in a smalltable when the mouse cursor is hovered over the bar.The presenter then transforms the visualisation intoa pie chart which shows the ratio of each part as apercentage, revealing that an employee only receives42.7% of what the employer pays (Figure 3d).

In order to get a better understanding of what thesevalues mean, the presenter switches back to a barchart and compares the Belgian and the average EUemployer costs side by side as illustrated in Figure 3e.Next, to show the variation in employer costs acrossEurope the presenter can scroll to zoom out and showall countries in de data set side by side (Figure 3f). Bydefault the countries are ordered alphabetically and ifthe list is too long to fit on the screen, the presentercan drag the mouse up and down to scroll in the list.Note that at any point the presenter can zoom back toa single country, for instance Cyprus, in order to ex-plain why it is the country with the lowest employercosts (Figure 3g). Finally, the presenter decides toshow the full list again, but this time sorted by totalemployer costs in order to point out the cheapest andmost expensive countries from the perspective of anemployer as highlighted in Figure 3h.

Note that even without the narrative, a viewermight still derive the implicit messages that the pre-senter would normally present orally (e.g. “Belgiumemployees receive less than half of what the employerpays”, or “employer costs in Belgium are very highcompared to the rest of Europe”). This is in line withthe findings of Hullman and Diakopoulos who statethat narrative visualisations can be designed to de-liver predefined implicit messages (Hullman and Di-akopoulos, 2011). It further demonstrates the poten-tial value of our interactive data visualisation plug-infor viewers who review the slides after the presenta-tion (e.g. students using the slides as study material)

Page 9: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

(a) One Euro received by employee (b) Add employer social security

(c) Add income tax and employee social security (d) Switch to pie chart

(e) Compare with EU average (f) All countries (alphabetically)

(g) Zoom in (h) All countries (sorted by value)

Figure 3: Various phases of a visualisation for discussing EU employer costs

Page 10: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

as they can play back the sequence and come to theintended conclusions without the oral narrative.� �1 <infovis>

2 <data file="tax_eu.csv"></data>

3 <config>

4 <view>

5 <chart type="bar" variant="stacked" />

6 <axis dim="x" group="socialtax" />

7 <axis dim="y" group="countries" />

8 <filter group="countries" value="Belgium"/>

9 <show group="socialtax" sub="income" />

10 </view>

11 <view>

12 <show group="socialtax" sub="security1" />

13 </view>

14 ...

15 <view>

16 <show group="socialtax" sub="security2" />

17 </view>

18 <view>

19 <chart type="pie" />

20 </view>

21 ...

22 </config>

23 </infovis>� �Listing 2: XML definition of visualisation states

Listing 2 shows how this scenario has been de-fined in the XML-based MindXpres authoring lan-guage. The illustrated XML snippet of course formspart of a larger XML document defining the wholepresentation. The infovis tag on the first line tells theMindXpres compiler and runtime engine that our in-formation visualisation plug-in has to be invoked inorder to process the child tags and render the relevantcontent. Next, a data tag specifies the data file to beused by the plug-in. Finally, a list of visualisationstates or views are provided. By default the first viewin the list will be used as an initial state, resulting inthe chart shown in Figure 3a. The succeeding viewscontain instructions on how to adapt the visualisationfor subsequent visualisation states. In this case, sub-groups of data are made visible and since the charttype is a stacked bar chart they will be added to therelevant bars. When the author wants to switch to apie chart, the chart tag is used to set a new chart type.Note that any settings from previous views, such asthe filter put in place to select only data from Belgium,are still valid. In this case, axis settings are also keptbut are ignored as they are not relevant for a pie chart.Nevertheless, it means that when we switch back to abar chart in a later view, the earlier axis settings stillapply. The rest of the states shown in the scenario areachieved in a similar manner and are mainly the resultof applying filter and sort instructions.

6 DISCUSSION & CONCLUSION

We have illustrated the benefits of interactiveand narrative visualisation for knowledge transferand have listed some well-established techniques forstrengthening a viewer’s mental model. However,we identified that existing presentation tools such asPowerPoint do not exploit these principles to their fullpotential. For instance, while different chart visuali-sations do support basic enter and exit animations, wecannot make changes to the underlying data or visual-isation parameters at presentation time which makesit difficult to use these charts for data exploration oras narrative visualisation.

Based on established interactive and narrative vi-sualisation techniques, we derived a set of require-ments for interactive data visualisation in the contextof presentations. Our interactive data visualisationsolution has been implemented as a plug-in for theMindXpres presentation tool. Furthermore, we intro-duced a number of abstractions for useful interactionsand allow the presenter to use them to predefine visu-alisation states or freely apply them during a presenta-tion. Our proposed solution goes beyond what state-of-the-art presentation tools offer and our abstractionsdo not only support changes to the visualisation pa-rameters (e.g. chart type or zoom level) but also en-able the modification of the underlying data (e.g. fil-ter or add data). Thereby, we ensure that interactivevisualisations for oral narratives can be created withminimal effort. Finally, since MindXpres presenta-tions can easily be shared and interactive componentsare also usable after a presentation has been deployed,the presented interactive data visualisation plug-in of-fers new opportunities for students to individually ex-plore the data.

Our prototype supports the common chart types(and their variations) such as line, bar or pie charts aswell as scatter plots. These can be used to deliver al-most all of the message types defined by Few (Few,2004) except geospatial information. In order to sup-port every aspect of this classification, we intend toextend the plug-in with a geographical map view en-suring that data can be rendered in relation to geo-graphical locations. Similarly our solution currentlysupports all interaction techniques defined by Yi (Yiet al., 2007) except for techniques related to the con-nect principle, allowing viewers to show items whichare related to a selected one. As the similarity metricheavily depends on the data and context, further in-vestigation is needed to see how we can abstract thisparticular interaction technique.

Last but not least, our plug-in has been devel-oped in correspondence to the philosophy of the

Page 11: An Interactive Data Visualisation Approach for Next ...beatsigner.com/publications/roels_CSEDU2016.pdf · tive data visualisation solution for the MindXpres pre-sentation tool. By

MindXpres presentation platform and for now visu-alisations are defined via the XML-based languageshown in Section 5. Nevertheless, in the near futurewe intend to add a graphical authoring component toour plug-in. We see clear potential in using the sameinteraction menu that has been shown in Figure 2 atauthoring time. Ultimately, this could be paired withsome “recording” features that allow the presenter toadd the current state of the visualisation to the se-quence of states available during the presentation.

We have presented a step towards richpresentation-based data exploration and story-telling. In a use case we further highlighted someof the benefits of our interactive data visualisationprototype. The requirements that we derived based onexisting visualisation techniques might serve third-party slideware vendors as a basis for improving theirproducts. While we decided to base the implementa-tion of our prototype on the MindXpres presentationplatform, we believe that our findings are generalenough and might inspire other researchers to furtherinvestigate interactive visualisation techniques in thecontext of next generation presentation tools.

REFERENCES

Ahlberg, C. (1996). Spotfire: An Information ExplorationEnvironment. ACM SIGMOD Record, 25(4):25–29.

Austin, M. (2011). Useful Fictions: Evolution, Anxiety,and the Origins of Literature. University of NebraskaPress.

Bishop, J. L. and Verleger, M. A. (2013). The Flipped Class-room: A Survey of the Research. In ASEE 2013, 120thAmerican Society for Engineering Education Confer-ence.

Bostock, M. (2013). Let’s Make a Bar Chart. http://bost.ocks.org/mike/bar/. Accessed: 2015-11-05.

Bostock, M., Ogievetsky, V., and Heer, J. (2011). D3 Data-Driven Documents. IEEE Transactions on Visualiza-tion and Computer Graphics, 17(12):2301–2309.

Dawkes, H., Tweedie, L. A., and Spence, B. (1996). VICKI:The VIsualisation Construction KIt. In AVI 1996,Workshop on Advanced Visual Interfaces. ACM.

Dix, A. and Ellis, G. (1998). Starting Simple: Adding Valueto Static Visualisation Through Simple Interaction.

Ellis, W. D. (1999). A Source Book of Gestalt Psychology.Psychology Press.

Few, S. (2004). Show Me the Numbers: Designing Tablesand Graphs to Enlighten. Analytics Press, 2nd edi-tion.

Fischer, M. H. (2000). Do Irrelevant Depth Cues Affect theComprehension of Bar Graphs? Applied CognitivePsychology, 14(2):151–162.

Gibson, J. J. (1962). Observations on Active Touch. Psy-chological Review, 69(6):477.

Hullman, J. and Diakopoulos, N. (2011). VisualizationRhetoric: Framing Effects in Narrative Visualization.

IEEE Transactions on Visualization and ComputerGraphics, 17(12):2231–2240.

Kosara, R. and Mackinlay, J. (2013). Storytelling: The NextStep for Visualization. Computer, 46(5):44–50.

Parker, I. (2001). Absolute PowerPoint: Can a SoftwarePackage Edit Our Thoughts. The New Yorker, 28:76–87.

Robertson, G., Fernandez, R., Fisher, D., Lee, B., andStasko, J. (2008). Effectiveness of Animation in TrendVisualization. Visualization and Computer Graphics,IEEE Transactions on, 14(6):1325–1332.

Roels, R., Mestereaga, P., and Signer, B. (2015). To-wards Enhanced Presentation-based Teaching of Pro-gramming - An Interactive Source Code Visuali-sation Approach. In CSEDU 2015, 7th Interna-tional Conference on Computer Supported Education.SCITEPRESS.

Roels, R. and Signer, B. (2014a). A Unified Communica-tion Platform for Enriching and Enhancing Presenta-tions with Active Learning Components. In ICALT2014, 14th IEEE International Conference on Ad-vanced Learning Technologies. IEEE.

Roels, R. and Signer, B. (2014b). MindXpres: An Exten-sible Content-driven Cross-Media Presentation Plat-form. In WISE 2014, 15th International Conferenceon Web Information System Engineering. Springer.

Rogers, J. and Philippe, C. (2014). The Tax Burden of Typ-ical Workers in the EU 28. New Direction, 17.

Rosling, H. (2006). TED Talk: Hans Rosling Shows TheBest Stats You’ve Ever Seen. www.ted.com.

Segel, E. and Heer, J. (2010). Narrative Visualization:Telling Stories with Data. IEEE Transactions on Visu-alization and Computer Graphics, 16(6):1139–1148.

Siegrist, M. (1996). The Use or Misuse of Three-Dimensional Graphs to Represent Lower-Dimensional Data. Behaviour & InformationTechnology, 15(2):96–100.

Siirtola, H. (2007). Interactive Visualization of Multidimen-sional Data. PhD thesis, University of Tampere.

Swayne, D. F., Lang, D. T., Buja, A., and Cook, D. (2003).GGobi: Evolving from XGobi into an ExtensibleFramework for Interactive Data Visualization. Com-putational Statistics & Data Analysis, 43(4):423–444.

Tufte, E. R. and Graves-Morris, P. (1983). The Visual Dis-play of Quantitative Information. Graphics Press, 2ndedition.

Ware, C. (2012). Information Visualization: Perception forDesign. Elsevier, 3rd edition.

Yi, J. S., Kang, Y. a., Stasko, J., and Jacko, J. (2007).Toward a Deeper Understanding of the Role of In-teraction in Information Visualization. IEEE Trans-actions on Visualization and Computer Graphics,13(6):1224–1231.

Zhicheng, L. and Stasko, J. T. (2010). Mental Models, Vi-sual Reasoning and Interaction in Information Visual-ization: A Top-down Perspective. IEEE Transactionson Visualization and Computer Graphics, 16(6):999–

1008.