甜甜圈图-将域映射到颜色范围（过渡）

Question

I am trying to make a 'donut' chart and I am currently struggling with D3 scales and colors. If you open my current chart: https://jsfiddle.net/dtr7hrg2/ , you will notice that the values 0 and 5.26 share exactly the same color. I guess that is because those two values fall within the same range. My domain is [0, 100]. What I want to achieve is to map this domain into a range [0, 100] which corresponds to a linear transition between following colors ["#000000", "#5F192A", "#B12848", "#EC335C"] where 0.0 falls into #000 and 100.0 falls into #B12848 . Could somebody give me a hint what I am doing wrong? Any help will be appreciated!

Answer 1

If you want a linear range of colors between #000000 and #B12848 you can create an interpolation function and scale its input to be between 0.0 and 1.0:

var chart = d3.select("#chart");

var color = d3.interpolate('#000000', '#B12848');

for (var i = 0; i <= 100; i++) {
    chart.append('span').attr('class', 'colorBlock').attr('style', function (d) {
        return 'background-color: ' + color(i / 100.0);
    });
}

Here's a working fiddle

But, as Tim B points out the colors between 0 and 5 are barely discernible.

Answer 2

Its not the exact same color, what you did is correct

console.log(heat_map_color(5)) // rgb(14, 4, 6)
console.log(heat_map_color(0)) // rgb(0, 0, 0)

Those colors are so close you can't see the difference.