Two and a half months after I started working for Golden Section Graphics in Berlin, we opened the doors to our fibonacciLAB. Here, we experiment with new technologies to design new ways of visualizing data. Read more about our intentions on our website!

On December 30, 2009, the German daily economy newspaper »Handelsblatt« published five unusual looking infographics made by Jan Schwochow (head of Golden Section Graphics) and me. Since it was the end of the year, the graphics were about numbers of last year’s/decade’s finances and some outlooks on this year/decade. Also, the title page featured a mashup of those single graphics.

The people at »Handelsblatt« had quite some chutzpah letting us go nuts with the mostly quite small data sets and the disproportionately generous space!

Read more about it on Golden Section Graphics Blog (in German).

Comparing numerical values by illustrating them as shapes, especially circles, needs to be done with the area in mind, not only a one-dimensional value that defines this shape. A circle is drawn with a radius, so another circle depicting a multiple of the value the first one is representing may not only have this multiple radius. It should have the corresponding area.

Another more extreme example showing how a circle with 25 times the radius can’t be a symbol for 25 times the size:

Found here.

Roland Loesslein (weaintplastic.com) created another interactive information graphic. It is called »The Human’s Development« and focuses on three aspects of it: health, education and living standard. On a world map and a ranking graph, nearly all nations of the world can be compared to each other. It uses data from the United Nations Development Programme (UNDP) and visualizes trends over the past few years. Plus, the user can take action by joining a GlobalGiving project to help people in less developed countries.

Just like »synoptic«, this application was created during a class about infographics by Prof. Michael Stoll at the University of Applied Sciences in Augsburg, Germany.

CDN: What inspired you?

Roland: I noticed there’s information out there I think it’s important everybody understands. It’s also crucial that the way it’s being communicated is understandable for lay people, too. This induced me to watch out for such data that — as I suspected — is only available in the form of tables and rather difficult to be caught up in its entirety. This was a call to wrap it up in a new notation that even those can use and understand who don’t usually deal with the details of this subject. Also, I was motivated by the fact that everybody is currently talking about the global financial crisis, but there is another global crisis going on for much longer now and probably will last forever if we don’t do something about it.

What were your research steps? Where did you get your data from?

In the beginning it wasn’t even clear to me that it was going to be about the human development. I watched out for data that that could be mapped onto a globe, something where information is available for all countries of the world. I found quite a lot of data focussing on environmental or financial issues that hasn’t been converted into an easy to understand representation yet. The one I used is about the human development and includes many aspects like health and education but also details about environment and finances, covering many interesting facts. The second step was to filter this found research results for what to visualize. I chose the information gathered from the UNDP and GlobalGiving.

The data you got from them was not formatted the way you could use it directly, I suppose?

That’s right, probably because the UNDP has more meaningful things to do than caring about processing and sending information to a student for free, I understand that. So I downloaded some annual reports and squeezed out the necessary raw data by writing my own parser for the tables and tweaking it manually afterwards. The people at GlobalGiving were totally amazed by my idea from the first approach on. Cooperation with them was a bit easier because not only they granted me access to their API, they also invited me to join their research group where I can use the project managing tool and do some brainstorming in the disussion forums. The API is usually for their own purposes only and kind of “private beta”, which is why it was still a bit hard to get lots of information out of it. In the end, merely the “take action” link and the number of projects are delivered by GlobalGiving, the rest is by UNDP.

Is GlobalGiving already registering more clicks coming from your app?

My application tracks itself how many clicks the „take action“ logo gets. But I can’t tell whether there are more people participating in their projects or more donations since it’s online. It’s a question of trust when you send money somewhere when you don’t know where it will arrive. But being too sceptical is old fashioned thinking. GlobalGiving has a very good concept regarding the way of constantly tracking where your money flows. You can choose exactly where it should go and get detailed feedback. I guess it’s only a question of time — even I would have to think a few days about it before donating.

Why build yet another tool for visualizing such data when there are already other ones like Gapminder World or CIA’s World Factbook?

Sure, Gapminder World visualizes similar facts and figures, but I see it more as a research and analysis tool for people who work with the data. I want to access a different target audience: the layman. The CIA World Factbook has basically the same problem when it comes to adressing people who don’t want to know every single detail. It’s more like a library that provides so many information so you have to spend very much time to get an comparing overwiev on one aspect. My application has this small newsticker-like notification field which gives the user some hard facts about the chosen country, each in one single sentence. This way, some rather surprising proportions between given numbers are formulated that otherwise are hardly visible, in tables for example.

What tools, programming languages and libraries did you use?

Adobe Flash, AS3, pureMVC, Tweener, Away3D, a database with AMFPHP connection.

How’s the feedback until now?

I get lots of mails, also it’s nice to see how it’s being pushed on blogs and Twitter. I get lots more traffic than with my last project »synoptic« and the average visiting time is very high.

You should follow weaintplastic and colorfuldata on Twitter.

Two weeks ago, the German weekly Newspaper »Die ZEIT« started a series of featured Infographics on three current topics.

The first one by Golden Section Graphics in Berlin (website here, blog here) is about virtual water. It explains the amounts of water used to produce things like beer, milk, cheese, jeans and a car by depicting cubes of water with the corresponding volume. This way, the reader gets a very good idea of how many liters of fresh water he actually comsumes by buying or using one of these products. Also, the graphic briefly explains how these amounts are being calculated as well as how much water there is on our planet and how it splits up into groundwater, atmospherical water etc. The daily consuption of one person per day and its parts for hygiene, doing the laundry and watering (among others) is revealed in a simple pie chart.

The first person on the moon 40 years ago is the occasion for the second graphic, and it has one big map of the moon with all sites where past missions, manned and unmanned, succeded or… well, crashed. A neat timeline on the left tells a story about the race to earth’s oldest satellite at the end of the 1960s between the United States and Russia. For many years, there were virtually no efforts for further explorations — the lunar surface was better charted than the earthly seabed. One possible future mission led by the US and planned for not later than 2020 is explained by highlighting a good location for a manned permanent moon station at the south pole. This is an in-house graphic by ZEIT.

The third graphic, published today, is about the evolution of the bicycle. In this case, the start of the Tour de France in two days is the occasion. A spiral timeline carries 11 detailed models and explains the inventions that made the bikes of today secure, comfortable and fast. The oldest one is from 1817 and it had no pedals, no brakes and was etirely out of wood. A second timeline explains other inventions with small illustrations, for example the penny farthing, the chain drive, rubber tires and aluminium frames. This graphic was also made by Golden Section Graphics (see No. 1).

The work »random walk« by Daniel A. Becker is a collection of several printed information graphics about randomness, a phenomenon that is difficult to explain.
It proves that Daniel took a really deep dive into the matter, considering how detailed his research resuls are displayed in his graphics and explained in the accompanied text. He approaches aspects like (pseudo) random number generators, the lottery and radioactive decay of atoms. The subject pervades the entire work, even each of his 14 double-sided A2 posters has a different layout.
All illustrations are not only drawn arbitrarily, they are simulated and plotted with the help of processing.

In her thesis on a work called »Fear Tuners — Protheses for Instincts« Susanna Hertrich writes about a wearable device that helps people to sense global and abstract dangers, be it a stock market crash or the rise of the oil price. It stimulates the autonomous nervous system to cause a state of increased awareness. Whenever stressful data is being delivered to this gadget, one can feel physically uncomfortable about it, although we lack the corresponding instincts.

I like the visualization of some exemplary fears we all know but mostly misjudge, for example of the consequences of environmental pollution, a plane crash or cancer. Susanna’s »Reality Checking Device« uses this graphic as well. I find the depicted information very interesting, although it consists of very few data. The mostly very big mismatch between how we use to feel about risks and the actual danger made me think. How about you?

image credit: Susanna Hertrich

Reality Checking Device – Screen Capture from susanna hertrich on Vimeo.

Synoptic is an experimental application for visualizing weather data in an unusual way, namely in 3-D. It can be explored interactively by choosing from the weather values, e.g. average temperature, wind speed, humidity and air pressure. There is a timeline for choosing the displayed period of time. This plus changing the viewing angle via mouse dragging is the basic navigation.

Roland Lößlein (weaintplastic.com), currently a student of the University of Applied Sciences in Augsburg, Germany, and a good friend of mine, created this application during a class about information graphics led by Prof. Michael Stoll. You can admire many other resulting projects in his “show, don’t tell. student’s work” Flickr set.

Roland won a Malofiej silver award in the category “innovative formats” at the 17th Infographics World Summit at the University of Navarra in Pamplona, Spain. Congratulations!

CDN: Roland, tell us something about the study course you’re in and the infodesign classes.

Roland: It is called Multimedia and it’s a combination of design and computer science. You learn coding and design basics at the same time. At the end, you can specialize in one direction, in my case it’s infomation design. Prof. Stoll’s class is being offered every semester for some time now, and it always has an general topic the participating students have to approach. Last semester, it was weather.

What was your train of thought that led you to create synoptic?

I decided very quickly to develop a realtime updated interactive online thing, even I didn’t have a clue what this “thing” finally will be.

How did you start off researching and developing? Were there any difficulties?

First of all I knew that I need a set of weather data that gives me access to high resolution measurements which I can use for my project. To find reliable source which keeps its data updated in short frequencies was a very hard job. After I  asked several weather stations for supporting me and checked out the popular API‘s for weather data I finally found a guy in Augsburg who was willing to give me access to his data. Because there was no other possibility to access the data, I quickly set up a database and wrote a html parser to prepare the given data for my needs. Since then I archive up to 1400 measurements a day which are updated every 15 minutes.

What was your motivation?

I had to decide what I finally want to describe and in which way I want to do this. After a few days of brainstorming and scribbling I had the idea to put weather out of its usual role. Weather should no longer be only of interest when people have to choose the right clothes, plan recreational activities or find topics on conversation. I want to call up the fascination for the dynamic and the complexity of weather and decided that it should be the main issue of my job, to motivate the user to recognize this.

So I have to find a visual language that is user-friendly and clearly interpretable but abstract and breathtaking at the same time to get the users full attention on it. It took a few weeks after I got some ideas and the prototypes working and finally came up with the idea to create a 3d landscape based on the meteorological data in realtime where the user is able to move through freely and can explore it on his own. Meanwhile he should be able to interact with it, find informations, changes several filters and the way the data is rendered

What were the tools you used for building synoptic?

I used Flash, ActionScript 3 and for those of you who are familiar with coding I developed  this thing using Paperversion3D and PureMVC and for the database remoting I used AMFPHP.

Tell us how to use your grahic as you intended.

When you start the application you will get straight into the visualization of the first measurements I could archived since October the 16th last year. In general the interface is separated into four areas. The timeline on the bottom of the page for to choose different time segments, the option panel for doing some filtering stuff, the navigation panel get an overview  on the effects of your interaction in 3d space and the visualization itself.

By default the visualized value is the temperature. You can simply choose another one by clicking on the combo-box and get the visualization of the luminosity, humidity or something else. The timeline shows two informations at the same time: the chronological sequence of measurements separated by the bars on the bottom and additionally by default the vertical length of the bars displays the the maximum of the chosen value of a certain day. You can change this setting by simply apply another operation on the timeline values.

The 3-D graph, the lines of which representing the chronological changes during a day of the chosen value, by default (as mentioned before) the temperature. You can simply select one day by clicking on its representer. On mouse over the user gets the information of the corresponding day. On click the day is getting highlighted and you can see single measurement points. I already mentioned that in the most cases I have access on up to 96 measurements a day but I simplified the visualization to afford clarity.

So this is just cool but you actually can’t see the real value at a specific time. So let’s see what happens when you click on a point. A small hover-tip fades in and you find a highlighted value in its list, which is the value of the temperature at this time, and can see all other available values too. You can close this hover-tip for now to see what happens to the second line which was
rendered after we clicked this point. The orange line simply displays the corresponding measure points of all other days. Now you can explore the change of the temperature over days and discover that it was warmer a few days earlier, for instance. So lets see what temperature you’ve got there. You may have noticed that every time you click on a line the corresponding bar in the timeline is getting highlighted.

To click on an a bar in the timeline is one possibility to reach days which are hard to separate from the others in the 3-D graph. Another possibility to reach the lines in the back for example is by clicking on the stage and drag the mouse horizontally. Then the graph is rotating around its center an you can change your point of view. To get an overview or reach more detail you just click on the stage again an drag the mouse vertically. When you combine this two possibilities of navigating in 3-D space you can easily explore the whole things very very quickly.

Now change the value of the visualization, for example to luminosity. Now the whole graph is rendered new and you can explore it in a way I mentioned before. If you want the visualization of another time segment, go down to the timeline and drag the scroll-pane to another point. If you want a larger time segment you can just drag the handles of the scroll-pane to the right or left. To access the data of a whole month just click and the scroll-pane automatically changes its position and scale.

There is one last feature I’ve built in. The user is able to change the temporal resolution of the timeline and the visualization. By default, each line on the graph represents on day. You can change this behavior by choosing another resolution, for example weekly or monthly measurements. Now each line represents a the whole month. this is especially interesting for values like the temperature.

Did you already get some reactions?

After Synoptic was available online, Computerlove.com, Infoaesthetics.com, Datavisualization.ch, Prof. Michael Stoll and many other people wrote a post about synoptic on their blogs and were accountable for great responses from people like Andrew DeVigal from the New York Times or William Couch from USA Today or the people from the USA Scholar Magazine who wanted to write an article about it.

What have you learned while implementing synoptic?

In my opinion Synoptic was an experiment on visualizing data in 3-D space supporting interaction. It has success in as many cases as it has not. Some features are working really good and do a great job but there are hundreds of things which I had to think about the next time and work it out in more detail. I even know that this project is a cutting edge thing and it might be impossible to use it for professional analyzation. But I think it is doing very well in things like experience and things like that.