D3.js interpolateRgbBasis() Function

0 0 1 minute read

d3.InterpolateRgbBasis() Function is used to return the uniform nonrational B-spline interpolator function of an array of colors given to it that is converted to a RGB color.

Syntax:

d3.interpolateRgbBasis(colors);

Parameters: It takes an array of colors.

Returns: It returns the Interpolator function.

Below given are a few Examples of Interpolate.RgbBasis() function.

Example 1: Printing output in the 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> 
  .b1, .b2{ 
    width: 100px; 
    height: 100px; 
  } 
</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.interpolateRgbBasis(["red", "white", "blue"]))) 
  
    console.log( 
d3.interpolateRgbBasis(["red", "white", "blue"])(0.5)) 
  
    console.log( 
d3.interpolateRgbBasis(["red", "white", "blue"])(0.2)) 
  </script> 
</body> 
</html> 

Output:

Example 2: Using d3.interpolateRgbBasis 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> 
  div{ 
    width: 100px; 
    height: 100px; 
  } 
</style> 
<body> 
  D3.interpolateRgbBasis() 
  <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> 
    // Array of colors is given 
    let color= 
d3.interpolateRgbBasis([ "white", "red", "green"])(0.9); 
  
    let color2= 
d3.interpolateRgbBasis(["red", "white", "green"])(0.8); 
  
    let b1=document.querySelector(".b1"); 
    let b2=document.querySelector(".b2"); 
    b1.style.backgroundColor=color; 
    b2.style.backgroundColor=color2; 
  </script> 
</body> 
</html> 

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!