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 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
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
Copyright
c
2016 by SCITEPRESS Science and Technology Publications, Lda. All rights reserved
123
time and effort or the presenter has to use some third-
party tools during a presentation, interrupting the flow
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 predefinition 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, filters 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 predefined 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 field
that identified 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 field of information visualisa-
tion tries to exploit these findings in order to facili-
tate knowledge transfer. Few (Few, 2004) proposes
a classification 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 significance 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 first 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 filtering) which
resulted in the categorisation of frequently used tech-
niques in information visualisation. One of the widely
accepted classifications 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
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 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 classification 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 predefined by the presenter, mes-
sages and conclusions are explicitly mentioned and
the audience has little to no influence 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 confirms 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 specific messages during free
exploration. For instance, Hullman and Diakopou-
los (Hullman and Diakopoulos, 2011) identified a
number of approaches and design techniques to
prioritise particular interpretations in visualisations.
These findings imply that narrative visualisations can
be designed to deliver a predefined 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 final 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 define 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 predefined sequence of states and there is no
way to deviate from this fixed path. While it can be
desirable to predefine a path through the data, it might
also be beneficiary to have the flexibility 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 configuration 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
modifiers to the information or configuration that de-
fines the graph. For example, we cannot just switch
to another chart type, change the scale of a graph or
filter out specific values as a step in the animation.
There are third-party plug-ins (e.g. oomfo
1
or think-
cell
2
) 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
3
or Prezi
4
.
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), Spotfire (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 flow. 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-
nificant 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
5
for the Java programming lan-
guage or the popular D3
6
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.
1
http://oomfo.com
2
http://www.think-cell.com/en/products/
3
http://www.apple.com/mac/keynote/
4
https://prezi.com
5
https://github.com/prefuse/Prefuse
6
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 difficult 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
7
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 definitely 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 specific topics re-
lated to human development which implies that the
data sets are fixed 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 defining 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 difficult if not
impossible to be applied as tools for narrative visual-
isation.
3 REQUIREMENTS
Research in the field of information visualisation and
7
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 specific 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 flow.
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 beneficial 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 efficiently. 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
classifications 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 classification 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 predefine 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 filter
on the data) and to change the data representation
(e.g. by switching to another chart type). By allowing
the presenter to define 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 predefined 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 defined 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 flipped 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 difficult 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 defined in a
XML-based declarative language similar to the L
A
T
E
X
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 specifically,
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 specific elements
visibility show, hide showing and hiding specific 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
filtering apply filter, remove filter apply or remove filter to data
selecting select, unselect selecting or unselecting data
representation set chart type transform visualisation to a specified type
grouping make group combine columns or groups into a new group
sorting sort sort data based on specified 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
8
, 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-
ified in two ways. It can either be directly defined
in the MindXpres XML language or an external file
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
8
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 define
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 configuring
specific chart components such as zoom level, axes
or legends. Subsequently the author can define 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 specified for each state. Note
that any part of the configuration 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 configuration 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 define 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 defined in the XML
language. In this case, the data is retrieved from an
external file but the visualisation states are defined in
the XML language. Note that the data could also be
defined in the XML document and on the other hand
the configuration might be defined in an external file.
In addition to predefining 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 benefits 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-
fine 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 file 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 first, 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 fit 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 findings of Hullman and Diakopoulos who state
that 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-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-
fined in the XML-based MindXpres authoring lan-
guage. The illustrated XML snippet of course forms
part of a larger XML document defining the whole
presentation. The infovis tag on the first line tells the
CSEDU 2016 - 8th International Conference on Computer Supported Education
130
(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
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 definition 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 specifies the data file to be
used by the plug-in. Finally, a list of visualisation
states or views are provided. By default the first 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 filter 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 filter and sort instructions.
6 DISCUSSION & CONCLUSION
We have illustrated the benefits 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-
tified 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 difficult 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 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 abstractions
do 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 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 defined by Few (Few,
2004) except geospatial information. In order to sup-
port every aspect of this classification, 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 defined 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 defined 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 benefits 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 findings 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). Spotfire: 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 Unified 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