D3.js schemeCategory10 Method
The d3.schemeCategory10 method in D3.js is used to return an array of ten categorical colors which is returned as RGB hexadecimal strings.
Syntax:
d3.schemeCategory10
Parameters: This function does not accept any parameter.
Return Value: It returns an RGB hexadecimal string.
Below examples illustrate the schemeCategory10 method 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= "     https://d3js.org/d3.v4.min.js">     </script>     <script src= "     https://d3js.org/d3-color.v1.min.js">     </script>     <script src= "     </script>     <script src= "     </script> </head>    <body>     <center>     <h1 style="color:green;">GeeksForGeeks</h1>           <h3>D3.js schemeCategory10 Method</h3>           <script>         document.write(d3.schemeCategory10[0]+"<br>");         document.write(d3.schemeCategory10[1]+"<br>");         document.write(d3.schemeCategory10[2]+"<br>");         document.write(d3.schemeCategory10[3]+"<br>");         document.write(d3.schemeCategory10[4]+"<br>");         document.write(d3.schemeCategory10[5]+"<br>");         document.write(d3.schemeCategory10[6]+"<br>");         document.write(d3.schemeCategory10[7]+"<br>");         document.write(d3.schemeCategory10[8]+"<br>");         document.write(d3.schemeCategory10[9]+"<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= "     </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 schemeCategory10 Method</h3>           <div class="b1">         <span>             D3.schemeCategory10[0]         </span>     </div>     <div class="b2">         <span>             D3.schemeCategory10[1]           </span>     </div>     <div class="b3">         <span>             D3.schemeCategory10[2]         </span>     </div>     <div class="b4">         <span>             D3.schemeCategory10[3]          </span>     </div>     <div class="b5">         <span>             D3.schemeCategory10[4]         </span>     </div>     <div class="b6">         <span>             D3.schemeCategory10[5]          </span>     </div>     <div class="b7">         <span>             D3.schemeCategory10[6]          </span>     </div>     <div class="b8">         <span>             D3.schemeCategory10[7]         </span>     </div>     <div class="b9">         <span>             D3.schemeCategory10[8]         </span>     </div>     <div class="b10">         <span>             D3.schemeCategory10[9]         </span>     </div>     <script>         // Array of colors is given         let color1 = d3.schemeCategory10[0];         let color2 = d3.schemeCategory10[1];         let color3 = d3.schemeCategory10[2];         let color4 = d3.schemeCategory10[3];         let color5 = d3.schemeCategory10[4];         let color6 = d3.schemeCategory10[5];         let color7 = d3.schemeCategory10[6];         let color8 = d3.schemeCategory10[7];         let color9 = d3.schemeCategory10[8];         let color10 = d3.schemeCategory10[9];           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");                   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;     </script>     </center> </body> </html> |
Output:
