The d3.schemeRdYlBu[] function in D3.js is used to return a particular color from the “RdYlBu” sequential color scheme which is returned as a HEX string.
Syntax:
d3.schemeRdYlBu[k]
Parameters: This function accepts a single parameter as mentioned above and described below:
- k: “k” is a number.
Return Values: It returns a HEX string.
Below examples illustrate the d3.schemeRdYlBu[] 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" /> <title>D3.js schemeRdYlBu[] Function</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 schemeRdYlBu[] Function</h3> <script> document.write(d3.schemeRdYlBu[3][0] + "<br>"); document.write(d3.schemeRdYlBu[3][1] + "<br>"); document.write(d3.schemeRdYlBu[3][2] + "<br>"); document.write(d3.schemeRdYlBu[4][1] + "<br>"); document.write(d3.schemeRdYlBu[4][2] + "<br>"); document.write(d3.schemeRdYlBu[4][3]); </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 schemeRdYlBu[] Function</title> <script src= </script> <script src= </script> <script src= </script> <script src= </script> </head> <style> div { padding: 10px; width: fit-content; height: 100px; } </style> <body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h3>D3.js schemeRdYlBu[] Function</h3> <div class="b1"> <span> D3.schemeRdYlBu[9][0] </span> </div> <div class="b2"> <span> D3.schemeRdYlBu[3][1] </span> </div> <script> // Array of colors is given let color1 = d3.schemeRdYlBu[9][0]; let color2 = d3.schemeRdYlBu[3][1]; let b1 = document.querySelector(".b1"); let b2 = document.querySelector(".b2"); b1.style.backgroundColor = color1; b2.style.backgroundColor = color2; </script> </center> </body> </html> |
Output:

