CODEWITHSUNDEEP
javascriptd3.jscolorsinterpolation
Eric
Eric

Reputation: 133

How to interpolate or get color for the point/values not in specified color table range

I have following set of color table where first value in the first array refers to point and following 3 values are RGB points.

Ex: For the point 0.0, the RGB value should be 247, 255, 164 and so one for other point

"colors": [
    [ 0.0, 247, 255, 164],
    [ 0.2, 185, 116, 255],
    [ 0.4, 73, 255, 35],
    [ 0.6, 247, 255, 164],
    [ 0.8, 185, 116, 255],
    [ 1.0, 247, 255, 164]
]

My issue is if I get point 0.1 from other component, which is in between point [ 0.0, 247, 255, 164] and[ 0.2, 185, 116, 255](I need to use color in between these 2 point), then how could I interpolate or how to assign color for my point(0.1).

This is my function where I am getting point from other component and based on the point I need to return color.

export function rgbValues(point: number) {
    // colors from color table
    const color_table = colors
   // based on point returning color
   const result = color_table.find((element: any) => {
     return element[0] == point
   });

     // return color based on point
     return result;
}

Note: I am using d3 JS and I think I can use d3 interpolate function but now sure how to use it in my scenario.

Upvotes: 1

Views: 274

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38161

You can use a linear scale with multiple (more than two) values in the domain and range (each must have the same number of values).

As you have an equal number of points in the domain and range, we just need to extract the color and value pair, using an array of the colors as the range and an array of all the associated values as the range:

With my dummy data, for ease I've modified the domain values to accommodate the data rather than modifying the data to accommodate the scale:

let colors = [
    [ 0, 247, 255, 164],
    [ 20, 185, 116, 255],
    [ 40, 73, 255, 35],
    [ 60, 247, 255, 164],
    [ 80, 185, 116, 255],
    [ 100, 247, 255, 164]
];

// separate domain and range
colors = colors.map(function(c) {
  return {value: c.shift(), color: c}
})


let scale = d3.scaleLinear()
  .range(colors.map(function(d) {
     return "rgb("+d.color.join(",")+")";
  }))
  .domain(colors.map(function(d) {
    return d.value;
  }));


  
d3.select("body")
  .append("svg")
  .selectAll(null)
  .data(d3.range(100))
  .enter()
  .append("rect")
  .attr("width", 10)
  .attr("height", 10)
  .attr("y", d=> Math.floor(d/10)*12)
  .attr("x", d=> d%10 * 12)
  .style("fill", scale);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Upvotes: 1

Related Questions