Country selection

Country selec­tion

Country selection

Country selec­tion

Opening view

Opening view

The FIFA Development Globe visu­al­ises FIFA’s world­wide involve­ment in supporting foot­ball through educa­tional and infra­struc­tural projects. Using a 3D globe in combin­a­tion with inter­con­nected inter­face and visu­al­iz­a­tion elements, the applic­a­tion provides multiple perspect­ives onto an enormous dataset of FIFA’s activ­ities, grouped by tech­nical support, perform­ance activ­ities, and devel­op­ment projects.

In close collab­or­a­tion with Moritz Stefaner, we have initially designed the formal prin­ciple for the visu­al­isa­tion based on a regu­larly subdivided Icosahedron. Later in the process, we have been joined by Jens Franke who was respons­ible for the inter­active devel­op­ment of the final application.

Visit the FIFA Development Globe.

Process

The base-icosahedron / High resolution

The base-icosahedron / High resolution

Non landmass-vertices removed

Non landmass-vertices removed

Map-image based lookup / Work-in-progress

Map-image based lookup / Work-in-progress

Subdivision study with randomized country colors for debugging

Subdivision study with random­ized country colors for debugging

Many subdivision iterations with randomized country colors for debugging

Many subdi­vi­sion iter­a­tions with random­ized country colors for debugging

Lower-res subdivision study with randomized country colors for debugging

Lower-res subdi­vi­sion study with random­ized country colors for debugging

Outcome of nearly finished subdivision algorithm with country border detection

Outcome of nearly finished subdi­vi­sion algorithm with country border detection

Low-res subdivision close-up

Low-res subdi­vi­sion close-up

The project’s design process initially consisted of an R&D iter­a­tion in which we exper­i­mented with 3D soft­ware to quickly create moods and visual design proposals. In parallel, we have eval­u­ated the rendering capab­il­ities of Away3D, a 3D graphics frame­work based on Adobe’s Flash© tech­no­logy. This target plat­form was part of this clients’ require­ment. In a 3rd parallel devel­op­ment, we have sketched out a Processing-based soft­ware with which we gener­ated the geomet­ries which were finally rendered by the web applic­a­tion. This initial inter­op­er­a­tion of different tools has proven to be very powerful, not at least thanks to the fabulous toxiclibs library which has been used for most of the 3D geometry calculations.

During this R&D phase of the project, we’ve decided to create a 3D globe based on a regular Icosahedron displaying all FIFA coun­tries and their specific projects. We were espe­cially inter­ested in how the regular subdi­vi­sions can also provide an orderly grid for the mapped visu­al­isa­tion elements in the final applic­a­tion. This system was chosen to reduce the visual complexity of the map while framing it in a regular formal principle.

We further reduced the complexity of the map by para­met­erising the subdi­vi­sion process by segmenting the globe in different resol­u­tion zones. Custom controls allowed us to control which parts of the globe should be drawn with a higher or lower density of points. The number of subdi­vi­sions is incre­mented near country borders and within smaller area coun­tries to increase the resol­u­tion of the repres­ent­a­tion where needed.

Subdivision world map
Political world map

The final version of the FIFA Development Globe has been produced using custom created polit­ical maps based on GIS data to produce a subdivided mesh along all country borders.

Final Application