D3.js interpolateHcl() Function
Last Updated :
24 Jul, 2020
The interpolateHcl() function in D3.js is used to return the CIELChab color space interpolator function between two values of colors. The two colors given are in the string format and are converted to CIELChab format using d3.hcl() function.
Syntax:
d3.interpolateHcl(a, b);
Parameters: It takes the following two parameters.
- a: It is the string.
- b: It is also a string.
Returns: It returns the interpolator function.
Below given are a few examples of the above function.
Example 1: In console.
<!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("Type of the function is: ",
typeof(d3.interpolateHcl("green", "yellow")))
// Using function d3.interpolateHcl()
console.log("A RGB string: ",
d3.interpolateHcl("green", "yellow")(0.5))
console.log("A RGB string",
d3.interpolateHcl("green", "white")(0.2))
</script>
</body>
</html>
|
Output:
Example 2: In HTML
<!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-right: 40px;
border-radius: 50% 50%;
width: 150px;
height: 150px;
}
div{
display: flex;
}
</style>
<body>
D3.interpolateHcl()
<div>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<script type = "text/javascript"
</script>
<script>
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let color=d3.interpolateHcl("green", "yellow")(0.5);
let color2=d3.interpolateHcl("green", "white")(0.2);
// 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...