Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

D3.js schemePiYG[] Function

  • Last Updated : 01 Sep, 2020

The d3.schemePiYG[] function is a part of the diverging color scheme in d3.js and is used to return a HEX code color string which corresponds to the color from “PiYG” diverging color scheme.

Syntax:

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!

d3.schemePiYG[k];

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

  • k: It is any number in the range 3 to 10.

Return Value: It returns a HEX code color string.



Below examples illustrate the d3.schemePiYG[] function in D3.js:

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=
    </script
    <script src=
    </script
    <script src=
    </script
    <script src=
    </script
</head>
  
<body>
    <h2 style="color:green;">Geeks for geeks</h2>
  
    <p>Different colors from schemePiYG are: </p>
  
    <script>
        document.write("<p><b>" 
            + d3.schemePiYG[10][0] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][1] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][2] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][3] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][4] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][5] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][6] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][7] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][8] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePiYG[10][9] + "</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">
    <!--Fetching from CDN of D3.js -->
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
    </script>
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        div {
            padding: 6px;
            text-align: center;
            vertical-align: middle;
            display: flex;
            justify-content: center;
            width: fit-content;
            margin-top: 2px;
            height: 20px;
        }
    </style>
</head>
  
<body>
    <h2>D3.schemePiYG[k] </h2>
    <div class="pixel1">
        <span>d3.schemePiYG[10][0]</span>
    </div>
    <div class="pixel2">
        <span>d3.schemePiYG[10][1]</span>
    </div>
    <div class="pixel3">
        <span>d3.schemePiYG[10][2]</span>
    </div>
    <div class="pixel4">
        <span>d3.schemePiYG[10][3]</span>
    </div>
    <div class="pixel5">
        <span>d3.schemePiYG[10][4]</span>
    </div>
  
    <script>
        // creating different colors for
        // different value of k
        let color1 =
            d3.schemePiYG[10][0];
        let color2 =
            d3.schemePiYG[10][1];
        let color3 =
            d3.schemePiYG[10][2];
        let color4 =
            d3.schemePiYG[10][3];
        let color5 =
            d3.schemePiYG[10][4];
  
        // 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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!