Foto credit

Would the field of data vis benefit from a clear line between art and design, as Lisa C. Rost suggests (see also the follow-up post)?

This debate has been around for a while (see e.g. Lev Manovich’s Info Aesthetics, The Manifesto debate, the Cargo Cult debate, Jorge Camoe’s attempts, but also helpful papers like “The Role of Design in Information Visualization“ etc) and of course, there is a literally a century of discourse on art and design in other fields as well.

Here’s my take:

First of all, let me get one thing out of the way: the notion that aesthetics is about pleasure (“looks nice”) is a simplistic one.

Often, in these discussions, aesthetics is treated like sugar (or bacon?) on top of a perfectly fine working thing, which, when added, can somewhat improve the experience, yet, used in too high amount, actually spoils the dish.

This simplistic view ignores that aesthetic value goes way beyond pure pleasure or decoration, and arises from a couple of other factors, some of which are novelty, allusions, cultural references, unfolding of perceptual experiences… maybe something like “sensual and cultural intriguingness” could be a good alternate term.

In design specifically — per definition — aesthetic value also arises from a tight interplay of function and form. That “designer” chair that looks great, but is not comfortable to sit on? Not good design! It is simple as that.

Which brings me to my central point here: the misguided idea that aesthetics is somehow obstructive to understanding.

Granted, I have seen aesthetic data visualizations with zero informative value. But, likewise, I have also seen loads of non-aesthetic ones that are plain misleading or ridiculously hard to read; likewise, I have seen striking visuals which were highly informative and also fairly ugly or bland informative ones.

I have seen literally any combination of aesthetics and informativeness.

What if… these two are maybe actually independent dimensions, not arch enemies?

Let’s take this point further: what if there are actually many more dimensions of qualities a data visualization can have?

Here’s a few examples:

• How quickly do you get to insights?
• How deep are the insights gained?
• How memorable is the visualization?
• Does it use learned idioms vs innovative visual encoding?
• What is its impact? What do people do with it? What is their reaction?
• How much does it draw you in?
• Did you remember it two weeks later? Did you remember the key insights two weeks later?
• How much time do people spend with it?
• Is it for everyone or a niche group of people?
• Does it confirm expectations or present new insights?
• How complex is the information?
• What is the tone like?
• What are the cultural references it alludes to? In which visual tradition does it place itself? Does it use visual jargon?
• Does it make you laugh? Does it make you cry? How does it make you feel?
• Is the experience the same for everyone, or different depending on your choices or perspective?…

This is just a tiny sample of dimensions we could look at.

My main point here is, that each visualization will land somewhere in that point-space spanned by all these dimensions, and none of them are a priori opposed to each other.

And, in the end, the fact if it will be a good visualization will be determined by if the creator makes the right choices, in the given context, for the given audience and purpose.

This, of course, is a designerly way of thinking, but, you know what: I think, ultimately, it holds true for artists as well.

Honestly, I don’t care what a data visualization piece was “meant” to be. Let’s talk about what it achieves, on which levels, for whom, and how!

Is it a data visualization that “engages through a metaphor to raise awareness for a complex, important topic, is hard to get into on first sight, but then delivers deep insights for a small fraction of users”?

Or a “visual pun good for a 10 second view, designed to go viral”?

Or “clever appropriation of forms known from financial data to qualified self data”?

Or an “overaestheticized, sloppy treatment of run-of-the-mill data”?

TL;DR Data visualization is a medium. Let’s take it serious as a rich cultural form of expression and understand all the facets involved. Asking for a stricter separation of art and design (and promoting simplistic views of those disciplines) is not helping here.

If you travel across Germany, you will notice how some place name endings are quite universal, and others are quite specific, regionally. -ach, -ingen, -zell is a little exploration of those spatial patterns. It was a welcome opportunity to experiment with a few techniques I wanted to learn more about. Find the code with some remarks on github.

The eyeo festival and the community around it has a very special place in my heart. When Dave Schroeder announced the team was editing a book to celebrate the fifth anniversary, my immediate thought was to use this opportunity to follow up on an old idea, which I had been kicking around for a while (also with a few friends) — mapping the community around this arts-tech-creative-code-datavis thing.

What are the different niches in the community? Who is bridging the clusters? How do places, institutions, shape these communities, how do people influence each other over time? End of the day, I’d really like to have this big map of how the last 20 years went down in the field.

So, I took the chance and asked each eyeo contributor (speaker, panelist, lecturer…) from the past five years to name their most important connections in three categories:

resulting in the eyeo scenegraph network visualization:

The workflow for this one was quite complex – a python script to collect the data (took days, as the new twitter API allows only very limited access), layout calculations in gephi, svg export for manual tweaks in Illustrator.

But, it left me (and Golan Levin, who dropped by at my house one day :D) a bit unsatisfied: where are all the other people… Just focussing on the people on stage seemed inadequate for eyeo, where the visitors are sometimes more interesting than the speakers :D

Luckily, the eyeo team collected twitter handles from attendees! So I went on and created the eyeo crowdcloud:

A network map, showing 852 twitter accounts related to the eyeo festival. The network layout was calculated using gephi and brings more strongly connected accounts closer together. The size of the account labels corresponds to the number of followers in this network. Each line drawn is a followership relation. It is colored according to the followers color which is assigned based on the angular position on the map. As a result, accounts with followers from many different regions of the map look more colorful.

This one is much more dense and interesting from a “landscape” point of view — the different sub communities are represented quite well on different areas in the map, with colorful connectors in the center :)

Obvious “see also”: The resonet visualization I did for resonate.

And, here’s the best part — the visuals actually made it to the book — as cover and chapter visuals!

I am super grateful to Dave Schroeder and the team for this huge honor, and enabling me to give back to a festival that has been so important for me!

Now, my only drop of bitterness is that I’ll miss the festival next week… but there’s only so-and-so much travel I (and the family) can enjoy. I’ll be following on twitter! ;)

After many months — building your own sites is hard! — I am finally able to launch truth-and-beauty.net, my new portfolio site! It replaces the old moritz.stefaner.eu, which now lives at archive.stefaner.eu, as I was not able to (and probably won’t) migrate all old contents over.

A few notes on technology – I knew I wanted a static site generator, rather than a database driven site. Being able to sync, version control, move the whole site with normal file operations is such a huge win. After a few experiments with Jekyll, Octopress and DocPad, I finally settled for kirby. I really don’t like php. But I really like kirby. It is the only half-way sane CMS I know and working with it has been a breeze so far. Thanks Bastian!

The other thing I am really looking forward to, is the tutorial I’ll teach together with Dominikus Baur. We will look at all the practical aspects of producing successful web-based data visualizations — except the actual data vis code. So, we will discuss deeplinking, performance, shareability, help and explanations, fallbacks, mobile optimizations – all the stuff that makes great web applications really great, but which we all underestimate all the time.

Looking forward! Who else is going? Ping me!

PS: Maybe we should do a datastories listener meetup? Or something?

(click for zoomable version)

Shared tag space — a comparative visualization of the keywords people in five cities use to describe their selfies. The visualization displays a network of tags, cities and photos. The photos are used as bridges between tags and cities. Only tags that have been used at least twice are displayed with a text label. Bigger tags are used more often. The tags in the center constitute shared vocabulary across the cities, while the ones on the outside are more specific to one (or sometimes two) cities. The visualization was created as part of the selfiecity project, an interdisciplinary investigation of the selfie phenomenon.

Created with gephi, processing, Adobe Illustrator.

A few notes on a new, big project I have been involved with: The OECD Data Portal is now in public beta. It is still a bit rough around the edges, but we are excited to see the full website in its entirety. The main design credit goes to Raureif, and the UI implementation has been done by 9elements. I have been responsible for the chart design and specifications, and general data visualization strategy.

Unlike many of my other projects, this project is less about spotting patterns in the data, or communicating insights, but starts one step earlier: How can we actually make large collections of data sets available, and how can we guide users to the datasets they are looking for?

The design of the data visualizations reflects that purpose: Much emphasis has been put on responsiveness, the charts have flexible sizes and functionalities, depending on context – from full screen piece to tiny list element, all of our chart types will always look good and work well. Of course, responsiveness does not mean to draw everything smaller, but to think about reasonable functionalities for all sizes – for instance, moving the subtitles, title, and caption elements into little info buttons for small sizes, and dealing in a smart way with axes, grids, and annotations. Here is for instance, a full view of all the variations for the line chart: (click to embiggen)

.

A really nice effect of this strategy is that even small teaser charts are fully functional and dynamic:

Finding a meaningful slice of the data, and also highlighting individual countries is made very easy, as can be seen in this interaction prototype:

(Note how the visualization component reacts to the user settings – presenting a bar chart for a single year, slopegraph for two years, line chart for multiple years..

All charts are embeddable, too – even with custom country, time range, etc. selection. Here is a live version of the unemployment rates:

The maps feature a Dorling-cartogram-like optimization to avoid overlaps of the bubbles, but still place them as near as possible to their origin. And, of course, a proper map projection.

Finally, the country dashboard is probably my favorite piece of visualization on the portal, and features a nice mixture of custom as well as standard components.

But enough talking, give it a spin, and see if you can find interesting data to work with, there! It is a huge step for the OECD to make so much data available, and we are excited to see how all this will be put to use.

OECD Regional Well-Being: A new site for the OECD, and once again with my great collaborator Dominikus Baur and some help from my friends over at Raureif.

The site presents an exciting new perspective on more than 300 regions worldwide. As we all know, conditions inside a country can differ quite drastically, so going beyond the country averages presents an important step in the Better Life Initiative.

The user experience of the site is very consciously centered around the comparison of single regions in their context. Instead of presenting complex overviews, we start the experience with what people know best – their own home region. How does it compare to other regions in their country? And across all OECD regions? How have things developed over time?

The key visual element – the multi-colored star charts – represent the diversity of aspects we need to consider at when talking about regional differences. Each region receives a unique symbol, representing its particular well-being profile. This design principle was pioneered in the famous flower design of the OECD Better Life Index — which is part of the same initiative — and was now brought to a new logical extension for this new “family member”.

Reflecting your own region in context provides a natural starting point for further explorations. One particular option we offer is the “Regions with similar well-being” section, which suggests regions with similar indiator values all over the world. Who knew that Texas and Scotland are actually not that far apart, when it comes to well-being (well, except for the Safety aspect)? Or that Berlin has a similar profile as Alsace?

From a design point of view, the main challenge has been to deal with the complexity and scale of the data set. With ten indicators per region, most of which have also trend values, and 362 regions in the dataset, the site provides access to over 7000 data points. In designing the site, we made sure to introduce a hierarchy of information that presents the most important values values at a glance, but at the same always provides the context to a single data points that makes it meaningful, and reveals deeper information step by step.

Another detail we really like is that we added twitter and facebook buttons to all the auto-generated short factoid sentences, so you can easily spread facts you find interesting or surprising. Just hover with your mouse and wait for two seconds for the pop-ups to appear.

Here is a full region page in all its glory:

And finally — if you like the “no overview” approach, you should also definitely check out our datastories episode with Marian Dörk.

Now, go and find out how your region fares :)

PS: In case you would like to report on the project – why not use these crisp retina screenshots!

The Data Cuisine Workshop Barcelona was fantastic, we had a really great time.

Big thanks to my collaborators Dr. Susanne Jaschko and Sebastian Velilla, thanks to Jose Luis de Vicente and Olga Subiros for bringing us over, and last but not least for our great participants for the crazy dish ideas they came up with!

Check out the full documentation at data-cuisine.net. (And do get in touch in case you have ideas for other occasions where we could place the workshop – we love exploring this field.)

I am *ridiculously* excited to announce a new edition of data cuisine workshop. This time, it is the Data Cuisine Workshop Barcelona!

The workshop is happening in coordination with CCCB, the Big Bang Data exhibition, and Sónar. For the culinary side of the project, we will collaborate with Sebastian Velilla — a chef who has worked for the Alícia Foundation and is currently involved in the activities of the Torribera Food and Nutrition Campus of the University of Barcelona. And — it’s all happening in two and a half weeks (June 10-13). This. is. Crazy!

In case you are interested – register right now! (I expect things to move very fast, so be quick!)