Rasenball

The World Cup in Brasil is where thirty-two teams meet to discover which country has the best soccer team fo the world. But how should you display soccer results for a world cup? Most of the time, soccer results are displayed using tables on various pages. Working in the field of data visualization we felt a responsibility to come up with a more elegant solution we hope is equally informative but much more fun to use: RasenballIf you haven't done so already, have a look at rasenball.com and tell us what you think.
Rasenball has two separate versions of its UI. One for a desktop computer with mouse and larger screens and one for touch screens on smaller devices. The whole software is written in HTML5 i.e. JavaScript, HTML, SVGs and CSS to make it run in mobile clients, too. As the desktop user interface is not compatible with small touch devices, we created the mobile version with bigger buttons and less detail. The different versions of Rasenball can be accesssed here:

When accessing the index.html there will be a redirect depending on the kind of device you are accessing the site with. 

This article describes the concepts behind the Rasenball World Cup Match Schedule Visualization. It sketches the technological background and describes the architecture. The specifics of the desktop version and the mobile version are described in more detail in the two follow up articles 

Rasenball-Design

Depending on a viewers interest, different views on the results are presented by Rasenball. The desktop version of Rasenball is organized in five different views, each of which shows information from a particular angle:

  • the Matches View shows all the Matches for a specific selection,
  • the Teams View shows the participating teams on a world map depending on the selection,
  • the Days View shows the days on which there are games for a selection,
  • the Groups View shows the current table for the groups or the current results for the knockout phase and finally
  • the Venues View shows the locations of the different stadiums.

 

The non-flat version

Non-Flat Version of Rasenball

The original design as shown above was influenced by a flash-based visualization for the 2010 World Cup at marca.com. We started out with a more realistic non-flat version where we used beveled elements and shadows implemented with SVG-filters. It turned out, however, that these filters caused rendering to become very slow. Although this could have been avoided by prerendering the circle and using it as a background image, we decided to built a flat alternative instead. This made the application look more modern and simplyfied the development of a mobile version.

The flat version

In the flat version we removed all SVG-filters and introduced a background instead. The basic layout of the flat version can be seen below.

Once clicked, the stadium opens. This was a design decision we made to deal with more detailed information. The necessity is particularly obvious in the group view displayed below where the groups as well as the knockout phase and the group table are visible. The corresponding view can be seen below.

The mobile View

While desktop screens offer the space for such detailed representations, mobile devices lack the necessary screen resolution. Additionally touch devices have no mouse over effects and need larger buttons to meet the user behavior. Due to the limited space, the mobile version only consists of three views: the Teams View, the Days View and the Groups View as an overview. We decided to keep the circular view in the mobile version so that the relationship of both versions becomes obvious. The following figure shows the mobile view.

 

The Pool Game

With growing interest in the site, one of the main feedbacks was that a pool game would be a nice add-on. Although originally intended as a visualization show case we decided to augment Rasenball to make it a fully functional pool game where people can register, create groups and bet against one another. Especially for the mobile version, this meant that we had to fit additional information into the layout. We did this by abbreviating some of the longer names to gain space for additional columns. This allowed us to display for each game the date and time, the actual result, the result guess and the number of points each player got for her bet.

Additionally we created a dashboard view for the desktop version where people can see how they performed against the other team members.  

The game itself is realized using PHP. This allows a convenient installation on most web servers. This decision was made, because some of our customers asked for a personalized version of the game to use within their own company.

Supported Devices and Browsers

Rasenball heavily uses HTML5 technology for animations and layout. So all browsers without HTML5 support are obviously not supported.

Internet Explorer (Windows and Windows Phone)

Lacking HTML5 support most prominently holds for IE in versions below 9 where Rasenball will not work at all. For version 9 gradients and transitions are not implemented, so Rasenball will not look as nicely as in other browsers. Windows Phone 7 uses IE in version 9 but without custom font support, so most of the symbols in the mobile version will not show up at all. Therefore the web site will hardly be usable on Windows Phone 7 devices. Windows Phone 8 uses Internet Explorer 10 mobile but has again no full support for custom fonts. The Desktop Version of Internet Explorer is fully supported starting with version 10.

Chrome (All devices) and Safari (Webkit Browsers)

On older mobile devices with Android Chrome has some performance issues. We use CSS transitions. These are not hardware accelerated on these devices. Apart from that, Chrome works very well. 

The same holds for Safari. Older iOS Devices do not support transitions as smoothely as one would expect. Starting with the iPhone 4S, transitions are supported very well. 

Firefox

Just as Chrome, Firefox is supported very well, too. On the tested desktop versions, everything worked very smoothly.

Outlook

Starting out as a visualization case study for the World Cup we ended up in a more feature rich implementation than originally intended. It turned out, however, that future applications we develop will benefit from unusual navigational concepts making them more fun to use. As the mobile version can also be packaged as a mobile application using Apache Cordova / PhoneGap we can deliver mobile websites, mobile apps and websites for desktop using a single source with only different skinning. So it seems, we might finally abandon native apps in favor of HTML5, reversing the claim Mark Zuckerberg made two years ago.

If your are interested in the technical details, don't miss the follow up article Rasenball - The Implementation.

 
Teaser Image: 
Hidden Text Field: 
Rasenball - World Cup Visualization

Comments( 6 )

Scott says:

Hi You have England as the whole of the United Kingdom, it is not. Scotland, Wales and Northern Ireland are different countries as far as FIFA are concerned (different football federations). Cheers Scott

presse says:

True, thanks. We changed it.

wallmann says:

Hi, the result is not correct, it gives 3 points for a 0:0 but the right finish result was a 2:0 for the team elfenbeinküste, can you changed it please ?

admin says:

There was an issue with this particular game because it started so late. The update script ran before the game was finished. That's why we had this issue. We reran it and things should be fine.

David Conrad says:

How did you manage that rotating globe? I think it is rendered on a canvas element? Did you develop that in house? Or is it a component? Is it open source? It's extremely impressive. The map in the stadium view is nice, too, but the globe is on a higher level entirely.

admin says:

Thanks, but the tribute mainly goes to MBostock and D3.js. The globe is canvas and you can find a detailed explanation here: http://bl.ocks.org/mbostock/4183330. If you need higher performance, you might want to use Three.js as in this example: http://techslides.com/demos/threejs/globe.html. For more information on maps you might like to see our article on maps, too: http://blog.mondula.com/mapping-minimum-wages-europe

Leave a comment