Processing & Javascript

I wanted to create a BabyName Voyager-type functionality, where changes to the view in the visualisation would change the URL and vice versa.

There are definitely improvements to be made, but this is the first pass at Processing & Javascript.

Eg: you can load the applet with 100 circles and a white background instead by adding the attribute to the hash.

We’ve been working on a datavis project lately, and needed this code for it — so watch this space: I’ll be blogging about The Data Visualisation Process very soon.

• Nominal (named/categorised): apples, oranges, pears
• Ordinal (ordered): small, medium, large
• Interval (measured): the interval between 2:30pm and 3:00pm is the same as the interval between 10:30am and 11:00am
• Ratio (measured, has zero value): 0 tonnes of apples, 40 tonnes of apples.

What makes the NOIR concept important is that it can define every data type.

Then, you have Mackinlay’s Automating the Design of Graphical Presentations of Relational Information, which defines representational types, and can also be described by NOIR.

Put them together, and you have Zhang’s A Representational Analysis of Relational Displays which matches the data structure (NOIR) with the representation (also defined by NOIR).

What does this mean? It means the best way to represent a nominal dataset is by giving it a hue, as opposed to making different sizes of circles. Why? Because people might interpret, say, that blueberries are 10 times better than apples since area as a representation communicates a ratio data type.

So what does this mean for information aesthetic visualisation? Well, some have argued that form follows data and that’s the end of that. That data structure alone defines representation.

But data isn’t just a structure — there’s meaning behind a dataset, there’s insights, trends, feelings, issues that it addresses, people it involves… and THAT should all go into the representation as well.

So these are Andrea’s (pending) Information Aesthetic Meta-Representational Considerations:

• Feeling (leave people with an emotion): you can delight them, make them sad, or disgust them: just make them FEEL something. We’re not a soma-fied Brave New World.
• Interaction & Animation (give choice, show perspectives): it’s unlikely you can fit all the attributes of your data into one neat, 2D screen-based representation, so use interaction: this means we can add representations like animation (shaking, swooshing, scaling, flying, dropping, hovering…) and hovering, clicking, dragging, scaling, rotating…
• Learn (collaborate): information aesthetic visualisations should be collaborative. Just like ManyEyes, people should be able to leave comments, screenshots of their insights and things they’ve found. The meta-data is more valuable than the data in many ways, and should be shared and tapped into.
• Meaning (intent): your data (for information aesthetic visualisations, at least) is trying to tell you something! What is it? Is it trying to tell you that the environment is going to shit and we should do something about it? Is it trying to tell you that people living close to growers markets cook at home more?

The issues of global warming aside, it was interesting to note the different approach that this film took to Inconvenient, especially how numbers were communicated.

Although we almost-unanimously praise the combination of infographics, photography, and commentary by Al Gore, I find Home equally, if not more, compelling to watch – yes, even without infographics!!

Why? Because:

• there’s a narrative; not just any narrative, but one which every person watching the film is a part of.
• seeing the actual impact of humans rather than a removed/abstract/conceptual line graph or chart is far more relatable
• being guided, having a stream of video plus voice-over lends more to the imagination. There’s something inherently different about watching a presentation versus a film.

There’s a very good paper out there by Dalbello & Spoerri (2005) Statistical representations from popular texts for the ordinary citizen, 1889–1914 which argues that representational visuals can aid communication to audiences through their strong relationship with everyday life.

I wonder all of this after realising that people need shitloads of explanation when you show them a datavis project or an infographic.

If everyone in the field argues that visual metaphor, abstract form that follows our perception, Gestalt theory, and understanding of user models of interaction can produce visualisations that are easy to use, familiar… then why is it so hard?!

People have to be ‘trained’ to use computer systems, but they shouldn’t have to for information aesthetic datavis. Instead, datavis must take qualities of well-designed products (a la words from Don Norman) and perhaps even the intuitiveness of art.

The data isn’t quite complete (there are about 300 missing suburbs that didn’t have matching postcodes in the data file I got from thsutton@geonames…like, postcode 3000 is missing!), but otherwise, it’s interesting!

Unlike Fry’s version, I’ve almost implemented search by suburb name, so you can search by postcode or name. Dur.

It’s buggy, I haven’t ‘designed’ anything, still have to fix a lot of stuff up, and it’s all nergh, but here it is anyway:

the Australian Postdecode.

At least I promise to keep track of the progress and process with this!

Some insights:

• The most popular starting-character is ‘B’ (1665 suburbs)
• There is a suburb starting with ‘X’ (Xantippe, 6609)

Honours Thesis – Information Aesthetics – A Model and Evaluation of Information Aesthetics in Information Visualisation

I don’t know why it doesn’t render properly in Preview; it just doesn’t…

And, yes, I’ve done this in lieu of blogging anything the last two weeks. Blergh.

1. Good Art Inspires. Good Design Motivates.
2. Good Art Is Interpreted. Good Design Is Understood.
3. Good Art Is a Taste. Good Design Is an Opinion.
4. Good Art Is a Talent. Good Design Is a Skill.
5. Good Art Sends a Different Message to Everyone. Good Design Sends the Same Message to Everyone.

I wonder: where would you insert information aesthetics? Would it replace art or design? (First disregarding the whole issue of what a ‘good information aesthetic visualisation’ is to begin with!)

1. Motivates: the point about effectively communicating a message is key here.
2. Interpreted or Understood? Information aesthetic visualisations should be firstly understood (through familiarity, intuitive interaction, etc) with an overall meaning, but be open to interpretation through interaction. This one is contentious because in many ways design can be interpreted, too. Heck, anything can!
3. Opinion: this one is dicey, too, but largely, it’s about opinion. I would say that subjective taste does play a part when you get into the less-familiar modes of representation, and people would still have taste-based judgements about colour choice and style.
4. Talent & Skill: definitely! You need to have an emotional connection to the data – an intrinsic ability to bring out meaning and insights – and what the visualisation is trying to communicate, but you need the know-how to effectively do this.
5. Different & Same: this is the same as point 2.

The most salient message here is that, if information aesthetics can replace ‘design’ in most of these instances, then it in fact becomes a part of the design and HCI fields. Ie: not the computer science or software engineering field which information visualisation comes from, and where a lot of people argue that it shouldn’t be anyway!

I KNOW! I did diss Information is Beautiful previously, but I like this one. (Which is odd, because there are comments about readability).

It shows how the design decision to make data close to its MEANING rather than its structure works! I mean, really, we don’t want to see that Poland is 2.4% closer to target than the Slovak Republic; all we want is a general overview: which countries are doing well, and which ones suck like…well, are doing badly.

So what makes this good?

• Representation: there is a familiar style: the style is – of course – like a dartboard, directly playing on ‘bullseye’ and immediately giving readers something to base their interpretation on.
• Information AND Data: the pre-ordering and categorisation of ‘Bullseye!’, ‘On Target’, etc, make it super easy to know what you’re looking at. It’s *information* not *data*! Why would you order this by country name, for instance (there aren’t that many data points to warrant that, even)?
• Textual Context: okay, so datavis should be about the data and the visual, right? True, but where textual explanations and descriptions help, they can do wonders, as in this case. The commentary makes it that much easier to understand.
• Feeling: the countries placed under ‘Fail’ have absolutely no hope in garnering any sort of sympathy from someone who has seen this. It’s sort of biased, yes, but if we don’t get people to feel things when they look at a visualisation, what hope is there that they remember anything?

Of course, there are a few tiny things. I would have made the target the red one, and maybe left the models of what a ‘good’/etc (but perhaps having the countries is good enough).

What’s more, there’s a little bit of process behind it, which makes it that much more interesting.

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.

Should we really listen to everyone in information visualisation? (Er, no. I guess that’s another post!)

What’s more, the accepted norms in information aesthetics really hasn’t been defined. Information visualisation has been around for yolks. The two fields are not the same. Sure, there’s overlap, but they don’t follow the same rules.  Let’s find the goal posts for information aesthetics, who we should listen to, (who we shouldn’t), and what we should be aspiring to be doing.

* I had actually titled this post ‘Let’s challenge the accepted norms’…but then I realised that there are not ‘accepted’ ‘norms’ in information aesthetics. dur!
* I promise this is my last meta-post.

It’s about moving up the data-to-wisdom hierarchy, not across it.

Let’s say that each visualisation project is a data point. Currently, some visualisation blogs out there reproduce data, ie: infosthetics and visual complexity, which is fine, because they provide a great one-stop-shop for (almost!) every datavis project ever done. (There is, however, information found in the categorisation of these projects).

On the other hand, you have Flowing Data, which moves up the hierarchy a little by presenting lists, grouping relevant visualisations, and introducing extra information not present in the data.

I’ll try my best to bring information, insights and knowledge rather than data.

*an illustration of data to wisdom.