Open In App

D3.js interpolateRainbow() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The d3.interpolateRainbow() function is used to return a string of RGB color that corresponds to the d3.interpolateWarm in range 0 to 0.5 and d3.interpolateCool in range 0.5 to 1.0 both inclusive thus it forms the cyclic less-angry rainbow color scheme in d3.js.

Syntax:

d3.interpolateRainbow(t);

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

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

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

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=
    </script>
    <script src=
    </script>
    <script src=
        "https://d3js.org/d3- scale-chromatic.v1.min.js">
    </script>
</head>
  
<body>
    <script>
        console.log(d3.interpolateRainbow(0.4));
        console.log(d3.interpolateRainbow(0.3));
        console.log(d3.interpolateRainbow(0.2));
        console.log(d3.interpolateRainbow(0.5));
        console.log(d3.interpolateRainbow(0.4));
        console.log(d3.interpolateRainbow(0.9));
        console.log(d3.interpolateRainbow(0.2));
        console.log(d3.interpolateRainbow(0));
    </script>
</body>
  
</html>


Output:

rgb(226, 183, 47)
rgb(255, 120, 71)
rgb(254, 75, 131)
rgb(175, 240, 91)
rgb(226, 183, 47)
rgb(76, 110, 219)
rgb(254, 75, 131)
rgb(110, 64, 170)

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=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h2>D3.interpolateRainbow() </h2>
    <div class="box1">
        <span></span>
    </div>
    <div class="box2">
        <span></span>
    </div>
    <div class="box3">
        <span></span>
    </div>
    <div class="box4">
        <span></span>
    </div>
    <div class="box5">
        <span></span>
    </div>
  
    <script>
  
        // Creating different colors for
        // different Values of t is 0
        let color1 =
            d3.interpolateRainbow(0);
  
        // Values of t is 0.1
        let color2 =
            d3.interpolateRainbow(0.1);
  
        // Values of t is 0.3
        let color3 =
            d3.interpolateRainbow(0.3);
  
        // Values of t is 0.5
        let color4 =
            d3.interpolateRainbow(0.5);
  
        // Values of t is 0.8
        let color5 =
            d3.interpolateRainbow(0.8);
  
        // 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");
  
        // 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; 
    </script>
</body>
  
</html>


Output:



Last Updated : 19 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads