Visual Data Stories

Visual Data Stories

“A map is not the territory it represents, but if correct, it has a similar structure to the territory, which accounts for its usefulness”. What this means is that our perception of reality is not reality itself but our own version of it, or our “map”.

Alford Korzybski

Aim
The aim of this work will be the exploration of storytelling as design technique to enable effective and efficient communication with interactive data visualizations. I want to analyze[MA1]  how it can help to make sense of large, complex data sets and how this, putting it in a bigger context, can support a democratization process and encourage development and research in societies. My theory[MA2]  is that visualizing data and so story telling will become one of the core media competencies in the 21st century.
At the same time I want to elaborate where dangers lie in visualizing and presenting such data in an apparently objective way. In this context I want to have a look at the role of future information and the interaction of designers’ responsibilities and what they can learn specifically from lessons of storytelling in traditional media disciplines like movies, theater or even operas[MA3] .
Based on this research I want to tell a story myself and demonstrate the particularities of storytelling in interactive visualizations involving graphic, interaction and partly even aspects of motion design.

Objective
My objective is to compare various recent visualizations and present this comparison in an online documentation in a schematic overview as Segel and Heer  ( 2010, p. 6) did.
As a second step this schematic could be visualized itself in an understandable and accessible manner and it could set the ground for my own storytelling concept, which would be applied to a specific, yet still to be defined, set of publicly available data.
By analyzing these public data, combining them and doing some experiments I hope to discover an interesting narrative aspect and evaluate alongside the role of storytelling in data visualization.
My theory is that the visualization of public data in combination with storytelling can lead to a more democratic society. Being aware of public data and understanding them allows citizens to have a better understanding of what is happening nearby and around them and to form a clearer opinion based on facts. It can lead to a more transparent view of a city (or any other administrative entity).
On the other hand it can also support very pragmatic improvements, if for example public transport being visualized and used as a time-management tool.
By combining “dry” data with other, even rather social and emotional aspects, these solutions could have an effect on how images of places and cities are created, for example by conveying some sort of social or even community awareness. Community awareness describes the feeling of being part of a group or a community mediated just by looking at data of other people’s behavior. Communicating such behavior in an aggregated way to individuals can lead to an awareness of being part of a bigger social group.

How do people feel when being on the Underground at 7 am in the morning compared to eventually more happy people on the bus at the same time?

Playing with these data can lead to new views. Communicating these views requires putting them in context and to develop a narrative. This is where storytelling can come to effect as a communication technique.

Keeping this communication transparent and ethical is in my eyes the future role of the designer.
More concretely this means public data, at least in the western world, are available for many cities, like Berlin, London or even Portsmouth, as you can see in these examples:

• http://daten.berlin.de
• http://opendatacommunities.org/data
• http://opendatacommunities.org/dashboard/local_authorities/unitary-authority/portsmouth

 

I will use Processing[MA4]  tool (processing.org) to visualize a specific selection from Berlin’s data. Processing is a tool which allows one to compute without the need to take care of technical frameworks. However it produces stand-alone applications, which can hardly  be shared online.
I will not write a code from scratch. Much more I will create mash ups of existing code.

The book “Generative Gestaltung” for example provides code examples (Lazzeroni, 2009: p. 417) which allow one to visualize data from folders on a personal computer.
I modified this example slightly and in the example below you can see a visualization of my desktop.
At first glance my desktop looked pretty clean to me. But when I visualized it I realized that I created many cascaded subfolders which link pretty deep and evolved in a pretty complicated structure on my computer (see IMG 1).

 

IMG 1: My own desktop visualized with the help of
code from “Generative Gestaltung”

With a similar code I visualized how Wikipedia Articles are linked, outgoing from the term “storytelling” I visualized connections between the articles.

IMG 2: My own search for storytelling on Wikipedia visualized

These are nice examples of how data visualization can help to gain insights[MA5]  into hidden aspects of complex data . However, these are just techniques and we cannot call this a design story yet.

I am planning to involve potential users in my design process by doing basic research beforehand in the form of an online questionnaire to find out how interested people are in public data and which data sets interest them really in their daily life. Which problem could be solved with a data story?
This research needs to be further specified and is not elaborated on in this proposal yet as it depends on the finally selected data set.

Background
Due to modern technology more and more volumes of complex data become available and it is the task of Designers to find appropriate yet still aesthetic ways of displaying these data in strong collaboration with experts. A data designer’s task is to make use of graphical metaphors to display abstract data sets and to present data in a way which illustrates inherent patterns and structures to allow us to make sense out of these big data.

 

As already indicated, I believe in this lies also an ethical aspect. It is impressive how aesthetic pictures create a certain perception and award a certain authority to the visualization of data.

A good example can be seen in the friendship map (IMG 3). This map shows friendship connections on Facebook around the world. What fascinates most of us in this picture is the strong visual impression it provides.

 
IMG 3: Friendship map

 

Now, if we compare this image with the War room in Kubricks movie Dr. Strangelove  (IMG 4) we can see a pretty similar graphic in the background and understand what an impact this graphic has.

 

 

IMG 4: Kubricks war room in “Dr. Strangelove”

In this impact lies however a big danger which becomes apparent when we look at another well known example: The world map.
In Europe we all know and grew up with the map as displayed in IMG 5.
We assume that the display of the map conveys a true and objective image of the world.

 
IMG 5: The world from a European perspective

 

But there is a way to look at this map from a completely different perspective. One of them is shown in IMG 6, an equally valid model of the world.

 

IMG 6: Hobo dyer – presentation of the world

 

If we are looking at this representation than it becomes apparent that behind every visualization there is an idea and a very specific perspective which always can and mostly should critically be questioned. But sometimes this is not possible as our brain is wired in a way to make conclusions fast. So-called unconscious conclusions, a pre-rational mechanism in visual perception which according to Frey ( Frey, 2010, referenced on Wikipedia) follows its own and unchangeable rules. Frey describes the sun as a very vivid example for this phenomenon. When we see the sun rising and setting we would never believe that we fly around an empty space on an old huge rock circling around a radioactive fire ball. Yet we know it and still can hardly believe it as the image is extremely strong and we are sure that the sun is circulating around the earth. The reason for this lies in a neurophysical aspect of how our brain processes visual information, which does not involve the centers in our brain which are responsible for conscious information processing. Explaining this issue would again exceed the scope of this work and I refer to the book of Sigfried Frey: “Die Macht des Bildes”. Even though these cognitive processes play a big role in information visualization I want to focus in this work on its implementation in Storytelling for Interaction and Visual Design and not on the basic ground research.

An example for a powerful and useful information visualization is provided in the famous example displayed in IMG 7. John Snow mapped where people died of cholera in London’s Soho and he found out that a water fountain was contaminated with Cholera as many people died in this area. By closing this fountain, the epidemic ended.

 

IMG 7: Cholera map by John Snow, London, Soho, 1854

 

Another good and mentionable example is provided by Otto Neurath (IMG 8)
He managed with very simple implementations of selected data sets to communicate certain statements.

 

 

IMG 8: Simple communication of data sets by Otto Neurath
As already indicated at the beginning of this chapter, Communication is just one side of data visualization. On the one hand there is exploration. The viewer of visualizations can himself be explorative and discover data sets and he should be supported in his cognitive abilities to discover pattern in data.

 

One example for this is the classical film Finder (IMG 9) created by Ben Shneiderman. This example may appear ugly from a today’s perspective, but it was one of the first professional visualization tools which included a timeline. It was created as a tool for experts.

 
IMG 9: Created by Ben Shneiderman

 

Later designers started investigating in this field and started creating similar but aesthetic tools, like the Newsmap (IMG 10).

 

 

IMG 10: Newsmap on www.newsmap.jp

Nowadays there are many attempts how visualizations can be used so that

non-experts can visualize data. ‘Many eyes’ [MA6] was a pioneer in this field.

IMG 11: Many eyes, created to visualize
data sets on your own as a non expert

 

 

 

or nowadays an application like infogram (IMG 12):  

 

IMG 12: Similar to many eyes, yet more

consumer-oriented
Another very well known example for good data visualization in explorative environments is represented by “Gapminder”.

Gapminder became very famous through a Ted talk as Hans Rosling managed to tell stories with his data by animating and framing them in a certain context. He presents data “With the drama and urgency of a sportscaster” ( Rosling, 2007)

 

IMG 13: Hans Rosling tells stories with interactive visualisations

 

Storytelling seems to be a very effective and efficient way to communicate data.
Widrich elaborates in his article how our brain reacts to stories ( Widrich, 2012).

He gives the example of what happens to our brain if we see a list of bulletpoints: The part of our brain is activated which turns word into meanings, and that’s it!
However, if we listen to a story, so Widrich, the same parts in our brain become active as if we were experienced the story ourselves. So in a way, as he says, we can synchronize our brains.
Recent research has shown that this effect might be based on the so-called mirror neurons ( Mirror Neurons, Wikipedia, 2013). Mirror neurons allow a deeply rooted physio-biological process that can even be observed with babies and some animals (see IMG 14). It allows us to produce similar feelings and reactions when being confronted with certain perceptual stimuli.

IMG 14: A baby monkey seems to react to a human. Recent research has shown that this might not be a reaction but an imitation as mirror neurons provoke a certain cognition in the monkey brain.

In a way we can say that visualizing data and putting them in the context of a story allows us to create a human face of big and complex data.

Storytelling, as Tumminello elaborates (Tumminello, 2005: p. 2), so the visual flow of a narrative, is a relatively new concept but visual storytelling as such is not. Cavemen in the Stone Age had already used this technique, only with drawings on walls and without any motion or text. While movies and pictures are linear, interactive data visualizations are not. As a user interacts with a story he gets involved and becomes part of it. For this reason a good Interactive Information Visualization does not only provide visually appropriate and aesthetic design, clear data structures but also a superb Interaction Design. The beauty and aesthetics of Interaction Design as described by Jonas Löwgren (Löwgren, 2007: p.70)  is a key aspect in Story telling with data visualizations.

So the combination of a story with clean design on both a visual and interaction design level, can be considered as a major aspect of storytelling.

In the end however we can say the design of the medium is not central in this aspect. A good story works without and independently from the medium. It therefore might be worth looking at classical techniques of storytelling in Film, Theater and Literature.  The three story act (see IMG 15) is for example a way of how a story can be structured.

I believe for this project it is worthwhile to elaborate on these classical techniques in order to translate them in animated, interactive and modern Interfaces for Big Data.

IMG 15: Three story act.

References from Books and Articles

Bohnacker, H. Groß, B.  Laub, J., Lazzeroni, C. (2009). Generative Gestaltung.

Mainz: Verlag Hermann Schmidt Mainz GmbH & Co. KG.

 

Frey, S. (2005). Die Macht des Bildes. Der Einfluß nonverbaler Kommunikation auf Kultur und Politik. Bern: Verlag Huber.

Klanten, R., Ehmann, S., Schulze, F. (2011). Visual Storytelling. Inspiring a New Visual Language. Berlin: Gestalten Verlag

Löwgren, J. (2007). Pliability as an experiential quality: Exploring the aesthetics of  interaction design. Artifact, 70-82.

 

Tufte, E., (1990). Envisioning Information. Cheshire, Conneticut: Graphic Press

Tumminello, W. (2005). Exploring Storyboarding. Toronto: Thomson Delmar Learning.
References from the Internet

Frey, S. (2005). Unbewusster Schluss.
Retrieved Jan 24, 2013, from the Wikipedia: http://de.wikipedia.org/wiki/Unbewusster_Schluss

Rosling, H. (2006). Stats that reshape your worldview.
Retrieved Jan 24, 2013, from the Ted Talk Website: http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html?qtwh=true&utm_expid=166907-16&utm_referrer=https%3A%2F%2Fwww.google.co.uk%2F

Segel, E. Heer, J. (2010)
Retrieved on Jan 23, 2012, from:

http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf

Unknown.(2013). Mirror Neurons.
Retrieved Jan 24, 2013, from Wikipedia: Mirror Neurons http://en.wikipedia.org/wiki/Mirror_neuron

Widrich, L. (2012). What listening to a story does to our brain.
Retrieved Jan 24, 2013, from the Buffer Blog: http://blog.bufferapp.com/science-of-storytelling-why-telling-a-story-is-the-most-powerful-way-to-activate-our-brains

References for Images

IMG 1: My own desktop visualized
IMG 2: My Wikipedia request visualized

 

IMG 3: Friendship Map

http://expertlywrapped.files.wordpress.com/2010/12/facebook-friendship-map.jpg?w=500&h=248

IMG 4: Kubricks war room

http://goo.gl/gVxIG

IMG 5: The world map

http://www.ezilon.com/maps/world-physical-maps.html

IMG 6: Different view of the world

http://www.mtmlinguasoft.com/newsletters/images/enews_may_2008_Hobo-Dyer.jpg

 

IMG 7: John Snow, Cholera

http://upload.wikimedia.org/wikipedia/commons/2/27/Snow-cholera-map-1.jpg

 

IMG 8: Otto Neurath http://entdinglichung.files.wordpress.com/2010/08/neurath_arntz_2.jpg?w=640&h=425

IMG 9: Ben Shneiderman, Film Finder

http://www.infovis.net/imagenes/T1_N148_A4_FilmMichele.gif

IMG 10: News Map

http://newsmap.jp/img/newsmap_2.jpg

IMG 11: Many Eyes,

http://www.bewitched.com/manyeyes/many-eyes-browse490.png

IMG 12: Infogram, Screenshot taken from http://infogr.am

IMG 13: Hans Rosling, Gapminder,

http://www.gapminder.org/GapminderMedia/wp-uploads/images_front/gapminder_home_bg_3.jpg

IMG 14: Baby Monkey, Mirror Neurons

http://upload.wikimedia.org/wikipedia/commons/1/1f/Makak_neonatal_imitation.png

IMG 15: Three story act,

http://jordanmccollum.com/wp-content/uploads/story-three-acts.png