The d3.interpolateCubehelixLong() function is used to return the cubehelix color space interpolator between the two given colors A and B. It uses the shortest path between the hues.
Syntax:
d3.interpolateCubehelixLong(a, b);
Parameters: It takes the two parameters as given above and described below.
- a: It is the name of color in string format.
- b: It is also the name of color in string format.
Return Value: It returns the function.
Example 1:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width,initial-scale=1.0" >
<!--Fetching from CDN of D3.js -->
< script type = "text/javascript" </ script >
</ head >
< body >
< script >
console.log("Type of the function is: ",
typeof(d3.interpolateCubehelixLong("white", "red")))
console.log(
d3.interpolateCubehelixLong("blue", "white")(0.9))
console.log(
d3.interpolateCubehelixLong("white", "green")(0.1))
</ script >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width,initial-scale=1.0" >
<!--Fetching from CDN of D3.js -->
< script type = "text/javascript" </ script >
< style >
.bx1,
.bx2 {
width: 100px;
height: 100px;
}
</ style >
</ head >
< body >
< p >D3.interpolateCubehelixLong()</ p >
< div class = "bx1" ></ div >
< div class = "bx2" ></ div >
< script >
let color1 =
d3.interpolateCubehelixLong("green", "white")(0.1)
let color2 =
d3.interpolateCubehelixLong("white", "green")(0.1)
let bx1 = document.querySelector(".bx1");
bx1.style.backgroundColor = color1;
let bx2 = document.querySelector(".bx2");
bx2.style.backgroundColor = color2;
</ script >
</ body >
</ html >
|
Output: Note the difference between giving green color as the first parameter and white color as the first parameter.