D3.js d3.interpolateRdPu() Function

Last Updated : 31 Aug, 2020

The d3.interpolateRdPu() function in d3.js is used to return a color that corresponds to the sequential color scheme of “RdPu”. The color returned by this function is in the RGB format. This function sets a color range between red and purple. The values which are given lie between 0 and 1 both inclusive.

Syntax:

d3.interpolateRdPu(t);

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

t: This parameter take a number that lies in the range [0,1].

Return Values: This function returns a string of colors in RGB format.

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

Example 1:

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.v6.min.js"> 
    </script> 
</head> 
  
<body> 
    <script> 
        console.log(d3.interpolateRdPu(0.1)); 
        console.log(d3.interpolateRdPu(0.2)); 
        console.log(d3.interpolateRdPu(0.3)); 
        console.log(d3.interpolateRdPu(0.4)); 
        console.log(d3.interpolateRdPu(0.8)); 
        console.log(d3.interpolateRdPu(0.9)); 
        console.log(d3.interpolateRdPu(0.6)); 
        console.log(d3.interpolateRdPu(0.254)); 
    </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" /> 
  
    <!--Fetching from CDN of D3.js -->
    <script src="https://d3js.org/d3.v6.min.js"> 
    </script> 
  
    <style> 
        div { 
            padding: 5px; 
            text-align: center; 
            vertical-align: middle; 
            display: flex; 
            justify-content: center; 
            width: fit-content; 
            height: 50px; 
            float: left; 
        } 
    </style> 
</head> 
  
<body> 
    <h2>D3.interpolateRdPu()</h2> 
    <div class="box1"> 
        <span> 
            (0.6) 
        </span> 
    </div> 
    <div class="box2"> 
        <span> 
            (0.5) 
        </span> 
    </div> 
    <div class="box3"> 
        <span> 
            (0.4) 
        </span> 
    </div> 
    <div class="box4"> 
        <span> 
            (0.3) 
        </span> 
    </div> 
    <div class="box5"> 
        <span> 
            (0.2) 
        </span> 
    </div> 
    <div class="b6"> 
        <span> 
            (0.1) 
        </span> 
    </div> 
    <script> 
        // Creating different colors for different 
        // Values of t as 0.6,0.5...   
        let color1 = d3.interpolateRdPu(0.6); 
        let color2 = d3.interpolateRdPu(0.5); 
        let color3 = d3.interpolateRdPu(0.4); 
        let color4 = d3.interpolateRdPu(0.3); 
        let color5 = d3.interpolateRdPu(0.2); 
        let color6 = d3.interpolateRdPu(0.1); 
  
        // Selecting Div using query selector  
        let box1 = document.querySelector(".box1"); 
        let box2 = document.querySelector(".box2"); 
        let box3 = document.querySelector(".box3"); 
        let box4 = document.querySelector(".box4"); 
        let box5 = document.querySelector(".box5"); 
        let b6 = document.querySelector(".b6"); 
  
        // Setting style and BG color of  
        /// the particular DIVs  
        box1.style.backgroundColor = color1; 
        box2.style.backgroundColor = color2; 
        box3.style.backgroundColor = color3; 
        box4.style.backgroundColor = color4; 
        box5.style.backgroundColor = color5; 
        b6.style.backgroundColor = color6;  
    </script> 
</body> 
  
</html> 