Data Visualisation Principles Part 1: White Space, Text and Colour

Data Visualisation

Getting started with basic Graphic Design principles.

Angelica Lo Duca
Image by krzysztof-m from Pixabay

Data Visualisation is one of the last steps in Data Science. It is very important, because it permits to present the results of the analysis to the final user. For this reason, it is very important to take care of each aspect a graph, such as shapes, texts and animations.

With this this article I will start a series of articles which would explain some basic graphic design principles for a Visualisation, to make it very appealing and readable by users.

In this tutorial, I deal with the following aspects:

  • white space
  • text
  • colour

A white space is the empty space among the elements of a graphical composition. A good use of white spaces will increase readability and focus the readers’ attention. For example, within a text, white spaces split big chunks of text into small paragraphs which makes them easy to understand. In addition, white spaces enhance and highlight some elements of a visualisation, and thus emphasise the main contents.

Within a Visualisation, two types of white spaces exist:

Macro White Spaces — all the spaces around the main content, such as the empty space behind a figure. In the example below, the macro white spaces are marked in pink.

Image by Author

When drawing an infographics, usually, there is the idea that all the macro white spaces must be fulfilled. However, this strategy could lead to an overload of information, which may generate a confusion in the target user. Thus, it is very important to balance macro white spaces.

Micro white spaces — all the spaces between digits in text, between an axis and text, or between the bars in a bar chart. The following figure shows some micro white spaces in pink:

Image by Author

The use of text in a visualisation helps the reader to understand the context. Example of text in a graph are the axes labels, the title and some annotations. The main graph design principles related to text regard styling (such as bold, italic, underlined text), font size, font family, line spacing and paragraph splitting. This last aspect is not very common into a plot, unless the graph presents some long annotations.

The choice of the right combination of the previous aspects makes a graph more or less readable and enjoyable. For example, the font size and the font family (Monotype Corsiva) in the following graph are very small and complex, thus making it not immediate to read.

Image by Author

Colour is the most powerful tool to convey emotions and sensations. When choosing colours, it is very important to respect the standards, such as red for dangerous situations, green to say that everything is ok and so on.

Each colour is characterised by three aspects:

  • Hue is a “pure” colour, that is, with only one wavelength within the optical spectrum of light.
Image by Author
  • Brightness refers to intensity of colour, distinguished by the amount of shading mixed with the hue.
Image by Author
  • Saturation refers to intensity of colour, distinguished by the amount of white light mixed with a hue
Image by Author

Within a visualisation, colours can be combined to generate a harmonised graph. Many tools exist to generate palette of colours, such as the following ones:

  • Color Hunt, which permits to generate a palette of multiple colours
  • Pine Tools, which permits to generate monochromatic palettes
  • Google Art Palette, which permits to generate a palette from an image.

In this short tutorial, I have illustrated some basic principles for Data Visualisations. These principles include: white spaces, text and colour.

Remind, that all Data Visualisations should be designed by considering the target audience and its potential emotions. In addition, one of the most important principles of Data Visualisation is graph consistency, that is, each element of the graphic composition must follow and enhance in the most natural way possible the object of the composition, without confusing.

In the next article of this series, I will deal with other Data Visualisation Principles, such as animations. Stay tuned to discover other details 🙂

If you wanted to be updated on my research and other activities, you can follow me on Twitter, Youtube and and Github.