Gamifying data analysis through interactive infographics

Gamifying data analysis through interactive infographics

Let’s be honest, unless your head is geared for numbers and graphs, data analysis can seem like a pretty boring subject. Most people end up with an expressionless stare at even the thought of looking at a collection of data nodes. From the onset of this project, it was clear that we needed to make the data representation fun and accessible if we are to reach (and entertain) a wider audience.

Gauteng as a Village of 100

In datasets where numbers are involved, the data can usually be expressed in percentages. One percentage point translates to one person. This means that the full data set can be represented as 100 individuals living in a village. In the case of GCRO’s biennial Quality of Life Survey, the opinions of the survey participants were catalogued and categorised to form five distinct nodes. The most pertinent results of the survey were chosen as part of the showcase.

In the interactive infographic, users can instruct the villagers to order themselves into easily readable graphs and opinion groups. This is achieved by traversing the various categories and questions. Visitors to the site can choose an avatar to represent them virtually and input their own information to compare it to the averages of the data set.

Crafting the solution

Since Gauteng is the economic hub of South Africa, the design team decided to elevate the village concept to a modern collection of landmarks within Gauteng, surrounding a central, public square. Emphasis was placed on crafting the populous to be race and gender agnostic, and we took great care in making the landmarks recognisable without making direct reference to brand names associated. Beautiful embellishments and “tourist hotspots” make the world fun to explore and attempts to pull users in to learn more about Gauteng. A lot of fun was had painstakingly animating the sprites of the world frame by frame, like in the early days of computer animation.

To pull all of the assets together into a coherent browser-based interactive infographic we employed Isogenic Engine, a Javascript game framework and used Canvas to render the experience. We learned a great deal about the processing capabilities of Canvas and Javascript as well as what a Fisher-Yates shuffle is. A lot of thinking went into coming up with an algorithm that would spiral villagers outward around a central point, and we marvelled at how fantastic Node.js was at compiling our solution into a single packaged solution with a single command.

In the heyday of Adobe’s Flash, we often created immersive experiences that were rich in media and interaction, and it felt great to make the browser come alive once again with an immersive experience – something I personally feel the web has been lacking in recent years. Because of the isometric aspect of our infographic and the style of the environment I would often have colleagues pass my desk, stop in their tracks, and ask if I was busy playing The Sims instead of working!

How well is the interactive infographic doing?

At the time of writing this post, the infographic has had 2360 unique visitors and has been showcased in the CityPress as well as online at When asked about the project Christina Culwick, a researcher at GCRO had this to say: “Thank you and your team for your hard work on this! We are really thrilled with how it’s come together.”

If you want your company to be as innovative as GCRO, we can help you create an infographic just like this one and since we’re already on the subject of graphics, why not give our website redesign checklist a try?


New call-to-action

comments powered by Disqus
Blog Search