I realized the project together with the talented Jan Willem Tulp, from who you surely will hear much more over the next few months.

A little technical note: The interactive graphics were all done in HTML5, with the help of the following great Javascript frameworks: raphael.js, underscore.js, d3.js. Except for the network visualization, all graphics run fully interactive down to IE6. #techachievement #lookma #noflash

The multi-touch installation Max Planck Research Networks reveals how Max Planck Institutes collaborate with each other, and with their international partners.

The piece is exhibited at the Max Planck Science Gallery, a highly interactive exhibition space presenting new forms of science communication in Berlin. You should come and visit it.

This is the first larger Java project I ever did, and it would not — at all — have been possible without Christopher Warnow from onformative, so thanks for for the great cooperation! (Big thanks go to the rest of onformative, too — to Cedric for the idea for the label placement algorithm and Julia for the great support with the documentation.)

Big thanks also to my colleagues at Elsevier and Max Planck Gesellschaft, who made the collaboration a real pleasure. I was also quite impressed with the overall project direction of Archimedes, who did a fabulous job of conceiving and realizing the exhibition space.

Beginning of this week, we launched a new project: the OECD Better Life Index, which allows you to compare 34 countries with respect to 11 different topics, ranging from Health, Life Satisfaction over to Jobs and Income. By choosing importance levels for these topics, you can actually brew your own country ranking and share it with friends on the web.

The visualization principle is simple: Each country is represented by one flower, one topic by one of its petals. The length of a petal indicates the score of the respective country in that topic (e.g. income in Germany). If we add up all scores, we get a toal score for each country. The higher the score, the higher the flower will rise.

The launch event itself was crazy, as the presentation of the site was the first point after the keynote address at the OECD’s 50th anniversary — and of course the site would go down 20 minutes before the live demo! But in the end, all worked out great, and we were able to sort things out and cope with the quite overwhelming demand on our servers. If you are interested, here is a video recording of what happened on stage.

Overall, it was great to see how the “flower virus” took over the event, from the booth…

… to wall decorations:

A memorable day for sure!

Btw, while I worked on the design and implementation of the visualization, the branding, web design and site production was handled by Timm Kekeritz at Raureif and Jonas Leist. And big props to the fantastic team at OECD, who fought like lions for our crazy ideas and managed to put together these huge amounts of content on the site in very short time.

I came up with a tree visualization, where Article for Deletion discussion is represented by a thread starting at the bottom center. Each time a user recommends to keep, merge, or redirect the article a green segment leaning towards the left is added. Each time a user recommends to delete the article a red segment leaning towards the right is added. As the discussion progresses, the length of the segments as well as the angle slowly decay.

In the visualizations, I tried to capture the tension between chaos and order inherent to the discussions, and provide a nice serendipity interface as well.

So much to learn about… …or… …and…

But also some more hard analysis can be found at notabilia.net, looking at the vote distributions, lengths of discussions, etc. Take a look yourself!

Propositional density

Let us start with the notion of a proposition: in this context, a proposition is simply an elementary, atomic statement about the object at hand. “The FedEx logotype is purple” and “The FedEx logotype is set in a sans-serif font” are propositions, and because they describe salient, perceptible properties of the design, they are referred to as surface propositions.

Now, the FedEx logo became famous for a perceptual trick: The white space between the E and the x creates an arrow. This arrow induces, by its semiotic reading, a number of additional associations and readings of the design: “FedEx is on the go”, “FedEx is forward-thinking”, etc. Note that these propositions, unlike the surface propositions, are much harder to enumerate as they depend on the meaning that the observer ascribes to the arrow. These are called deep propositions as they describe underlying and often hidden meanings of the design. You can think of an iceberg, where the surface propositions are over the water — easy to see and clear cut — but the much larger part is under water.

Now we have all elements together to define propositional density more precisely:

The propositional density of an object is the number of deep propositions divided by the number of surface propositions it conveys.

Note that there are two ways of increasing propositional density: Using fewer surface elements to convey the same number of deep propositions, or increasing the number of deep propositions per surface element. Also, we can see now why the FedEx arrow is so effective: It adds a high number of deep propositions without adding surface elements. It just emerges by clever arrangement of the surface elements; in fact, any Gestalt law has a great potential in this respect.

Generally speaking, good design usually has a high propositional density. On the other hand, if your propositional density is below one, you probably have superfluous, merely decorative elements in your design, which do not add to the deep reading.

Example: High altitude

We can use the image series “High Altitude” by Michael Najjar to illustrate some of these concepts. For this series of photographic montages, the artist used self-shot photos to assemble images of what seem to be natural mountain scapes on first glance…

… yet the sky lines are carefully crafted to match the development of major stocks and and indices. See for instance, the “dax_80-09″ image with an overlay of the DAX index development I added:

Clearly, a high number of surface features (and visual efforts) to express this simple type of data (one measure over time). Yet, I would claim that the high number of deep propositions associated with this imagery justify these efforts, and make the work an extremely rich type of visualization; possible associations include thin air, the borderline between earth and sky, the manifested history of processes, monumentality, man-made vs. natural objects etc.

Other works, like the “Global emissions” graphic published in GOOD magazine manage to establish a strong visual impression suited to the topic with simple visual means:

Finally, also a very sober visual style can yield rich experience by a clever combination of chart style and content; see for instance “Miracles in nature and Science”, a chart of the number of mentions of the word “miracle” in the renowned scientific journals “Nature journal” and “Science magazine”.

Note how the deep reading of the piece arises not only from the selection of data sources (and thus the title pun), but also subtle design choices like the chart axis ratio.

What does this mean for visualization?

A common truism about information visualization is that it is primarily about “showing the data”. I would like to challenge this view. While this might be true for scientific (or financial, or many other) application fields, there are many good uses of visualization that go beyond a precise, “neutral” display of data. In fact, most people I know are much less interested in data than they are in information. Information can be conveyed in many ways, and we have a rich tradition and cultural contexts that allows us to communicate beyond the surface level. For instance, in linguistics, there is a whole subfield called pragmatics that investigates what is said beyond the “surface meaning” of the sentence, based on the context, connotations, the inferred intent of the speaker etc.

Bottom line

Every designed object invokes multiple layers of interpretations and associations. It is not possible to produce a neutral design. In other words, there are always deep propositions involved. The shapes, the colors, the presentation form you use will always invoke associations. This has nothing to do with art, or “dressing up” data — the question is if you ignore this fact (and thus leave it to chance, if the deep propositions serve or contradict the intended reading) or acknowledge their existence and use them consciously. In my view, traditional infovis research has explored the surface propositions quite well — the next big challenge is to understand the associative, evocative character of our visual information vocabulary and use it effectively.

Addendum: While I have been pondering and editing this article, a first empirical analysis of implied dynamics in visualization has been published. Great!

So, we agreed on it and shipped it. Seeing it with the real data, however, made me wonder if I should have looked into typical rating statistics a bit more :)

Well. Lesson learnt. It is a nice little visualization nevertheless.

Which reminds me of an excellent article about how to prevent to uniform votes already in the interface.

As a bonus, here is a little remake using protovis with again, ridiculously few lines of code:

var data=[ ["05.11.09 17:01", 10, 10, 10, 10, 10, 10, 10, 10, 10] // .. etc .., see page source for full data ]; // pre-process data var processedData = []; data.forEach(function(d) { var o={}; o.date = Date.parse(d[0], "%d.%m.%y %H:%M"); o.dayDate = new Date(o.date.getFullYear(), o.date.getMonth(), o.date.getDate()); o.dayTime = o.date.getHours(); d.shift(); o.ratings = d; o.mean = pv.mean(d); processedData.push(o); }); // sort by rating processedData = processedData.sort(function(a,b) a.mean - b.mean); // result: // [{date:..., ratings:[10,2,3,4...], mean:6.7}, ... // set up visualization var w = 440, h =440; var vis = new pv.Panel() .width(w) .height(h) .left(20) .top(20) ; // encoders var color = pv.Scale.linear(0, 5, 10).range("rgba(255,0,0,.3)", "rgba(200,200,0,.3)", "rgba(0,90,0,.3)"); var angle = pv.Scale.linear(0, processedData.length).range(Math.PI1.5, Math.PI3.5); var radius = pv.Scale.linear(0, 10).range(100, 200); // A panel for each rating event var panel = vis.add(pv.Panel) .data(processedData) .left(function() w.5)
.top(function() h.5) ; // a wedge for each rating value panel.add(pv.Wedge) .data(function(d) d.ratings) .startAngle(function() angle(this.parent.index)) .endAngle (function() angle(this.parent.index+1)) .innerRadius(function(d) radius(d) ) .outerRadius(function(d) radius(d+1)) .fillStyle(function(d) color(d)) ; panel.add(pv.Wedge) .data(function(d) [d.mean]) .startAngle(function() angle(this.parent.index)) .endAngle (function() angle(this.parent.index+1)) .innerRadius(function(d) radius(d+.5) ) .outerRadius(function(d) radius(d+.7)) .fillStyle(function(d) "#000") ; vis.render();

The symposium »Living with Information: Architecture and Visualization« (October 16 , 2009 at FH Potsdam) will juxtapose experiences and results from the MACE project with thoughts and design approaches from practitioners in the fields of design, architecture and technology. Guided by five central questions, we will explore future trends in information visualization, the relationship of visualization tools and creativity plus issues like information over– and underload.

I am really looking forward to the unique speaker combination we put together:

• Miguel Cardoso from bestiario,
• Paolo Ciuccarelli from Politecnico Milano /density design,
• Georgi Kobilarov from FU Berlin / dbpedia,
• Norbert Palz (CV + info) and
• Andrew Vande Moere from infosthetics.com!

In addition, Prof. Boris Müller and I will provide a rear-mirror view and outlook of our activities related to the MACE project… A wide spectrum, but hopefully all held together by the central issue of the workshop and the five questions we prepared for the speakers.

Hope to see you there – register soon — space is limited!

On a related note, the Potsdam–based W3C office opens on the day before, which should be quite interesting, too.

X by Y visualizes all submissions to the prix ars electronica, from the early beginnings in 1987 up to 2009. The goal is to characterize the “ars world” in quantitative terms. A series of diagrams groups and juxtaposes the submissions by years, categories, prizes and countries. The graphics are composed of little dots (each representing a single submission) to provide a visual scale for the statistical statements and thematize the relation of the totality and the individual.

Their placement is computed with a Fibonacci series, imitating the arrangement of sunflower seeds – a very efficient and visually mesmerizing way of packing small elements into a large circle. Color distinguishes the submission categories, and a diamond shape marks submission that have been awarded a prize. The numbers in the center of the diagram elements are constructed by skipping points in the pattern – establishing a tight connection between the number and the individuals, but also demonstrating the duality of the two concepts.

The project is currently at display at the history lounge of ars electronica 09.

The project was done in cooperation with the Ludwig Boltzmann Institute for media.art.research. Find all diagrams and some more info here: X by Y. Also, don’t miss the other works on the poster over at vis.mediaartresearch.at.

At the moment, I am digging through a couple of databases for an upcoming project. I did not really find a tool to quickly get an overview over a large set of categorical data. So I decided to roll my own and write a little nodebox script that walks over a CSV file, determines all the unique value attributes, counts how often they occur and plots the output as an area chart. The tool is good for getting a quick overview of categorical data, esp. missing values and the data diversity.

Download the dbcounter script including a sample data set of the Titanic passengers. (needs nodebox — OS X only)

Sample pdf output

On a related note, you can also use the freshly released Parallel Sets application by Robert Kosara to determine relationships between the attributes. But that’s step 2 :)

On another related note, I cannot stress enough how awesome python is.