D3.js schemeRdGy[] Function

0 0 2 minutes read

The d3.schemeRdGy[] function is used to return a HEX color code string which corresponds to the color from “RdGy” diverging color scheme in d3.js.

Syntax:

d3.schemeRdGy[k];

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

k: This is a number between 3 and 10 both inclusive.

Return Values: This function returns a color string which is in HEX data format.

Below examples illustrate the D3.js schemeRdGy[] function in JavaScript:

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
          path1tent="width=device-width, 
                     initial-scale=1.0"/> 
    <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 style="color: green;">Geeksforzambiatek</h2>
     
<p>D3.js schemeRdGy[] Function</p>
 
    <script> 
        document.write("
<p><b>"
        +d3.schemeRdGy[10][9]+"</p>
</b>"); 
        document.write("
<p><b>"
        +d3.schemeRdGy[10][5]+"</p>
</b>"); 
        document.write("
<p><b>"
        +d3.schemeRdGy[10][4]+"</p>
</b>"); 
        document.write("
<p><b>"
        +d3.schemeRdGy[10][3]+"</p>
</b>"); 
        document.write("
<p><b>"
        +d3.schemeRdGy[10][2]+"</p>
</b>"); 
        document.write("
<p><b>"
        +d3.schemeRdGy[10][1]+"</p>
</b>"); 
        document.write("
<p><b>"
        +d3.schemeRdGy[10][0]+"</p>
</b>"); 
    </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"/>
    </head>
    <style>
        div {
            padding: 6px;
            color: white;
            text-align: center;
            vertical-align: middle;
            display: flex;
            justify-content: center;
            width: fit-content;
            margin-top: 2px;
            height: 20px;
        }
    </style>
    <body>
        <h2 style="color: green;">
            Geeksforzambiatek
        </h2>
         
<p>D3.schemeRdGy[] Function</p>
 
        <div class="box1">
            <span>d3.schemeRdGy[10][9]</span>
        </div>
        <div class="box2">
            <span>d3.schemeRdGy[10][5]</span>
        </div>
        <div class="box3">
            <span>d3.schemeRdGy[10][4]</span>
        </div>
        <div class="box4">
            <span>d3.schemeRdGy[10][2]</span>
        </div>
        <div class="box5">
            <span>d3.schemeRdGy[10][0]</span>
        </div>
        <!--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>
        <script>
            // Creating different colors for 
            // different value of k
            let color1 = d3.schemeRdGy[9][5];
            let color2 = d3.schemeRdGy[10][4];
            let color3 = d3.schemeRdGy[9][3];
            let color4 = d3.schemeRdGy[9][2];
            let color5 = d3.schemeRdGy[9][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");
 
            // 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:

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!