Old news for you, if you follow me on twitter already (or read infosthetics), but here is a quick pointer to the interactive graphics for the Global Agenda Survey 2011 we launched last week for the World Economic Forum:

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

Science! Multitouch! Networks! All in one project! Can it be true? Yes, it can. Here it is:

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.

Just in time for Wikipedia’s forthcoming tenth anniversary (congrats!), two researchers – Dario Taraborelli and Giovanni Luca Ciampaglia – approached me for a cooperation on visualizing the discussions around article deletions on Wikipedia. The (intermediate?) results are online at notabilia.net.

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!

A couple of months ago, I came across a very insightful article with high relevance for information visualization: “More with less” in the always excellent ACM interactions. It made me think quite a bit, and might also help some to understand a designer’s approach to visualization a bit better, so here is the gist of the story (the following section mostly paraphrases the original article).

(more…)

Just a quick post to let you know that I put a new project online: revisit – a real–time visualization of the last few hundred tweets around a topic. In contrast to the usual twitter walls, it try to capture some of the temporal dynamics as well as the conversational aspects of twitter. Scroll down for customization options! Hope you like it — it will be at display at the see conference tomorrow, but for those of you who are not there, here is the live version so you can see what you are missing :)

In November 2009, I did a mini-project together with Boris Müller and the boys from raureif. My task was to create a visualization of the survey results of an event. The participants were asked to rate the events with respect to 9 questions on a scale from 1–10. As we did not have much time (nor budget), we went for the first good-looking idea available. What could that be? Right, a radial visualization (be damned, circles for non-circular data!). Anyways, I produced a quick funky mockup with random data: Each circle sector stands for one person’s ratings, and these are ordered by their average rating. For each single rating, I draw a semi-transparent wedge, with distance from center as well as color indicating the rating’s value. Special treatment is provided for the overall event rating (a more opaque, smaller wedge). For visual spice, a black spline connects all the average values of the ratings.

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: (more…)

I am excited to announce the following symposium at FH Potsdam:

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.

Here’s a new project of mine:

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.