admin管理员组

文章数量:1433160

I'm trying to generate a list of "successive" colors for a d3.js heatmap purpose. So, I'm looking for a function that takes in input a starting color (say red in hexadecimal), an ending color (say blue in hexadecimal), and an integer (the number of hexadecimal colors to generate in between that is returned as a form of a list. 

build_colors(start_color,end_color,nb_colors) -> list of colors

I do not look for something too sophisticated (like sampling at constant speed on a geodesic between the two color-endpoints on a riemannian perceptual space)!

It may be rather easy but I am beginner with javascript / d3.js and basically all web-technologies.

I'm trying to generate a list of "successive" colors for a d3.js heatmap purpose. So, I'm looking for a function that takes in input a starting color (say red in hexadecimal), an ending color (say blue in hexadecimal), and an integer (the number of hexadecimal colors to generate in between that is returned as a form of a list. 

build_colors(start_color,end_color,nb_colors) -> list of colors

I do not look for something too sophisticated (like sampling at constant speed on a geodesic between the two color-endpoints on a riemannian perceptual space)!

It may be rather easy but I am beginner with javascript / d3.js and basically all web-technologies.

  • javascript
  • d3.js
  • colors
  • visualization
  • data-visualization
Share Improve this question asked Mar 2, 2016 at 16:34 slowlearnerslowlearner 1551 silver badge7 bronze badges 1
  • 1 Possible duplicate of stackoverflow./questions/1484506/… – cl3m Commented Mar 2, 2016 at 16:40
Add a ment  | 

3 Answers 3

Reset to default 3

D3 has a built-in color interpolator, actually several. The closest one would probably be f=d3.interpolateHsl(a, b) where aand b are two colors. It returns an interpolation function f taking a parameter between 0 and 1 and returning the corresponding color in the range from a to b.

If you really need an array instead of a function, you can do the following:

var colors=[];
var nColors=20;
for (var i=0; i<nColors; i++)
  colors.push(f(i/(nColors-1)));

For calculation purposes, I think it's easier to represent colors as three integers spanning from 0 to 255. CSS color attributes can then be assigned with values of format "rgb(64, 32, 16)".

So, for your build_color(…) function, I think the best is to accept and return colors as arrays of three integers.

Here's an example:

var build_colors = function(start, end, n) {
    
    //Distance between each color
    var steps = [
      (end[0] - start[0]) / n,  
      (end[1] - start[1]) / n,  
      (end[2] - start[2]) / n  
    ];
    
    //Build array of colors
    var colors = [start];
    for(var ii = 0; ii < n - 1; ++ii) {
      colors.push([
        Math.floor(colors[ii][0] + steps[0]),
        Math.floor(colors[ii][1] + steps[1]),
        Math.floor(colors[ii][2] + steps[2])
      ]);
    }
    colors.push(end); 
   
    return colors;
  };
  


  //Example: ten colors between red and blue
  var colors = build_colors([255, 0, 0], [0, 0, 255], 10);  
  
  //Render
  for(var ii = 0; ii < 10; ++ii) {
    var div = document.createElement("div");
    div.setAttribute("style", "background: rgb(" + colors[ii].join(",") + ")");
    document.body.appendChild(div);    
  }
div {
  width: 100px;
  height: 25px;
}
<body>
</body>

Check this question: Javascript color gradient

RainbowVis-JS does exactly what you want: https://github./anomal/RainbowVis-JS

本文标签： d3jshow to generate a list of successive colors in javascriptStack Overflow

版权声明：本文标题：d3.js - how to generate a list of successive colors in javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745551995a2662985.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。