Open In App

D3.js interpolateHcl() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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>
  <!--fetching from CDN of D3.js -->
  <script type = "text/javascript"
          src = "https://d3js.org/d3.v4.min.js">
  </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>
  <!--fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js">
  </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:



Last Updated : 24 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads