D3.js interpolateCubehelix() Function
Last Updated :
24 Jul, 2020
The d3.interpolateCubehelix() function in D3.js is used to return the cubehelix color space interpolator function. It takes two colors as a parameter.
Syntax:
d3.interpolateCubehelix(a, b);
or
d3.interpolateCubehelix.gamma(k)(a, b);
Parameters: It takes two parameters.
- a: It is the name of the color of datatype string.
- b: It is also the name of the color of type string.
Returns: It returns the interpolator function.
Below given are a few examples of the above function.
Example 1:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
</ style >
< body >
< script type = "text/javascript"
</ script >
< script >
// Printing the return type of the function
console.log(
"function type is: ", typeof(d3.interpolateCubehelix("blue", "white")))
// Using function d3.interpolateCubehelix()
console.log(
"A RGB string: ", d3.interpolateCubehelix("blue", "white")(0.5))
//using gamma
console.log(
"A RGB string", d3.interpolateCubehelix.gamma(2)("blue", "white")(0.2))
</ script >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
.box1, .box2{
display: flex;
margin-bottom: 40px;
color: white;
border: 2px solid black;
width: fit-content;
height: 150px;
}
</ style >
< body >
D3.interpolateCubehelix()
< div >
< div class = "box1" >
d3.interpolateCubehelix.gamma(10)("green", "white")(0.5)
</ div >
< div class = "box2" >
d3.interpolateCubehelix("green", "white")(0.5)
</ div >
</ div >
< script type = "text/javascript"
</ script >
< script >
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
// Please note the effect of gamma
let color=
d3.interpolateCubehelix.gamma(10)("green", "white")(0.5);
let color2=
d3.interpolateCubehelix("green", "white")(0.5);
// Changing css of the div with class-name box1
box1.style.backgroundColor=color;
// Changing css of the div with class-name box2
box2.style.backgroundColor=color2;
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...