4010 Facebook Tree
4010 – Facebook Tree
data visualization for Telekom flagship store

2013

Credits:
Cedric Kiefer (Concept/ArtDirection)
Julia Laub (Production)
Christian Loclair (Tool Development)
We were invited by Deutsche Telekom to design the Gallery-Wall of their Berlin Mitte, flagship store. The 4010-store communicates with its customers via its own Facebook page: promoting special offers, posting photos of events, pushing discussions and sharing information about new products and gadgets. This variety of individual posts determines the content of the page and reflects their virtual identity. Our idea was to bring that online communication back to the store and create a connection by producing a beautiful and meaningful data visualization generated from their Facebook posts.
Our method involved accessing the Facebook Graph-API and analyzing data recorded over a four year period using a custom written Processing application. The challenge of this project was to illustrate the individual communication elements and characteristics -the number of likes and comments, the type of the posts, and the time of creation for example- while presenting a sum of all those elements in a single, compelling data-illustration representing the stores online communication.
Client:
Telekom 4010 / DKDL
An abstract data visualization illustrates the Facebook communication of the Berlin Telekom Flagship Store
the leafs & labels
Our visualization metaphor was a hybrid generative/organic tree representing major topic branches, or themes, and the individual communications related to them. A set of algorithmic rules generated the primary structure and substructures of the visualization. The leafs were generated based on different features of the posts. For each post we analyzed characteristics like the creation date and time, the number of comments and likes an individual post received as well as the type of the post and its length. Those values were mapped to the features of the leafs enabling the visitors to read and explore that visualization and get an idea of the nature of the communication. For each type of message a special leaf style was created: as the likes increase the leaf turns red, while the message post time defines how much the leaf flourishes. The results produced a very organic effect by which messages posted during night and early morning yielded closed leafs that slowly opened throughout the day. The accruing number of little buds spawned around a leaf indicated the number of comments.
4010 Facebook Tree
4010 Facebook Tree

To blur the boundaries between abstract visualization and concrete data we added labels to highlight important posts like the most commented or most liked post of a category. In this way the user was able to directly explore the underlying data with his cell phone by scanning the QR code which directly sent the user to the corresponding Facebook post.
application
4010 Facebook Tree

In the end, there are a lot of different methods to auto-generate the structure of a tree, but none of them truly convinced us. Naturally grown trees create non-symmetric but beautiful and organic structures. Algorithmic solutions on the other hand often lead to mechanical, predictable symmetry. Hence we decided to develop a flexible design tool that generated different variations and permitted manually editing to achieve the desired layout and look. The generative leafs are then automatically assigned to the branches depending on their date of creation. This way it is possible to “read“ the leafs as posts from the root to the top of the tree. Leaf Types
images
4010 Facebook Tree
4010 Facebook Tree
4010 Facebook Tree
4010 Facebook Tree
4010 Facebook Tree
4010 Facebook Tree