Open In App

D3.js schemePaired Method

Last Updated : 23 Aug, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

The d3.schemePaired method in D3.js is used to return an array of twelve categorical colors which is returned as RGB hexadecimal strings.

Syntax:

d3.schemePaired

Parameters: This function does not accept any parameter.

Return Value: It returns an RGB hexadecimal string.

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
    <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
      
    <h3>D3.js schemePaired Method</h3>
      
    <script
        document.write(d3.schemePaired[0]+"<br>"); 
        document.write(d3.schemePaired[1]+"<br>");
        document.write(d3.schemePaired[2]+"<br>");
        document.write(d3.schemePaired[3]+"<br>");
        document.write(d3.schemePaired[4]+"<br>");
        document.write(d3.schemePaired[5]+"<br>");
        document.write(d3.schemePaired[6]+"<br>");
        document.write(d3.schemePaired[7]+"<br>");
        document.write(d3.schemePaired[8]+"<br>");
        document.write(d3.schemePaired[9]+"<br>");
        document.write(d3.schemePaired[10]+"<br>");
        document.write(d3.schemePaired[11]+"<br>");
    </script
    </center>
</body
</html>


Output:

Example 2:

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
   
    <style
        div { 
            padding: 3px; 
            width: fit-content; 
            height: 20px;
            width: 250px;
        
    </style
</head>
  
<body
    <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
      
    <h3>D3.js schemePaired Method</h3>
      
    <div class="b1"
        <span
            D3.schemePaired[0] 
        </span
    </div
    <div class="b2"
        <span
            D3.schemePaired[1]   
        </span
    </div
    <div class="b3"
        <span
            D3.schemePaired[2] 
        </span
    </div
    <div class="b4"
        <span
            D3.schemePaired[3]  
        </span
    </div
    <div class="b5"
        <span
            D3.schemePaired[4] 
        </span
    </div
    <div class="b6"
        <span
            D3.schemePaired[5]  
        </span
    </div
    <div class="b7"
        <span
            D3.schemePaired[6]  
        </span
    </div
    <div class="b8"
        <span
            D3.schemePaired[7] 
        </span
    </div
    <div class="b9"
        <span
            D3.schemePaired[8] 
        </span
    </div
    <div class="b10"
        <span
            D3.schemePaired[9] 
        </span
    </div
    <div class="b11"
        <span
            D3.schemePaired[10] 
        </span
    </div
    <div class="b12"
        <span
            D3.schemePaired[11] 
        </span
    </div
    <script
        // Array of colors is given 
        let color1 = d3.schemePaired[0]; 
        let color2 = d3.schemePaired[1]; 
        let color3 = d3.schemePaired[2]; 
        let color4 = d3.schemePaired[3]; 
        let color5 = d3.schemePaired[4]; 
        let color6 = d3.schemePaired[5];
        let color7 = d3.schemePaired[6]; 
        let color8 = d3.schemePaired[7];
        let color9 = d3.schemePaired[8]; 
        let color10 = d3.schemePaired[9];
        let color11 = d3.schemePaired[10]; 
        let color12 = d3.schemePaired[11];
  
        let b1 = document.querySelector(".b1"); 
        let b2 = document.querySelector(".b2"); 
        let b3 = document.querySelector(".b3"); 
        let b4 = document.querySelector(".b4"); 
        let b5 = document.querySelector(".b5"); 
        let b6 = document.querySelector(".b6"); 
        let b7 = document.querySelector(".b7"); 
        let b8 = document.querySelector(".b8");  
        let b9 = document.querySelector(".b9"); 
        let b10 = document.querySelector(".b10"); 
        let b11 = document.querySelector(".b11"); 
        let b12 = document.querySelector(".b12"); 
          
        b1.style.backgroundColor = color1; 
        b2.style.backgroundColor = color2;
        b3.style.backgroundColor = color3; 
        b4.style.backgroundColor = color4;
        b5.style.backgroundColor = color5; 
        b6.style.backgroundColor = color6;
        b7.style.backgroundColor = color7;
        b8.style.backgroundColor = color8; 
        b9.style.backgroundColor = color9; 
        b10.style.backgroundColor = color10;
        b11.style.backgroundColor = color11;
        b12.style.backgroundColor = color12; 
          
    </script
    </center>
</body
</html>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads