Skip to content
Related Articles

Related Articles

Improve Article

D3.js interpolateRainbow() Function

  • Last Updated : 19 Aug, 2020
Geek Week

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>
    <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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :