Geek asks and answers

D3: refinement of the ordinal scale for returning color groups?

I set the ordinal scale in D3.js as follows, and it works well so far:

var color = d3.scale.ordinal().range([ 'blue', 'red', 'green' ]); 
color.domain();  
console.log(color(0)); // returns 'blue'

Nevertheless, I would really like for me to be able to convey two numbers on the scale and return it under a shade of blue, red or green - the main shade depending on the first number, shade depending on the second number.

Perhaps I can combine d3.scale.ordinal () with d3.interpolateRgb () in some way to do this? I am not sure if interolateRgb is the right choice, because it is important that the colors are consistent, depending on the input numbers.

So here is what I would like to achieve:

color(0, 256); // return a shade of blue
color(0, 257); // return a second shade of blue
color(0, 256); // return the first shade of blue again

D3? .

+5
1

:

var colorgroup = d3.scale.ordinal()
    .domain(d3.range(3))
    .range([ 'blue', 'red', 'green' ]); 
var brightrange = d3.scale.linear()
    .domain([0,300])
    .range([0,3]);  
function color(group,shift) {
     if (shift >= 0) {return d3.hsl(colorgroup(group)).darker(brightrange(shift));}
     else {return d3.hsl(colorgroup(group)).brighter(brightrange(-shift));}             
}

:

console.log(color(0,255)); //dark blue
console.log(color(0,0)); //med blue
console.log(color(0,-150)); //light blue
+12

More articles:


All Articles