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.
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>