I am much looking forward to speaking at decoded conference October 23 in Munich, along with Mario Klingemann, Massimo Manzi, the Generatives Design book team and many others. Thanks already for envis precisely and reppa.net for organizing the event, I am sure it is going to be a great little conference. I think it is wise to get your tickets now, as the first early bird batch has sold out rather quickly…

Also, I will be teaching smaller workshops at TU Dresden and HfG Schwäbisch Gmünd in late November.

As a little diversion, and because I found the data set quite interesting, I made a little visualization of WNYC’s Map your moves dataset.

A little tree navigation I did for the organic edunet portal.

Update: revisit will be on display at the alphaville festival in London later this month.

Generally, I am really behind on documenting projects (Skype, dpa, …), but I hope I can catch in the next few weeks. One reason is that I would love to unify my two sites into one smart wordpress portfolio system, but this will take a while… Anyways, good to be back and see you around! Did I miss anything? ;)

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!

In the past, I have profited immensely from using open source projects, foremost flare, but also many other libraries. I would like to give something back by open sourcing my favorite toy, the Elastic Lists project on github: github.com/MoritzStefaner/Elastic-Lists.

Have fun with it! Please keep in mind I am not a developer by training and these are side projects. Especially excuse the sketchy documentation. So if you start working with the code, and run into issues, feel free to file bug reports or add questions to the FAQ.

Heck, and while I am at it, why not publish revisit as well: github.com/MoritzStefaner/revisit

“Beautiful Visualization – Looking at data through the eyes of experts” is out (at least the ebook edition). I am proud to be among the authors, along with giants like Aaron Koblin, Fernanda Viega and Martin Wattenberg, Jer Thorp or Jessica Hagy. I mostly flipped through the book up to now, but from what I can see, it comprises a great collection of case studies and reflections by practitioners from the field. So if you always wondered about the stories and considerations behind great visualizations, this could be a very useful resource. My chapter deals with the process behind X by Y, and is available as a pre-print download (2.3MB pdf). I would love to see this book printed, too — if you feel the same, why not pre-order the print edition to speed up the process?

Also noteworthy: All royalties from this book will be donated to Architecture for Humanity.

In its five years of existence, the see conference managed to bring quite a few of the most exciting speakers from design, art, architecture and new technologies on stage to talk about their perspective on information visualization.

This year’s conference takes place on April 17, 2010 at the Kulturzentrum Schlachthof Wiesbaden (Germany) and features the following line-up:

• Gideon Obarzanek, the founder of Chunky Move, an Australian dance company known for “genre-defying dance performance”
• Joshua Prince-Ramus, President of REX, a cutting-edge architecture firm
• Nicholas Felton (feltron.com), a New York based information designer, co-founder of daytum.com and probably best known for his personal annual reports
• Hannes Koch from rAndom International, a London-based art and design collective
• Kent Demaine from OOOii, who design future interfaces for Hollywood and, among others, brought us the visionary interface design for Minority Report
• and amystery keynote speaker. (I love mysteries!)

Some tickets are still left, but not terribly many, so better register sooner than later. For those of you who cannot make it, there will be a live video stream of the event, and archived video recordings later. The recorded talks of the past conferences are well worth a visit too, with speakers ranging from Casey Reas over Carsten Nicolai to Stamen’s Eric Rodenbeck, Ben Fry, Zachary Lieberman and many more.

Everybody complains that art, design and research in information visualization should be talking more to each other.

Here is a unique opportunity: Andrew Vande Moere and I will be hosting a symposium at IV10: DAVis, the 5th International Symposium on Design and Aesthetics in Visualisation.

From the call:

“This symposium aims to bring together researchers and practitioners of design, art and related disciplines. The goal is to share their stories and experiences on how the needs and goals of both users and businesses are met through information visualisation.

It supports the publication of research in two general domains: Design and Aesthetics. Design refers to the development of visualisation as a creative design process. Aesthetics refers to the role of user experience in visualisation, as understood in three distinct components: aesthetic experience, experience of meaning, and emotional experience.

This symposium presents an opportunity to explore these issues and their consequences for the field of information visualization. In particular, we encourage the submission of design critiques; case studies, possibly with accompanying evaluation studies or critical reflections; position papers; or reports on the impact that visualization research or visualization use has had on the work and life of people. In this context, the story of failures or abandoned approaches can be as informative as descriptions of success. The fields of application are open, and can reach from traditional screen-based graphs, over innovative multi-touch interfaces, to dynamic media architecture displays.”

So — designers, coders, artists, visualizers — go forth and write!

Update: make sure to check out the submission requirements and procedure up at the IV main page.

Beware: the deadline is tight: March 1. March 21 But honestly, you would not have started earlier, anyways — right? Feel free to get in touch if you have any questions, and we are really looking forward to your submissions.

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();