Related Articles

Related Articles

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2: In HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :