D3.js schemePaired Method - GeeksforGeeks

23 Aug, 2020
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= "        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>     <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= "        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>        <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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript