Data Visualisation Week 1: Playing with Crayons to Visualise Political Data

Our final activity and first design challenge this week was to bring all of the week 1 themes and techniques together to create a visualisation for some tabulated political data from the BBC poll of polls.

Conservative Labour Liberal Democrat Other parties
2015 32% 34% 7% 27%
2014 31% 39% 9% 21%
2013 31% 43% 10% 16%

Quite a simple data set and so far we have a limited toolbox so our brief was to simply use the 2D primitives we had practiced with. We just had to visualise the trend using circles, colour and size.

I was able to write some code that sort of met the brief but it felt very forced as every data point and instruction is hard coded.

Still it is a start! The Hello World! Processing documentary emphasised the iterative process of creative coding and to use the sketch concept to try out ideas and then refine them. I may feel like a child scribbling with a crayon but now that I’ve got some basic code and can have a look for ways I could improve and refine it.

As Martin Wattenberg says in the Journalism in the Age of Data Introduction the best way to learn about data visualisation is to try things out even if there are some quite ugly results at the beginning.

Model Answer

After seeing the model answer to the challenge I realise I wasn’t that far away but I made a crucial mistake.  The design idea was on the right track.  Laying out the time series from left to right is a common design convention that would be especially important without labelling.  I could have been a bit more savvy in laying out the circles relative to width and height rather than fixing them using pixel co-ordinates.

My key mistake though was just directly sizing the circles based on the poll percentage value rather than using a scale factor to size them proportional.  Using a scale factor ensures the circles are proportional to the sketch size.  The diameter of the circle should be calculated based on the square root of the number we want to represent to ensure proportionality.  If we simply use the numbers themselves our tutor Jo Wood explained that larger numbers are exaggerated at the expense of smaller numbers:

“If we wished to double the area in order to represent a data item that is twice as large as another, we need to increase the diameter by a factor of 1.41 (the square root of 2), not by 2.” – Jo Wood

So that’s my key message from this week’s challenge and in future weeks I will have to learn to think spatially and mathematically to ensure proportions are represented correctly.  My attempt and Jo’s model answer are now banked into my Processing sketchbook and code library.

Week 1 Gist on Github
DataViz Github Repository

Featured Visualisation Image Credit:
The Data Centric Universe by Jan Willem Tulp.
Source: (CC BY-NC-SA 3.0)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s