D3.js interpolateSinebow() Function

Last Updated : 19 Aug, 2020

The d3.interpolateSinbow() function is a part of the sinebow color scheme which was introduced by Jim Bumgardner and Charlie Loyd. This function is used to return an RGB string of color that corresponds to the Sinebow color scheme.

Syntax:

d3.interpolateSinebow(t);

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

t: It is a numeric value that ranges in [0, 1] inclusively.

Return Values: An RGB string is returned by the above-given function.

Below given are a few examples of the function given above.

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width,initial-scale=1.0"> 
  
    <!--Fetching from CDN of D3.js -->
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
    <script src="https://d3js.org/d3-color.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-interpolate.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-scale-chromatic.v1.min.js"> 
    </script> 
</head> 
  
<body> 
    <script> 
        console.log(d3.interpolateSinebow(0.4)); 
        console.log(d3.interpolateSinebow(0.3)); 
        console.log(d3.interpolateSinebow(0.2)); 
        console.log(d3.interpolateSinebow(0.5)); 
        console.log(d3.interpolateSinebow(0.4)); 
        console.log(d3.interpolateSinebow(0.9)); 
        console.log(d3.interpolateSinebow(0.2)); 
        console.log(d3.interpolateSinebow(0)); 
    </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"> 
  
    <style> 
        div { 
            padding: 6px; 
            text-align: center; 
            vertical-align: middle; 
            display: flex; 
            justify-content: center; 
            width: 90px; 
            height: 50px; 
            float: left; 
        } 
    </style> 
  
    <!--Fetching from CDN of D3.js -->
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
    <script src="https://d3js.org/d3-color.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-interpolate.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-scale-chromatic.v1.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2>D3.interpolateSinebow() </h2> 
  
    <div class="pixel1"> 
        <span></span> 
    </div> 
    <div class="pixel2"> 
        <span></span> 
    </div> 
    <div class="pixel3"> 
        <span></span> 
    </div> 
    <div class="pixel4"> 
        <span></span> 
    </div> 
    <div class="pixel5"> 
        <span></span> 
    </div> 
  
    <script> 
        // Creating different colors for 
        // different 
        // Values of t is 0.4 
        let color1 = 
            d3.interpolateSinebow(0.4); 
        // Values of t is 0.6 
        let color2 = 
            d3.interpolateSinebow(0.6); 
        // Values of t is 0.8 
        let color3 = 
            d3.interpolateSinebow(0.8); 
        // Values of t is 0.9 
        let color4 = 
            d3.interpolateSinebow(0.9); 
        // Values of t is 0 
        let color5 = 
            d3.interpolateSinebow(0); 
  
        // Selecting Div using query selector 
        let pixel1 = document.querySelector(".pixel1"); 
        let pixel2 = document.querySelector(".pixel2"); 
        let pixel3 = document.querySelector(".pixel3"); 
        let pixel4 = document.querySelector(".pixel4"); 
        let pixel5 = document.querySelector(".pixel5"); 
  
        // Setting style and BG color of the 
        // particular DIVs 
        pixel1.style.backgroundColor = color1; 
        pixel2.style.backgroundColor = color2; 
        pixel3.style.backgroundColor = color3; 
        pixel4.style.backgroundColor = color4; 
        pixel5.style.backgroundColor = color5;  
    </script> 
</body> 
  
</html> 