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.
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
It would be trivial to change the scale to account for more colours
Now you can make graphs which look like
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.