Another Post About Colours for Data Visualisation. Part 1 — Data Types
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
- An introduction to data visualisation
- Data 101: The Basics You Need to Know
- From data to Viz | Find the graphic you need
- Data Viz project — Visual examples & how to
Up next
Another post about colours for data visualisation. Part 2 — Colour Schemes