Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create dynamic d3 color scale between two color values

Tags:

d3.js

I have a d3 pie chart with a color function:

var color = d3.scale.ordinal()
            .range(['#0075B4', '#70B5DC']);

If there are only two values/pieces, this works. But if there are more, I want to pick colors between the two given.

d3 pie chart

Above, with 3 pie pieces, the piece labelled "Cost 3" would have the color that is between #0075B4 and #70B5DC.

Is this possible with d3? Here is a jsfiddle of what I have so far: http://jsfiddle.net/9ruzntrr/1/

like image 482
thetallweeks Avatar asked Dec 19 '14 21:12

thetallweeks


1 Answers

Yes, just use colors in a linear scale:

var color = d3.scale.linear().domain([costMin,costMax])
        .range(['#0075B4', '#70B5DC']);
like image 61
Elijah Avatar answered Sep 24 '22 05:09

Elijah