PricewaterhouseCoopers (PWC) published an infographic in their customer magazine, which was made by Golden Section Graphics. For this, I programmed two small applications: one converted a world map into a differently projected one (Fuller Projection). The other one generated te surrounding triangles for any countries of the world and the included bar charts. The represented values are specific indexes for the nation’s sustainability.

First, the whole thing is a poster. But one should really cut the world map out and glue the edges together, because you get a very nice paper globe! Read more on the fibonacciLAB website.

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.

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.

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.

Yesterday we returned from Spain where I attended the SND Infographics World Summit at the University of Navarra in Pamplona.

By “we” I mean me and 5 students from the University of Applied Sciences Augsburg in Germany. I myself graduated there a few weeks ago and was a student of Prof. Michael Stoll. One of those students I traveled with is Roland Lößlein, who won a silver award for his experimental weather visualization called synoptic.

Chiqui Esteban did a great job on listing all the winners with many examples of their work on his infographic news blog. I recommend reading about the highlights on the SND Update page. Also, have a look at some photos that have been taken during the event.