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

Keywords:

Presentations, Slideware, Narrative Visualisation, Data Exploration.

Abstract:

Existing research in the ﬁeld of information visualisation has shown that interactive data exploration and

storytelling can signiﬁcantly 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 predeﬁne 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 ﬁeld 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 speciﬁc 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

the non-linear presentation of content and enable vari-

ous forms of real-time interactions with the content of

a presentation. Nevertheless, existing workarounds to

implement this functionality either require too much

Roels, R., Baeten, Y. and Signer, B.

An Interactive Data Visualisation Approach for Next Generation Presentation Tools - Towards Rich Presentation-based Data Exploration and Storytelling.

In Proceedings of the 8th International Conference on Computer Supported Education (CSEDU 2016) - Volume 1, pages 123-133

ISBN: 978-989-758-179-3

123

time and effort or the presenter has to use some third-

party tools during a presentation, interrupting the ﬂow

of the narrative.

We address some of the discussed shortcomings

of current presentation tools and introduce an interac-

tive data visualisation solution for the MindXpres pre-

sentation tool. By applying well-established concepts

from 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 supports

the predeﬁnition of a series of views for a given data

set as well as transitions between these views in order

to support the narrative. In contrast to existing pre-

sentation tools, the visualised data and visualisation

parameters can be changed between the steps of the

narrative. For instance, the chart type (e.g. bar chart

or pie chart) can be changed, ﬁlters can be applied

on the data or the focus might be adjusted. Further-

more, the same functionality remains available at pre-

sentation time, allowing the presenter to break free

from any predeﬁned visualisation series in order to

explore and discuss the data without restrictions. By

applying established information visualisation guide-

lines and techniques, the resulting presentation helps

audience members to strengthen their mental modal

and enhances the effectiveness of knowledge transfer.

In addition, our proposed approach not only reduces

the time needed to create compelling narratives out of

raw data, but also allows for a shift towards audience-

driven narratives.

In Section 2 we discuss information visualisation

and narrative visualisation concepts in more detail, re-

late them to existing presentation tools and discuss

shortcomings of existing presentation tools. We then

propose enhancements for some of these shortcom-

ings and derive a number of general requirements

for interactive narrative information visualisation in

presentation tools in Section 3. In Section 4, some

details about our prototype implementation for the

MindXpres presentation tool are provided, which is

followed by a use case in Section 5 to illustrate some

of our prototype’s functionality. We conclude with a

discussion and outline of future work.

2 BACKGROUND

We now have a look at existing information visualisa-

tion and narrative visualisation concepts and outline

the limitations of existing presentation tools in terms

of information visualisation as well as narrative visu-

alisation.

2.1 Interactive Visualisation

An important goal of information visualisation is to

strengthen a viewer’s understanding of the under-

lying data, which might be hard to interpret in its

raw form. Abstract data representations can offer

a high-level overview and help us to reinforce our

mental model (Zhicheng and Stasko, 2010). Such

graphical representations make use of our highly de-

veloped ability to process the continuous stream of

information-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 some

of these concepts comes naturally. Research in this

domain led to Gestalt psychology, a research ﬁeld

that identiﬁed a series of laws helping us to under-

stand these natural interpretations (Ellis, 1999). For

instance, when comparing objects in a visualisation it

is 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 likely

to be more related than objects with a larger distance

in between them. The ﬁeld of information visualisa-

tion tries to exploit these ﬁndings in order to facili-

tate knowledge transfer. Few (Few, 2004) proposes

a classiﬁcation consisting of eight types of messages

that can be derived from a visualisation, including

time series, rankings, part-to-whole, deviation, distri-

bution, correlation, geospatial messages and nominal

comparison.

The formation of a mental model can further be

augmented by allowing the user to interact with the

data (Ware, 2012). The signiﬁcance of interaction

while processing information was illustrated in Gib-

son’s cookie cutter experiment (Gibson, 1962) and

is 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 requires

additional coordination and processing. Interaction

techniques in information visualisation can be seen

as the features that provide users with the ability to

directly 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 or

sort 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 with

visualisations. The ﬁrst principle “same representa-

tion, changing parameters” states that users should

be able to interactively change parameters of the pre-

sentation. The second principle “same data, changing

representation” implies that a user should be able to

switch between conceptually different data visualisa-

CSEDU 2016 - 8th International Conference on Computer Supported Education

124

tions. Various representations can be appropriate for

different types of data and each representation needs

to be tuned for its purpose.

There are various academic studies on different in-

teraction techniques (e.g. zooming or ﬁltering) which

resulted in the categorisation of frequently used tech-

niques in information visualisation. One of the widely

accepted classiﬁcations was independently proposed

by both Siirtola (Siirtola, 2007) and Yi (Yi et al.,

2007). Even though the authors did not collaborate

the proposed interaction categories are very similar:

• Select: mark something as interesting

• Explore: show something else

• Reconﬁgure: 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 for

presenting and communicating data effectively. As

stated by Kosara, “tying facts together into a story is

one of the most effective ways of presenting them and

making a point” (Kosara and Mackinlay, 2013). The

main reason for using stories is the fact that they are

known to be a popular way of conserving information

and passing it on. Not only do narratives preserve

and 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 classiﬁcation of the different approaches and

design techniques used in news media to visually tell

stories.

In the context of presentations, narrative visuali-

sations are mainly author driven. The scenes and sce-

narios are linear and predeﬁned by the presenter, mes-

sages and conclusions are explicitly mentioned and

the audience has little to no inﬂuence on the story.

This contrasts with reader-driven narratives found in

other contexts where there is no prescribed order-

ing, the free interaction and exploration is central and

possible interpretations are left to the reader. Segel

and Heer state that ideally, visual narrative genres

must balance a narrative, intended by the author, with

story discovery by the reader (Segel and Heer, 2010).

Kosara conﬁrms that this also holds true for collab-

orative settings where stories can not only be used

to support discussion and decision making, but also

during the analysis process. Hence, stories can serve

as a source for drawing conclusions, similar to the

narrated history of an event (Kosara and Mackinlay,

2013).

Note that narrative visualisations can be manip-

ulated to emphasise speciﬁc messages during free

exploration. For instance, Hullman and Diakopou-

los (Hullman and Diakopoulos, 2011) identiﬁed a

number of approaches and design techniques to

prioritise particular interpretations in visualisations.

These ﬁndings imply that narrative visualisations can

be designed to deliver a predeﬁned message without

explicitly giving the message away.

2.3 Existing Presentation Tools

Even though the visualisation of information in

graphs is an important feature of current presenta-

tion tools, existing presentation solutions clearly lack

the interactive or narrative aspects discussed earlier

in this section. PowerPoint makes it easy to visualise

numbers stored in a spreadsheet and provides a lot of

freedom in terms of chart types and styling options.

Nevertheless, the ﬁnal result of this process is always

a static graph. Of course, as with any content in Pow-

erPoint, it is possible to apply transitions (e.g. fade in

or slide out) and motion path animation effects. These

effects can either be applied to the complete chart or,

depending on the type of chart, to smaller parts within

the chart. By using these transitions and motion path

animations as a workaround, authors can compose ba-

sic narratives by, for example, making parts of a pie

chart appear one by one. However, this approach has

several shortcomings. First of all, it requires a major

authoring effort since animations have to be manually

applied to the different parts to achieve the desired

effect. This can get even more complicated when

changes need to be made at a later stage. In order to

switch to another chart type, it might even be neces-

sary to deﬁne multiple versions of the graph with the

corresponding transitions between them. Second, if

we depend on these transition effects, the result con-

sists of a predeﬁned sequence of states and there is no

way to deviate from this ﬁxed path. While it can be

desirable to predeﬁne a path through the data, it might

also be beneﬁciary to have the ﬂexibility to show al-

ternative unprepared variations when answering un-

expected questions. Last but not least, it is important

to note that a chart is rendered only when the underly-

ing data or conﬁguration is changed at authoring time,

but from then on the chart has to be considered a col-

lection of static images. This implies that any effects

only operate on the graphical level but cannot do any-

thing that would require the components of the chart

to adapt between steps. We can make the bars of a bar

An Interactive Data Visualisation Approach for Next Generation Presentation Tools - Towards Rich Presentation-based Data Exploration

and Storytelling

125

chart appear one by one but it is impossible to apply

modiﬁers to the information or conﬁguration that de-

ﬁnes the graph. For example, we cannot just switch

to another chart type, change the scale of a graph or

ﬁlter out speciﬁc values as a step in the animation.

There are third-party plug-ins (e.g. oomfo

or think-

cell

) which add even more options for creating charts

but one has to be aware that these third-party plug-

ins typically only add additional authoring and styling

features for designing what will ultimately result in a

static chart with the same limitations. So far we have

only discussed charts in PowerPoint but we came to

similar conclusions for alternative presentation tools

such as Apple’s Keynote

or Prezi

In terms of academic work, there are a num-

ber of tools based on the interactive visualisation

principles discussed earlier. Notable examples are

VICKI (Dawkes et al., 1996), Spotﬁre (Ahlberg,

1996) and GGobi (Swayne et al., 2003). While

they are promising tools founded on the principles

of 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 presenter

has to leave the presentation and switch to another

application which interrupts the ﬂow. These tools

also consist of multiple windows and have complex

menus that do not translate well to the limited reso-

lution offered by most projectors. Additionally, sig-

niﬁcant interaction is needed to operate these tools,

requiring the presenter to focus on the software and

use the keyboard or mouse to go through a series of

actions to switch between desired visualisations. It

is clear that these solutions focus on the interactive

exploration part, but the ability to use them as nar-

rative visualisation tools is limited. Note that GGobi

also provides an Application Programming Interface

(API) that allows programmers to embed and inter-

act with visualisations pragmatically. There are other

developer frameworks such as UC Berkeley’s prefuse

visualization toolkit

for the Java programming lan-

guage or the popular D3

JavaScript library. While

they offer a broad range of features for modern data

visualisation, these frameworks are usually used for

building standalone applications. More importantly,

they require the programming of the desired visuali-

sation which is not suitable for the average presenter.

http://oomfo.com

http://www.think-cell.com/en/products/

http://www.apple.com/mac/keynote/

https://prezi.com

https://github.com/prefuse/Prefuse

http://d3js.org

Hans Rosling’s 2006 TED talk entitled “The Best

Stats You’ve Ever Seen” (Rosling, 2006) is an ex-

cellent example of the fact that it is not impossible

to build a presentation around dynamic and interac-

tive data visualisation. During his talk, Rosling made

the point that there is so much data related to human

development trends but it is difﬁcult to educate peo-

ple and transfer knowledge about current issues if we

cannot present these statistics in an accessible way.

For his presentation, he used a proprietary tool (now

forming part of the Gapminder

suite) that allowed

him to animate and visualise data over time, switch

between chart types or highlight areas of interest and

annotate them. The success of the talk can partly be

attributed to Rosling’s energetic personality and com-

pelling arguments, but also his novel approach to pre-

senting data gained quite some attention (Kosara and

Mackinlay, 2013) and has been explored in greater

detail. 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 attention

they work well in front of a live audience. While this

is deﬁnitely a major step in the right direction, the

Gapminder series of tools also has some shortcom-

ings. First of all, they are again standalone applica-

tions and require us to switch from our presentation

tool. More importantly, the tools were built specif-

ically for educating people about speciﬁc topics re-

lated to human development which implies that the

data sets are ﬁxed and the functionality and visualisa-

tions are tweaked for drawing conclusions from data

such as geographic and demographic data over time.

The discussed related research highlights the

added value of interactive and narrative visualisa-

tions but we have to conclude that existing presen-

tation tools do not offer the required support for

applying such narrative visualisations in practice.

There are some workarounds such as creating mul-

tiple static charts and manually deﬁning transitions

between them but often presenters are not willing to

make 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 the

context of live presentations and are difﬁcult if not

impossible to be applied as tools for narrative visual-

isation.

3 REQUIREMENTS

Research in the ﬁeld of information visualisation and

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

CSEDU 2016 - 8th International Conference on Computer Supported Education

126

narrative visualisation shows that a lot can be gained

by using speciﬁc visualisation techniques when

transferring knowledge. However, as discussed

earlier we see that presentation tools do not exploit

these visualisation techniques to their full potential.

Our goal is to close this gap and apply lessons learned

from interactive information visualisation as well

as narrative visualisation to presentations in order

to improve presentation-based knowledge transfer.

Based on the presented related work and the short-

comings of existing presentation solutions discussed

in Section 2, we derive a set of requirements for

interactive information visualisation in presentation

tools.

R1: Integration in Presentation Tools. As slide

decks are one of the most frequently used media for

transferring knowledge in education and business

settings, it is preferable to directly integrate interac-

tive visualisations into our presentation rather than

relying on third-party applications. If an interactive

visualisation is not integrated into the presentation

tool, the presenter is forced to switch between

applications which takes time and interrupts the

presentation ﬂow.

R2: Focus on Proven Techniques and Guidelines.

Popular presentation tools put their main focus on

aesthetics and looks but the offered features are not

always beneﬁcial in terms of knowledge transfer. For

instance, the ability to show three-dimensional bar

charts or pie charts has been proven to cause longer

interpretation times and may even be interpreted

incorrectly (Siegrist, 1996; Fischer, 2000). Similarly,

Tufte (Tufte and Graves-Morris, 1983) argues that

most graphical bells and whistles (what he calls

“chartjunk”) increase the signal-to-noise ratio and

dilute the message one wants to deliver. Presentation

tools should not only create visually appealing

visualisations but also support the presenter in cre-

ating visualisations that focus on strengthening the

viewer’s mental modal and transferring knowledge

more efﬁciently. Therefore, a presentation tool should

offer features based on the message that the presenter

is trying to pass on, for instance based on Few’s

classiﬁcations introduced earlier (Few, 2004). Note

that this is not only relevant for static visualisations

but should also apply to the currently non-existent

interactive features by, for example, basing ourselves

on Siirtola’s classiﬁcation of relevant tasks for data

exploration (Siirtola, 2007).

R3: Interactive Visualisations as Support for Oral

Narratives. When using interactive and dynamic

visualisations as support for an oral narrative, it is

desirable to be able to predeﬁne a sequence of views

for a given data set and to step through these views

during the presentation. In addition to simple enter

and exit animations offered by existing tools, it is

important to be able to apply the two interaction

principles 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 of

a presentation (e.g. change the scale or apply a ﬁlter

on the data) and to change the data representation

(e.g. by switching to another chart type). By allowing

the presenter to deﬁne such a sequence of states,

they can synchronise the visualisation state with the

oral narrative beforehand and ensure that limited

interaction with the computer is needed during the

presentation.

R4: Unscripted Data Exploration. In addition to

stepping through the predeﬁned states of a visuali-

sation, the presenter should also be able to change

the representation or parameters at any point during

the presentation. Segel and Heer (Segel and Heer,

2010) pointed out the importance of balancing a

narrative intended by the author with story discovery

from the side of the reader in visual narrative genres.

This also applies to certain presentation styles where

questions or discussions with the audience can drive

the presentation. Therefore, a presentation tool

should also allow the presenter to interact with the

visualisation during the presentation with the same

set of interactions offered at authoring time. Since

the resolution (screen real estate) and interaction is

limited during a presentation, special care needs to

be taken to offer the available interactions in a way

that does not clutter the visualisation and can be

controlled without intensive user input.

R5: Interactivity After the Presentation. As men-

tioned earlier, readers or audience members should

not be excluded from the interaction. This does not

only apply during a presentation but should be valid

for a slide deck’s entire lifetime. For example, in

higher education slide decks are often offered as part

of the study material. A student reviewing the slides

at home should at least be able to play back the vi-

sualisation as it was deﬁned by the presenter. Ideally

students should also have the option to freely navigate

the data in order to clarify any doubts they may have

and to strengthen their mental model by exploring the

data. Another use case is the inverted or ﬂipped class-

room setting where activities that are typically consid-

ered homework become central during class and the

teacher merely guides the completion of these activi-

An Interactive Data Visualisation Approach for Next Generation Presentation Tools - Towards Rich Presentation-based Data Exploration

and Storytelling

127

Figure 1: MindXpres architecture.

ties (Bishop and Verleger, 2013). By offering students

the interactive slide decks that were used in the pre-

recorded lectures, they are not only able to replicate

situations from the videos, but they also have a tool

for further data exploration in order to come to their

own conclusions.

4 IMPLEMENTATION

Our interactive data visualisation prototype has been

implemented as a plug-in for the MindXpres presen-

tation tool (Roels and Signer, 2014b). MindXpres

was developed to overcome the limited extensibility

of well-known slideware tools such as PowerPoint or

Keynote and to offer a rapid prototyping platform for

novel presentation ideas. While PowerPoint offers

an Application Programming Interface (API), it en-

forces the usage of a linear sequence of slides with

relatively static content which makes it difﬁcult to ex-

periment with radically new ideas for next genera-

tion presentation tools. In contrast, the highly mod-

ular MindXpres architecture allows any component

to be replaced and new components and function-

ality can easily be added. For instance, users may

choose to use a plug-in that visualises content using a

zoomable user interface (ZUI) or they can use a plug-

in that visualises the same content in a classic linear

fashion as in existing slideware. As shown in Fig-

ure 1, the core MindXpres engine provides various

abstractions that allows plug-in creators to focus on

their ideas instead of having to reimplement the basic

functionality. The graphics engine, for example, pro-

vides functionality related to the visualisation of con-

tent which drive features such as the ZUI and inter-

active rich media visualisation plug-ins. The commu-

nication engine allows instances of a MindXpres pre-

sentation to form networks which enables plug-ins to

communicate across devices and supports audience-

driven functionality such as polls, quizzes or screen

mirroring (Roels and Signer, 2014a). MindXpres uses

HTML5 and related technologies for enhanced porta-

bility and plug-ins are written entirely in JavaScript.

Although a graphical editor is under development,

MindXpres presentations are currently deﬁned in a

XML-based declarative language similar to the L

language used for text documents. Listing 1 shows

an example of a presentation in the XML authoring

language. The goal is that a user should focus on

the authoring of the content and the presentation tool

deals with the layout and styling. While MindXpres

comes with a default set of plug-ins for basic compo-

nents such as images, bullet lists, videos or slides, it is

easy to add new plug-ins for new content types. Note

that these plug-ins also extend the vocabulary used in

the MindXpres document format. More speciﬁcally,

a plug-in can add new XML tags to be used in the

document format. A plug-in that introduces new tags

also takes responsibility for visualising content placed

within these tags.

 

1 <presentation>

2 <slide tit le = " V an ne var Bu sh " >

3 <bulletlist>

4 <item> M arc h 1890 - Ju ne 1974 </item>

5 <item> F ou nd er of Ra yt he on </item>

6 </bulletlist>

7 <image fil e =" bush . jpg " / >

8 <quote so urc e = " As We Ma y T hin k ( 19 45) " >

9 A r ecor d , if it is to be us ef ul to

10 sc ienc e , mu st b e c on ti nu ou sl y exte nde d ,

11 it m ust be sto red , a nd a bov e a ll it must

12 be c on su lt ed .

13 </quote>

14 </slide>

15 </presentation>

 

Listing 1: MindXpres presentation in XML.

In the past, MindXpres has been used for imple-

menting new presentation components such as for the

interactive visualisation of source code (Roels et al.,

2015). For the presented solution, we have taken a

similar approach and realised interactive data visual-

isation by implementing a data visualisation plug-in

CSEDU 2016 - 8th International Conference on Computer Supported Education

128

Table 1: List of implemented abstractions for manipulating a visualisation.

Parameters Abstractions Description

highlighting focus, defocus highlighting and fading out speciﬁc elements

visibility show, hide showing and hiding speciﬁc elements

data sources load, unload, unload all load and unload data sets

data display show, hide, set name, set colour data or group display settings

axis settings group, label, min, max, range assign data group and display settings to axes

ﬁltering apply ﬁlter, remove ﬁlter apply or remove ﬁlter to data

selecting select, unselect selecting or unselecting data

representation set chart type transform visualisation to a speciﬁed type

grouping make group combine columns or groups into a new group

sorting sort sort data based on speciﬁed group

gridlines set spacing, enable, disable settings for horizontal or vertical grid lines

regions add, remove select intervals on an axis for side by side display

legend show, hide, set groups legend visibility and groups to be included

tooltip show, hide turn tooltip on or off

view area set zoom, set x, set y view manipulation (zooming or panning)

chart size resize resize the chart to a given height and width

chart rendering redraw, clear request a refresh or clear everything

for MindXpres. Since MindXpres is based on client-

side web technology we did not have to start from

scratch but could make use of existing visualisation

libraries. As a starting point we use Bostock’s Data-

Driven Documents (D3) JavaScript library (Bostock

et al., 2011) which supports complex data-driven vi-

sualisations through code. The library then uses the

widely supported SVG, HTML and CSS standards to

generate the desired visualisation. D3 is a powerful

solution offering control over every possible aspect,

but it is also quite complex to use since even a simple

static bar chart requires tens, if not hundreds of lines

of code (Bostock, 2013). For this reason, we also

use the C3.js JavaScript library

, a D3-based reusable

chart library that provides abstractions for most of the

common chart types out of the box. Based on C3’s

API, one can control the state of a chart such as focus-

ing on a data series, selecting data points, showing or

hiding the data series or updating the data. With these

features it is possible to change the chart in response

to events such as user input or temporal triggers.

The data to be used in a visualisation can be spec-

iﬁed in two ways. It can either be directly deﬁned

in the MindXpres XML language or an external ﬁle

can be provided. By default, D3 supports the load-

ing of data in plain text, JSON, XML, HTML, CSV

and TSV format. We extended this list of formats

with support for Excel spreadsheets by implement-

ing a compile-time trigger in the MindXpres plug-

in. The compiler converts any referenced spreadsheet

data to JSON and bundles it with the presentation

http://c3js.org

which makes it easier for the JavaScript plug-in to

process the data at runtime.

After providing a data set, the author can deﬁne

the visualisation’s starting state. This includes but is

not limited to setting a chart type, specifying which

parts of the data to show initially and conﬁguring

speciﬁc chart components such as zoom level, axes

or legends. Subsequently the author can deﬁne ad-

ditional visualisation states to match their narrative.

During the presentation, the author will be able to

step through these states and the plug-in automati-

cally applies the settings speciﬁed for each state. Note

that any part of the conﬁguration can change between

states. This includes the data set, chart type and other

parameters that cannot be changed in conventional

presentation tools. In order to hide the complexity

of the used D3 and C3 libraries, we provide abstrac-

tions for useful conﬁguration changes in accordance

to the interaction techniques provided by Yi et al. (Yi

et al., 2007). Table 1 highlights a list of abstractions

implemented by our prototype. These abstractions

make it easier for a presenter to deﬁne the transfor-

mations needed to get the visualisation to the next

desired state. Listing 2 shows an example of how a

visualisation and its states are deﬁned in the XML

language. In this case, the data is retrieved from an

external ﬁle but the visualisation states are deﬁned in

the XML language. Note that the data could also be

deﬁned in the XML document and on the other hand

the conﬁguration might be deﬁned in an external ﬁle.

In addition to predeﬁning the required states, the

presenter is free to apply unscheduled abstractions at

any point during the presentation. Some of the ab-

An Interactive Data Visualisation Approach for Next Generation Presentation Tools - Towards Rich Presentation-based Data Exploration

and Storytelling

129

Figure 2: Interaction menu at presentation time.

stractions are triggered with the mouse, for instance

by hovering over an element it is highlighted and

the corresponding tooltip is shown. Similarly, data

groups 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-intrusive

mouse actions. For this reason we have integrated an

interaction menu that allows the presenter to perform

any of the offered interaction abstractions during the

presentation as illustrated in Figure 2.

5 USE CASE

In order to demonstrate the beneﬁts of our interac-

tive data visualisation plug-in, we present a short sce-

nario that demonstrates how one can use the plug-in

to create a narrative visualisation. In contrast to exist-

ing presentation tools, a presenter only needs to create

one visualisation with one data set for which they de-

ﬁne a sequence of views that support their oral narra-

tive. This requires not only much less time and effort

than existing workarounds, but it also becomes eas-

ier to apply changes at a later point in time. In the

presented scenario, the goal is to compare the tax and

social burdens of salaried employees in the 27 mem-

ber states of the European Union. As a starting point,

a CSV ﬁle that contains the relevant data for 2014 is

used (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. Since

the presentation is delivered to a Belgian audience,

the presenter starts with an explanation of the tax sit-

uation in Belgium. At ﬁrst, a simple chart is shown in

Figure 3(a) with a blue bar representing the one euro

the employee receives.

In a next step, the presenter introduces the concept

of employer social security and adds it to the chart in

the form of the orange extension to the original blue

bar in Figure 3(b), in order to provide an idea of the

proportions. Note that the scale of the horizontal axis

automatically adjusts and now shows a linear scale

from 0 to the total costs of 1.6 euro so far. The same

procedure is repeated for the income tax (green) and

the employee social security (red), introducing one

item at a time in order to keep the audience focussed

on the explanations (Figure 3(c)). The exact values of

the different parts that make up the bar are shown in a

small table when the mouse cursor is hovered over the

bar. The presenter then transforms the visualisation

into a pie chart which shows the ratio of each part as a

percentage, revealing that an employee only receives

42.7% of what the employer pays (Figure 3(d)).

In order to get a better understanding of what

these values mean, the presenter switches back to a

bar chart and compares the Belgian and the average

EU employer costs side by side as illustrated in Fig-

ure 3(e). Next, to show the variation in employer

costs across Europe the presenter can scroll to zoom

out and show all countries in de data set side by side

(Figure 3(f)). By default the countries are ordered al-

phabetically and if the list is too long to ﬁt on the

screen, the presenter can drag the mouse up and down

to scroll in the list. Note that at any point the pre-

senter can zoom back to a single country, for instance

Cyprus, in order to explain why it is the country with

the lowest employer costs (Figure 3(g)). Finally, the

presenter decides to show the full list again, but this

time sorted by total employer costs in order to point

out the cheapest and most expensive countries from

the perspective of an employer as highlighted in Fig-

ure 3(h).

Note that even without the narrative, a viewer

might still derive the implicit messages that the pre-

senter would normally present orally (e.g. “Belgium

employees receive less than half of what the employer

pays”, or “employer costs in Belgium are very high

compared to the rest of Europe”). This is in line with

the ﬁndings of Hullman and Diakopoulos who state

that narrative visualisations can be designed to de-

liver predeﬁned implicit messages (Hullman and Di-

akopoulos, 2011). It further demonstrates the poten-

tial value of our interactive data visualisation plug-in

for viewers who review the slides after the presenta-

tion (e.g. students using the slides as study material)

as they can play back the sequence and come to the

intended conclusions without the oral narrative.

Listing 2 shows how this scenario has been de-

ﬁned in the XML-based MindXpres authoring lan-

guage. The illustrated XML snippet of course forms

part of a larger XML document deﬁning the whole

presentation. The infovis tag on the ﬁrst line tells the

CSEDU 2016 - 8th International Conference on Computer Supported Education

130

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

(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

An Interactive Data Visualisation Approach for Next Generation Presentation Tools - Towards Rich Presentation-based Data Exploration

and Storytelling

131

 

1 <infovis>

2 <data f ile = " t ax_ eu . c sv " >< /data>

3 <config>

4 <view>

5 <chart typ e =" b ar " v ari an t = " st ac ked " / >

6 <axis d im = "x " gr oup =" so ci alt ax " / >

7 <axis d im = "y " gr oup =" co un tri es " / >

8 <filter gro up = " c ou nt ri es " valu e = " Be lg ium "/ >

9 <show gro up = " s oc ia lt ax " s ub = " in com e " / >

10 </view>

11 <view>

12 <show gro up = " s oc ia lt ax " s ub = " se cu ri ty 1 " / >

13 </view>

14 ...

15 <view>

16 <show gro up = " s oc ia lt ax " s ub = " se cu ri ty 2 " / >

17 </view>

18 <view>

19 <chart typ e =" p ie " / >

20 </view>

21 ...

22 </config>

23 </infovis>

 

Listing 2: XML deﬁnition of visualisation states.

MindXpres compiler and runtime engine that our in-

formation visualisation plug-in has to be invoked in

order to process the child tags and render the relevant

content. Next, a data tag speciﬁes the data ﬁle to be

used by the plug-in. Finally, a list of visualisation

states or views are provided. By default the ﬁrst view

in the list will be used as an initial state, resulting in

the chart shown in Figure 3(a). The succeeding views

contain instructions on how to adapt the visualisation

for subsequent visualisation states. In this case, sub-

groups of data are made visible and since the chart

type is a stacked bar chart they will be added to the

relevant bars. When the author wants to switch to a

pie chart, the chart tag is used to set a new chart type.

Note that any settings from previous views, such as

the ﬁlter put in place to select only data from Belgium,

are still valid. In this case, axis settings are also kept

but are ignored as they are not relevant for a pie chart.

Nevertheless, it means that when we switch back to a

bar chart in a later view, the earlier axis settings still

apply. The rest of the states shown in the scenario are

achieved in a similar manner and are mainly the result

of applying ﬁlter and sort instructions.

6 DISCUSSION & CONCLUSION

We have illustrated the beneﬁts of interactive and nar-

rative visualisation for knowledge transfer and have

listed some well-established techniques for strength-

ening a viewer’s mental model. However, we iden-

tiﬁed that existing presentation tools such as Power-

Point do not exploit these principles to their full po-

tential. For instance, while different chart visualisa-

tions do support basic enter and exit animations, we

cannot make changes to the underlying data or visual-

isation parameters at presentation time which makes

it difﬁcult to use these charts for data exploration or

as narrative visualisation.

Based on established interactive and narrative vi-

sualisation techniques, we derived a set of require-

ments for interactive data visualisation in the context

of presentations. Our interactive data visualisation

solution has been implemented as a plug-in for the

MindXpres presentation tool. Furthermore, we intro-

duced a number of abstractions for useful interactions

and allow the presenter to use them to predeﬁne 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 abstractions

do not only support changes to the visualisation pa-

rameters (e.g. chart type or zoom level) but also en-

able the modiﬁcation of the underlying data (e.g. ﬁl-

ter or add data). Thereby, we ensure that interactive

visualisations for oral narratives can be created with

minimal effort. Finally, since MindXpres presenta-

tions can easily be shared and interactive components

are 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 as

well as scatter plots. These can be used to deliver al-

most all of the message types deﬁned by Few (Few,

2004) except geospatial information. In order to sup-

port every aspect of this classiﬁcation, we intend to

extend the plug-in with a geographical map view en-

suring that data can be rendered in relation to geo-

graphical locations. Similarly our solution currently

supports all interaction techniques deﬁned by Yi (Yi

et al., 2007) except for techniques related to the con-

nect principle, allowing viewers to show items which

are related to a selected one. As the similarity metric

heavily depends on the data and context, further in-

vestigation is needed to see how we can abstract this

particular interaction technique.

Last but not least, our plug-in has been devel-

oped in correspondence to the philosophy of the

MindXpres presentation platform and for now visu-

alisations are deﬁned via the XML-based language

shown in Section 5. Nevertheless, in the near future

we intend to add a graphical authoring component to

our plug-in. We see clear potential in using the same

interaction menu that has been shown in Figure 2 at

CSEDU 2016 - 8th International Conference on Computer Supported Education

132

authoring time. Ultimately, this could be paired with

some “recording” features that allow the presenter to

add the current state of the visualisation to the se-

quence of states available during the presentation.

We have presented a step towards rich

presentation-based data exploration and story-

telling. In a use case we further highlighted some

of the beneﬁts of our interactive data visualisation

prototype. The requirements that we derived based on

existing visualisation techniques might serve third-

party slideware vendors as a basis for improving their

products. While we decided to base the implementa-

tion of our prototype on the MindXpres presentation

platform, we believe that our ﬁndings are general

enough and might inspire other researchers to further

investigate interactive visualisation techniques in the

context of next generation presentation tools.

REFERENCES

Ahlberg, C. (1996). Spotﬁre: An Information Exploration

Environment. ACM SIGMOD Record, 25(4):25–29.

Austin, M. (2011). Useful Fictions: Evolution, Anxiety,

and the Origins of Literature. University of Nebraska

Press.

Bishop, J. L. and Verleger, M. A. (2013). The Flipped Class-

room: A Survey of the Research. In ASEE 2013, 120th

American 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 Value

to 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 Tables

and Graphs to Enlighten. Analytics Press, 2nd edi-

tion.

Fischer, M. H. (2000). Do Irrelevant Depth Cues Affect the

Comprehension of Bar Graphs? Applied Cognitive

Psychology, 14(2):151–162.

Gibson, J. J. (1962). Observations on Active Touch. Psy-

chological Review, 69(6):477.

Hullman, J. and Diakopoulos, N. (2011). Visualization

Rhetoric: Framing Effects in Narrative Visualization.

IEEE Transactions on Visualization and Computer

Graphics, 17(12):2231–2240.

Kosara, R. and Mackinlay, J. (2013). Storytelling: The Next

Step for Visualization. Computer, 46(5):44–50.

Parker, I. (2001). Absolute PowerPoint: Can a Software

Package Edit Our Thoughts. The New Yorker, 28:76–

87.

Robertson, G., Fernandez, R., Fisher, D., Lee, B., and

Stasko, J. (2008). Effectiveness of Animation in Trend

Visualization. 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 Uniﬁed Communica-

tion Platform for Enriching and Enhancing Presenta-

tions with Active Learning Components. In ICALT

2014, 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 Conference

on 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 The

Best 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 & Information

Technology, 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 Extensible

Framework 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, 2nd

edition.

Ware, C. (2012). Information Visualization: Perception for

Design. 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 Transactions

on Visualization and Computer Graphics, 16(6):999–

1008.

An Interactive Data Visualisation Approach for Next Generation Presentation Tools - Towards Rich Presentation-based Data Exploration

and Storytelling

133