Looking at Data Visualisation

‘A visualisation is a graphical representation of evidence, a tool for analysis, communication and understanding.’ Alberto Cairo

There is much debate around the roles of data visualisation and the forms that it takes. There are those who make art from data and others who use data to tell stories. There are visualisations that guide users through data and those that create open-ended representations for users to explore and draw their own conclusions.

So how do you judge a data visualisation? Alberto Cairo, a key practitioner in the field, has listed four criteria for good visualisations. He says that a good visualisation is:

  • Functional: The visualisation should be informative, enabling the viewer to answer questions raised by the data. It should be ‘readable’ and accurate, referencing its sources.
  • Beautiful: An attractive visualisation encourages viewers to interact with it.
  • Insightful: The visualisation should generate insights previously unnoticed.
  • Enlightening: The overall effect of the visualisation should be to transform the way the viewer thinks about the topic.

The process of making data visualisations is both an art and a science. Here a few examples of data visualisations to explore:

Napoleon’s march – Charles Minard

Charles Minard Napoleon March

One of the most classic, noteworthy data visualisations was made by the engineer Charles Minard in 1869. He created a graphic to visualise Napoleon’s Russian campaign of 1812. The light brown line represents the number of troops as they march towards Russia; the line gets thinner as the army is weakened. The thinning black line represents the defeated troops on their journey back to France. The bottom section of the map plots the harsh temperatures experienced by the troops as they retreated. The overall effect of the graphic is the story of an ill-fated military campaign represented in a single frame.

Nobel Prizes and Laureates 1901-2012 - Accurat

Nobel Prizes and Laureates 1901-2012 Accurat


This is a dense visualisation designed by Accurat, a Milan-based design studio. It measures the age, sex, education and origin of Nobel Laureate winners from 1901-2012, across the categories of Chemistry, Economic Sciences, Physics, Literature, Physiology/Medicine and Peace.

Each laureate is represented by a dot on a timeline. The x-axis indicates when the prize was won and the y-axis the age of the winner. Different dots are used to indicate men and women. The graphic gives insight into the average age of winners in each field, what academic level the winner was at the time of the award and which university they belonged to. The graphic points out some interesting facts around the oldest and youngest awarded, siblings who won and a self-taught physics laureate. Interestingly most Literature laureates hold no degrees and New York is home to the greatest number of laureates.

Gay Rights in the US, state by state - Guardian

Gay Rights in the US, state by state  Guardian

This interactive visualisation by the Guardian contrasts the differing positions of American states on gay rights. Seven different rights issues are explained and mapped out, including marriage, hospital visitation, adoption, employment, housing, protection from hate-crimes and rights to schooling.
The story uses a wheel divided into states. Rights are colour-coded – the more liberal the brighter, grey stripes indicate bans and plain grey indicates where the law is unclear. Each state is highlighted and explained as the user scrolls over it, and each of the seven rights is further explained below. Facebook integration allows people to see how the laws affect their friends, this is a powerful addition to the visualization and personalises the experience.

There is a good description of the process behind developing this infographic here.

Bloomberg Billionaires - Bloomberg

Bloomberg Billionaires Bloomberg

Bloomberg Billionaires offers a playful, yet informative tool to rank, plot, map and filter the world’s richest people by age, industry, country of origin, sex and source of wealth. Each individual’s net worth calculation is updated daily. Instead of pointing out insights this visualisation presents itself as a tool for finding interesting correlations and stories about the wealthiest people on the planet.

This article explains how Bloomberg crunch their numbers for this visualisation.

If you are interested to see and learn more about data visualisation, here are a few links to get you started:

Places to view data visualisations

Opinion makers & resources
Alberto Cairo: thefunctionalart.com
Data Stories: A monthly podcast on all topics related to dataviz
Andy Kirk: visualisingdata.com
Stephen Few: perceptualedge.com
Doing Journalism with Data: Canvas Network
Malofiej: Infographics Awards

There is so much to learn and share about this field.
Feel free to add your resources or opinions below.


Cairo, Alberto (2014). Doing Journalism with Data: First Steps, Skills and Tools. What visualization is: myths and misconceptions.

Choosing the Best Graphic Forms. https://www.canvas.net/courses/doing-journalism-with-data


Capitec Bank uses Data Visualisation to #AskWhy

How do you help someone navigate through thousands of questions, tweets and gripes about banking in a way that also helps them turn the contentious topic into something that adds value to their lives and empowers them to solve their problems collectively?


A solution that allowed users to navigate that little corner of the Twittersphere where banking moans and groans go to die.

We decided that data visualisation would be the heart of our solution. Using the hashtag in the ATL work, #AskWhy, as our golden thread, we were able to seamlessly take users on a journey and track a contentious and prevalent online topic of conversation by aggregating the online conversation and collating it in an innovative, explorable format on the campaign hubs: the microsite and mobisite.

Curiosity is king

We all like figuring things out; it makes us feel good about ourselves, as long as it is within our capacity to do so. Additionally, the current rate at which content is consumed means lower attention spans and less time in which to accomplish this task. With this in mind, we used a complex set of new technologies to support this insight through a mechanism that allows for movement and discovery.

The interface creates a sense of mystery, encourages exploration and discovery, yet remains simple and usable enough to figure out relatively quickly. We also relied on an iterative design approach with rapid prototyping and 2 rounds of user labs, which we used to optimise the interface to ensure that our users were having the most intuitive experience possible

By grouping conversations and information and allowing to filter the information according to pre-selected themes and open one node at a time, we avoided complete information overload and enabled them to move effortlessly through the more than 11 000 questions, their responses and associated tips (added by the bank, the users and moneysmart).

The tech

Where possible, we made use of experimental CSS effects including 3D transforms, blur filters and keyframe animations to make the interface integrate seamlessly with the 3D visualisation. All UI animations were handled with CSS3 transitions, and all experimental / nonstandard CSS had fallbacks for older browsers. We used HTML5 localStorage for storing user information in the browser, and the HammerJS library for touch support. The site is written on the Grails framework, using a MongoDB NoSQL data store and running on a Cloud foundry cloud server. As the campaign had a strong Twitter focus, we hooked the platform up to the Twitter API to regularly pull #askwhy tweets from Twitter, and use a keyword lookup to match them to one of the filters, cross-reference them with all the existing tweets on the platform to build a relationship graph based on retweets and replies, calculate where to position them in the visualisation, and update running totals for the trending terms on the site.

The platform had a community management section where our community managers could see questions on the platform and respond to them, either on the platform or by tweeting from the @CapitecBankSA. We included an experimental component which analyses the history of Twitter users on the platform and allocates them an influencer score, so our community managers can target more influential Tweeters.

Once the campaign was over, we collated the most frequently asked questions and popular tips and used them to create content for the bank’s website.


To cut a long story short, 62% of the 11 023 banking related questions were asked on our hubs, the bank’s Twitter followers grew by 1 048 people and their Facebook following by 4 930 fans. And the bank saw the number of new clients increase by 20% in the 2 month campaign period. So, if you’re still moaning and groaning about your bank, ask “Why?”.


The Data Dance

Our team of Numbers Nerds have got awesome rhythm too,  have a listen to what gets us through long days of big


Load More