D3.js schemeTableau10 Method
The d3.schemeTableau10 Method in D3.js is used to return an array of ten categorical colors authored by Tableau as part of Tableau 10 which is returned as RGB hexadecimal strings.
Syntax:
d3.schemeTableau10
Parameters: This method does not accept any parameter.
Return Values: 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"/> <title>D3.js schemeTableau10 Method</title> <script src= </script> <script src= </script> <script src= </script> <script src= </script> </head> <body> <center> <h1 style="color:green;">GeeksForGeeks</h1> <h3>D3.js schemeTableau10 Method</h3> <script> document.write(d3.schemeTableau10[0]+"<br>"); document.write(d3.schemeTableau10[1]+"<br>"); document.write(d3.schemeTableau10[2]+"<br>"); document.write(d3.schemeTableau10[3]+"<br>"); document.write(d3.schemeTableau10[4]+"<br>"); document.write(d3.schemeTableau10[5]+"<br>"); document.write(d3.schemeTableau10[6]+"<br>"); document.write(d3.schemeTableau10[7]+"<br>"); document.write(d3.schemeTableau10[8]+"<br>"); document.write(d3.schemeTableau10[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"/> <title>D3.js schemeTableau10 Method</title> <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 schemeTableau10 Method</h3> <div class="b1"> <span> D3.schemeTableau10[0] </span> </div> <div class="b2"> <span> D3.schemeTableau10[1] </span> </div> <div class="b3"> <span> D3.schemeTableau10[2] </span> </div> <div class="b4"> <span> D3.schemeTableau10[3] </span> </div> <div class="b5"> <span> D3.schemeTableau10[4] </span> </div> <div class="b6"> <span> D3.schemeTableau10[5] </span> </div> <div class="b7"> <span> D3.schemeTableau10[6] </span> </div> <div class="b8"> <span> D3.schemeTableau10[7] </span> </div> <div class="b9"> <span> D3.schemeTableau10[8] </span> </div> <div class="b10"> <span> D3.schemeTableau10[9] </span> </div> <script> // Array of colors is given let color1 = d3.schemeTableau10[0]; let color2 = d3.schemeTableau10[1]; let color3 = d3.schemeTableau10[2]; let color4 = d3.schemeTableau10[3]; let color5 = d3.schemeTableau10[4]; let color6 = d3.schemeTableau10[5]; let color7 = d3.schemeTableau10[6]; let color8 = d3.schemeTableau10[7]; let color9 = d3.schemeTableau10[8]; let color10 = d3.schemeTableau10[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:
Please Login to comment...