Flash, Processing
comment 1

FIFA Development Globe – Visualizing FIFA’s work across the globe

FIFA DG - china copy 2

Created by Moritz Stefaner, Studio NAND, Jens Franke and produced by medienfabrik Gütersloh GmbH, The FIFA Development Globe visualizes FIFA’s development work across the world. The related events and projects are placed on a 3D globe as colorful triangle based constructions, and can be filtered by their program types. The globe itself is based on an elegant geometric construction, generated to reflect country borders as abstracted geometry by an adaptive, recursive subdivision process.

The team were approached for the job in early 2012 by arvato Medienfabrik, an agency working with FIFA on a couple of projects. For this task they were looking for a specialist in data visualization. They received a briefing document along with a reel of “inspirational” material as well as some data samples. From the briefing they understood that visualization’s task would be to provide playful access to a variety of projects worldwide, and invite to explore, rather than hard data analytics.

As in every data visualization project we approach, early explorations of the data (“toiling in the data mines”) are an exciting and very important first step. Many ideas sound good on paper, but turned out really bland or confusing when worked out with real data — on the other hand, the data might suggest itself a previously undiscovered perspective.

The first looked at spatial distribution (kind of important when you make a globe), often the world map looks much sparser with real data than people expect. Then they looked at soccer statistics beyond the provided data, such as comparing the numbers of players vs officials. This was followed by observing instructor networks – how the different soccer associations are connected via people teaching courses at both of them.

These explorations provided the basis for first application design to make sure they find a good basic structure for the application and include all types of information important to the client. They used Keynote for the wireframes, which is, in fact, a nice and lean prototyping app.

Key decision, Moritz describes, was the rendering of the globe itself. They soon discarded realistic world renderings a la Google Earth or political/road maps a la Google maps, as the geographic information would distract from the information content, and they knew their data would be expressed on the country level only, so they needed a more abstracted world view. At the same time, they felt that just introducing uniform shapes for the countries would take away too much of the recognizability of the country shapes.

They discovered this incredible paper of globe tesselations: Kevin Sahr, Denis White, and A. Jon Kimerling (2003): “Geodesic Discrete Global Grid Systems”, which provided them with a design paradigm that would allow them to represent the world and country borders very efficiently in the right level of abstraction.

Basically, you start with a regular body, and recursively subdivide its surfaces. We were immediately attracted to the principle for its elegance and potential expressiveness. We quickly ran some experiments and extended the principle to apply a dynamic subdivision approach — in the middle of a country, we would use larger elements, and towards the borders smaller ones.

More process images here.

At the end, they produced a full workflow from GIS shape files to country meshes ready to display in Flash. As intermediate steps, they used images as datastore. For instance, the subdivision size is governed by a bitmap where the borders are painted with different line strengths / blurred. Also, they use a unique color per country, and paint a 2D Plate Caree map (lat, long – > x,y), which they use in the frontend to very efficiently look up, in which country an arbitrary point on earth lies.

Next big question for the team was: How to represent the events that take place in the countries? Again, they wanted to make sure to hit the right level of abstraction. Inspiration from historic cattle map and aerial photographies. Also, running tests if they could reuse the same grid as they used for the countries already. It turned out, they would need to have their marks independent of the grid, as for very small countries, they would never have enough grid tiles available. In the end, they chose a three-pronged construction representing the three types of events they display on the globe, as a simple and very graphical 2D overlay.

Another important decision here was the time frame – while the month view was too coarse and aggregated, a placement by day would result in too much overlap and visual chaos. In the end they settled for weekly aggregation – providing enough visual richness for an interesting display, but still enough aggregation to be able to detect some patterns.

In addition, the view can be filtered for individual event types. Below, they are looking only at “Grassroots” events, and can see that e.g. Tunisiam Bahrain, Nepa, etc. each had 4 grassroots events. So, on demand, they are providing quite detailed statistics, but without sacrificing the playfulness and simplicity of the overall application.

The FIFA Development Globe can be experienced here:

http://devglobe.fifa.com

The FIFA Development Globe was produced by medienfabrik Gütersloh GmbH with the help of Moritz Stefaner, Studio NAND and Jens Franke.

Filed under: Flash, Processing

by

Editor-in-chief at CreativeApplications.Net, co-founder and editorial director at HOLO Magazine, director of platform at FRM and researcher/lecturer at the University of Westminster, London.

  • valyard

    Awesome!