D3.js interpolateRgbBasisClosed() Function

Last Updated : 04 Aug, 2020

The d3.interpolateRgbBasisClosed() function in D3.js is used to return the uniform non-rational B-spinal interpolator via an input of array that contains strings of colors.

Syntax:

d3.interpolateRgbBasisClosed(values);

Parameters: This function accepts a single parameter as mentioned above and described below:

Values: It is the array of strings of colors.

Return Value: It returns an RGB color.

Below given are a few examples of the above 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"> 
  <title>Document</title> 
</head> 
<style> 
</style> 
<body> 
  <div class="b1"> 
  
  </div> 
  <div class="b2"> 
  
  </div> 
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src =  
"https://d3js.org/d3.v4.min.js"> 
   </script> 
  <script> 
    console.log("Type of the function is: ", 
typeof(d3.interpolateRgbBasisClosed(["red"]))) 
  
    console.log( 
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9)) 
  
    console.log( 
d3.interpolateRgbBasisClosed(["blue", "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"> 
  <title>Document</title> 
</head> 
<style> 
  .bx1,.bx2{ 
    width: 100px; 
    height: 100px; 
  } 
</style> 
<body> 
  D3.interpolateRgbBasisClosed() 
  <div class="bx1"> 
  </div> 
  <div class="bx2"> 
  </div> 
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript"
          src =  
"https://d3js.org/d3.v4.min.js"> 
   </script> 
  <script> 
    // Array of colors is given 
    let color= 
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9);
    let color2= 
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.1)
    let bx1=document.querySelector(".bx1"); 
    let bx2=document.querySelector(".bx2"); 
    bx1.style.backgroundColor=color; 
    bx2.style.backgroundColor=color2; 
  </script> 
</body> 
</html>