Quick Custom Colour Scales in d3js

The built in color scales in d3 are wonderful tools for those of us who aren’t so good with coming up with colour schemes. I would love to have the skills to be a designer but by now it should be pretty clear that’s never going to happen. However it occurred to me the other day that the built in scales in d3 are designed for high contrast rather than for colour scheme consistency.

Woah, consistent

In order to make prettier graphs and visualizations I thought I would build a colour scheme scale. I started with a very simple two colour scale

This can be used as a drop in replacement for the d3 colour scale. You can specify a domain and a range then call it as you would a normal d3 scale

I used it to alternate colors in my graph to look like this

Prettier

It would be trivial to change the scale to account for more colours

#file-gistfile1-txt-L7

Now you can make graphs which look like

More columns for more column fun!

Of course color scales can be used for all sorts of fun applications. Consider

• highlight bars which are above or below a certain threshold
• display another dimension of data
• be switchable for the color blind

Anyway this was just a fun exercise to see what I could come with in a couple of minutes.