Another Post About Colours for Data Visualisation. Part 1 — Data Types

5 min readSep 13, 2018

Preface

I’d never done any work with data visualisation before, so when the opportunity arose as part of a larger project re-designing a user account interface (My full case study on the project here) I was both excited and overwhelmed. My first thought was, I am not a data scientist! Data visualisation is intimidating, what do I know?

Most articles and research papers out there felt dry and critical and took themselves too seriously. I guess understandably so; data science is a serious thing and visualisations are often butchered by people with little understanding or care. Colour is also HARD. Backed by theory and rules but also extremely subjective and psychological.

The purpose of this article is not to make authoritative statements and claims that I found all the answers, or that I know everything to know about colours for data visualisation. I’m not an expert, but I wanted to write about my experience in a conversational kind of way which would still be informative and insightful. Surely there would be others out there like me with a keen interest to peek behind the curtain. So if my account provides value for at least one other person, then I’ll be happy.

NB: My brief was quite open-ended — “Create a dashboard” (Sounds like something from the 100 days of UI challenge) In reality, I was tasked with figuring out what would be useful information to display to our users, how it should be displayed visually and proposing some data visualisation library options we could look at using.

I have broken this post into three parts as each covers a different step in the process and I doubt anyone would have wanted to read a 12min essay in one go. So read this at your own leisure.

Colour tool and inspiration overload

There is no shortage of websites and tools to generate or browse a vast array of trendy palettes, but I feel the downfall is you don’t really see them in practice (colourHunt)… or perhaps some are better suited to fantasy UIs for Dribbble kudos (Material UI colours). I also find they can often be an accidental time sink (Khroma AI colour tool) or source of procrastination when starting a new project (Wes Anderson Palettes). Not saying that’s always a bad thing, like any self-respecting hipster out there I love Wes Anderson 😉 …and it turns out there is a whole set of Wes Anderson palettes for R / ggplot2 package.

Hold your horses

NATURALLY, I wanted to jump straight into colour, but I’ve seen enough memes of poor graph choices and confusing colour schemes to know better. And while doing my own research, I’d read a few ranty medium posts criticising colour essays not dissimilar to my own, with copypasta lists of colour visualisation tools and resources*. To be fair, Viz Palette is an awesome tool that I ended up using for my own palettes, and I totally get where he is coming from as a senior in his field.

*Without said copypasta lists of tools or the personal accounts of others, I’d have probably made some poor choices myself.

Refresher — Types of data

I knew the first thing I needed to do was get a better understanding of data visualisation as a whole so that I could make informed and meaningful colour choices for the data sets I would be working with.

So, taking a few steps back here let’s have a quick refresher on the different types of data and how to choose the appropriate visualisation for a data set.
If you already know the data you’re working with and the initial decision making has been done as far as graphs go, then, by all means, jump ahead to part 2

Qualitative data deals with characteristics and descriptors that can’t be easily measured, but can be observed subjectively — such as smells, tastes, textures, attractiveness, and colour.

Quantitative data deals with numbers and things you can measure objectively — dimensions such as height, width, and length, temperature and humidity, prices, area and volume.

There are two types of quantitative data, also referred to as numeric data: continuous and discrete. As a general rule, counts are discrete and measurements are continuous.

Discrete data that is based on counts and can only be certain values.
Eg. The number of M&Ms in a bag, Number of Children.
Continuous data that can take any value in a range, and can technically have an infinite number of steps. Eg. Temperature variation.

Charts, graphs & libraries, oh my!

Charts & graphs

I came across this interactive and insightful guide which was super useful to browse through to get an understanding of some of the different types of charts and graphs. The interactive element helps you choose an appropriate chart or graph for your data type and even suggests a few alternatives where possible. The site also lists a collection of common data viz caveats to watch out for.

I’m not going into all of the different types, but you should be able to identify the ones that work for your data, are easy to interpret and look good. My takeaway? Think about your audience or where your graph is going to be displayed, and don’t use something unnecessarily complicated just because it’s trending.

Libraries

Instead of reinventing the wheel when it came to an area the team or I had had little experience in — or deep diving into R, we ended up looking at a few libraries based on React + D3.js. At the time of writing, we were testing BriteCharts from Eventbrite, a client-side reusable charting library based on D3.js v5. Here are a few others we are considering too (Chosen for their high star count and activity.)
https://github.com/plouc/nivo
https://github.com/recharts/recharts
https://github.com/FormidableLabs/victory

Well, that’s all for this post folks.
Thanks for reading, and I really hope this was helpful. 🤗
Let me know your thoughts in the comments below or leave some love to help others discover this post.

Reading & Tools

Up next

Another post about colours for data visualisation. Part 2 — Colour Schemes