Using colour in dataviz

One of my little obsessions when drawing any chart is to get the color scheme defined at the beginning and stick with it. That way, I feel like I can hang out with the cool kids, also known as designers. Of course, they see straight through me, but I feel good about it anyway. Here’s my top tips:

  1. Get the logo of any organisation or project you are working with, and suck out the colours. I would just save that image, bring out the GIMP, and use the eye-dropper to get a few colors.
  2. If you don’t have some corporate colour to fall in with, try an app like Color Grab, which uses your phone’s camera to save the colours at the centre. You’re aiming for understated elegance, like design-seeds. If you don’t want to stand up from your computer, get one of the classic Crayola colours.
  3. Use a website like to give you a palette that matches what you got from GIMP
  4. specify those colours in R, or CSS, or Stata; marvel at the results
  5. In general, use a fairly bland and limited palette throughout, except for where you want emphasis, and there use it sparingly and only one (or maybe at a strech two) colors
  6. Think very seriously about transparency. It rocks. If you have a hex code like #4682b4 (aka the strangely ubiquitous steelblue), you can just add another byte on the end for the transparency, for example: #4682b499. Note that, although most people call it transparency, it’s actually opacity (a high value means more opaque), and CSS calls it this if you specify it separately to the colour code (you can also use rgba() function in JavaScript)
  7. Always save your graph in the native format of your data analysis package that made it, and in a vector graphics format like .svg, .pdf or .ps. You can always make raster images like .png later, but you can’t get back from them. (And always save the code that made the image – but you’d do that anyway, right?)
  8. Consider opening up the vector graphics version in Inkscape and messing about with the look there. In fact, if you have Stata or SPSS, you could add transparency in Inkscape.
  9. An unrelated point, but think hard about good fonts too. A nice design could be spoilt by a grim typeface. My current favourite is Transport Heavy, the official UK road sign font. And thanks to HM Government’s open data policies, it is free to download (not every ascii character is there – but you can substitute the similar free font Swansea for those).
  10. Make a decision about spelling the word. Only academics get the luxury of messing about.

The hexbin cholera map at the top of this blog is a fine old example of this process. I had at that time recently made some charts for a poster for my faculty, and used their lurid green (#acca56), which seemed perfect for a deadly water-borne infection (the Wal-Mart virus came to mind). (Believe it or not, at one point we had an entire wall in the reception area painted acca56, but I think it gave people migraines and had to go.) I looked up a palette, and allocated that to the number of cholera deaths in the hexagon. Pretty grim, which is to say, pretty and grim.


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