Data Visualisation Week 3: Fifty Tones of Grey

Forget Fifty Shades of Grey, this week in Data Visualisation we have been looking at colour. Critically panned but commercially gold-plated I haven’t seen the film or read the book and am now more likely to think hmmmm interesting use of saturation in that poster than do so. I bet not once in the narrative to they actually tell you how to encode 50 shades of grey and to be honest that’s what I was most interested in finding out this week. Besides if you are adding grey shouldn’t it be a tone not a shade?

If in Term 1 we thought defining and describing information was difficult then colour is equally complex with a great deal of writing on colour theory and disable about colour practice. It is a hard topic that is a deep subject of study in its own right.  It is contextual rather than true (though that would probably make a less snappy song title) and has both physical and psychological dimensions. How we perceive colour is influenced by then world around us, the language we have, adjacent colours (colour contrast) and our gender amongst other factors.

Colour Systems and Schemes

Colour can be encoded in different ways in computers. This week we experimented with two main methods of coding colour in Processing. One method is combining Red, Blue and Green (RGB) values as primaries: a conceptual combination of the trichromacy of the short, medium and long wave cone receptors in our eyes1 and the physical act of mixing paints on a palette. Each red blue and green value is stored in a byte (8 bits) so can have a value between 0 and 255. By specifying three values between 0 and 255 e.g. 0, 190, 255, we can code different colours. The second method we tried uses Hue, Saturation and Brightness (HSB, also known as HSLightness or HSValue) the three components that make up colour. Hue is the basic colour type, saturation how vivid or pure the hue is and brightness how light or dark it is.

A good simple explanation of colour theory and different colour systems is provided by Steven Bradley (Vanseo Design). This references the Munsell Color System based on the work of Albert Munsell’s work on colour theory over a century ago published in 1913 as A Color Notation. In this model the hue is the name of the colour, chroma is its purity and its lightness is called value. These ideas were published in beautiful book on colour such as the Atlas of the Munsell Color System and A Grammar of Color.

Image Credit: Jacob Rus. Source: Wikipedia (CC BY-SA 3.0)

Other colour naming systems include the Natural Colour System (NCS) and Pantone (Marsala or 18-1438 is the colour of the year 2015). The Natural Colour System was first published by the Scandinavian Colour Institute based on the work of Ewald Hering. As such the colours of the Swedish flag are often used as exemplars. The yellow cross is called NCS 0580-Y10R. The fascinating Encycolorpedia demonstrates how this can be mapped to the many other systems, names and schemes available.

“Aesthetics, Accessibility and Meaning”

Of course colour is very important to the aesthetics of a visualisation but as we learnt in Week 1 a data visualisation is not art it is a visual representation that aims to inform. Therefore colour use in a data visualisation must not mislead and should help a view understand the representation, narrative and connective (compare and contrast) elements of the visualisation too. Robert Kosara on his Eager Eyes blog provides an excellent deconstruction of why putting aesthetics first can sometimes be misleading.

Our tutor Jo Wood described this as ensuring there is a good relationship between “Aesthetics, Accessibility and Meaning”. To do these we need to correctly relate the data part of the visualisation to an appropriate colour scheme.

Firstly, it is important to understand the nature of the data. A classic paper on this is Stevens, S. (1946) On the theory of scales of measurement. Science 103(2684) pp.677-680 (JSTOR) that elaborates a classification scheme for different types of empirical observations stored as data. Whilst there are alternative categorisations and the best way to categorisation data is uncertain and debated they idea that there are two broad branches of data: categories (qualitative) and measurements (quantitative), and categories can be either unordered (nominal) or ordered (ordinal).

Secondly, we need to create a suitable colour palette to express the type of data we are representing. Creating a range of colours (gradient) in code involves interpolating between colours. In Processing we learnt how to use lerpColor() to achieve this and why it might produce some unexpected outcomes given the range of colours that could exist between two colour points on the spectrum.

Colour tables provide more control by creating a custom colour range to interpolate over rather than using the whole colour spectrum and we explored the work of Cynthia Brewer on colour use guidelines for mapping and visualisation and the ColorBrewer tool for creating colour tables (created for maps but also useful for other visualisation types). Unless you are really into colour then using colour palettes devised by colour experts or designing custom palettes using composition tools like I want Hue are likely to be a good option for data visualisation designers. Certainly for someone like me whose skill set lies more at the data end of that phrase than the design end. Alternatively

The giCentre at City University, London provide a utility for creating colour tables in Processing as part of the giCentre Utilities Library for Processing. We experimented with using colour tables to depict weather data where you might want to use hues that evoke warmth (reds) and cold (blues) without shades of green in between and were challenged to use what we had learnt in the last two sessions to create a visualisation of air temperature data.

This was quite a difficult week containing a challenging mix of theory, design practice and new programming techniques. It has been an accelerated introduction to theory and code but we are promised we have been introduced to most of the foundational theory and code we will need to know. The coming weeks will start to focus more on the matching of data to design starting next week with a focus on acquiring and parsing data.

Featured Image Credit:
Colour Your World by Bart (Flickr, CC BY-NC 2.0)

  1.  Ware, C. (2004), Ch.4 Colour, pp.97-144 in Information Visualization: Perception for Design, London: Morgan-Kaufmann available at Safari Books Online 

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