meteorological data visualized in 3-D

synoptic

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.

synoptic

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.

one response to this post

  1. [...] like »synoptic«, this application was created during a class about infographics by Prof. Michael Stoll at the [...]

leave a reply