What are the ‘best’ or most representative examples of information aesthetics visualisation?

It of course depends on your definition! So, first thing’s first: here was mine/our definition*:

Between the information visualisation research and visualisation art communities lies the emerging phenomenon of information aesthetics. Information aesthetics is proposed as a field which adopts visualisation techniques exhibiting both informational value and artistic meaning.

This definition was not plucked out of no where – it came together from knowing projects in the field and organising them in such a way to give us a ‘perfect’ example. (And knowing the field itself – see below for our existing models).

I wish this was more fully formed, but since this is blogging, I’m just gonna put it out there. =)

The Classic Information Aesthetic Visualisation: Baby Name Voyager

There’s a lot going for Baby Name Voyager, by Martin Wattenberg and his collaborator-slash-wife Laura Wattenberg.

• The data #1: it’s both wonderful for general overviews (the rise of names starting with ‘X’) and for specific detail (nope, no ‘Alain’s…)
• The data #2: it’s social, it’s about people!
• Representation: time goes from left to right, amount is stacked up, girls are pink, boys are blue: it’s familiar, and that’s why it works.
• The interface: the text input, buttons, clicking, etc, are all intuitive: everything that you expect to be a click, clicks. Everything that requires typing, types.
• The meaning: this visualisation is not just about an individual narcissistically looking up their own name; it’s about the trends you see on a mass scale. These trends reflect current affairs, natural disasters, things happening in the world, and the people who influence it. Coupled with a just a little bit of curiosity, people can link this dataset to the spike and steep descent of Paris, the parents out there who want their kidz to be different (or not), and other conclusions which may or may not be real!
• Design: it’s probably not as easy as it looks: the darkened ‘10,000′ mark, the relative brightness of each name, the thin, but discernable grey line between stacks. All design decisions, and all good ones.

Baby Name Voyager works because it’s a clear, intuitive interface mapping a socially relevant dataset, which elicits exploration and therefore, meaning.

(And, for the Aussies (no, not the shampoo), here’s the NSW version, 100 Years of Baby Names by Seb Chan and Greg Turner). (And the more recent addition, NameMapper).

The Missing Link Between Infovis and Information Aesthetics: Eigenfactor *

Moritz Stefaner is like the person who I could have been, if I weren’t as dumb, lazy, or too interested in television (not correlated).

All of his projects are ‘information aesthetic’ to some extent; and although perhaps lacking in ‘underlying meaning’, they all show how consideration of aesthetics, coupled with a deep understanding on infovis techniques, can bring engaging and insightful visualisations to life.

For instance, how much do you know about citations from scientific journals? Yeah, me, either.

So why is Eigenfactor so great?

• Data: this is a rich, multilayered dataset. We’re talking 60,000,000 citations over 9 years. Information aesthetics is about bringing underlying patterns to the surface, not presenting easy trends from a 10×10 table.
• Representation: this isn’t quite as simple as Baby Name Voyager is, but that doesn’t give artistic licence to an information aesthetic visualisation creator to do whatever s/he wants. Rather, Stefaner chooses exactly the right representations (be in a network graph, enhanced treemap or sankey diagram) for how the data is arranged (by links, category, time).
• Interface: making optimal use of hovering and clicking, the user knows exactly what they’re looking at, and what detail they can expect from the visualisation.
• Design: similar to Baby Name Voyager, there were design decisions made here that make Eigenfactor just *that* much easier on the eye, and therefore *that* much more compelling to interact with. The non-white background (less glaring), the soft palette (no default colours here!), the white transparent rectangles delineating year…

The importance of Eigenfactor is twofold:

1. For the infovis community: it shows exactly how aesthetics, and design decisions can be used to entice engagement and insight.
2. For the more ‘arty’ vis community: it shows how accurate and correct representation of data don’t take away from artistic choices, but actually add to the integrity of meaning.

The Importance of Data: We Feel Fine

We Feel Fine was one of the closest projects to the centre of our information aesthetic model (below). It hits a few points from the above two projects (but also perhaps misses a couple – I think the goal posts have moved a lot since that paper). The main feature to note about We Feel Fine takes four little letters to explain: data.

• Data: the data is dynamic and real and social and uncensored!
• Data: the data is about the individual, but also about a group.
• Data: the data is available for access via the API. (Getting into points about making data freely available and visualisation source code open source)

The data here defines everything else: the meaning (emotions of people, the vulnerability of the online community, challenging the ‘anti-socialness’ of online spaces…), the visuals (erratic, multicoloured, multi-sized dots/cells/entities), the ‘movements’ (defining/labelling/sorting people).

Lessons Learnt from Baby Name Voyager, Eigenfactor & We Feel Fine

1. Playing both sides: a great information aesthetic visualisation will take into consideration the correctness of representation (infovis field) while understanding how aesthetics, styling, and meaning influence design decisions.
2. Meaning: a great information aesthetic visualisation will leave people will a greater understanding of themselves and/or society: it’s not just about a pretty picture, or about facts, it’s about how you can communicate underlying, meaningful data insights to people.
3. Data: the data is the backbone behind everything: at a low-level, it determines the mapping techniques used, but at a high-level, it defines what issues need to be laid out and how they are conveyed. Thus: only interesting, relevant, data is to be used. (Depends on audience).
4. Interaction: information aesthetic visualisation isn’t a giant reflective pool – it’s a beautiful beach that people need to splash around in! This is the only way they’ll discover patterns and understand the crux of what is presented to them.

MODELS

In a previous paper, IV07 Towards a Model of Information Aesthetics in Information Visualisation, two models were discussed (I will glance over these):

1. Domain model, placing information aesthetics at the centre of a data + aesthetics + interaction mix.

Information Aesthetics – Domain Model

1. And a model defining visualisations according to their mapping technique and data focus (this is from 2007, so keep in mind all the funky new stuff that’s missing!!):

Information Aesthetics - Model

*Disclaimer: 99.99% of ideas here are mine only, but there will be some instances where I’ll be using ideas which Andrew and I discussed back in my research days.

* Yeah, I thought of another analogy.