D3.js schemeYlGn[] Function Last Updated : 19 Aug, 2020 Comments Improve Suggest changes Like Article Like Report The d3.schemeYlGn[] function in D3.js is used to return a particular color from the “YlGn” sequential color scheme which is returned as a HEX string. Syntax: d3.schemeYlGn[k] Parameters: This function accepts a single parameter as mentioned above and described below: k: “k” is a number. Return Value: It returns a HEX 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 schemeYlGn[] Function</title> <!--Fetching from CDN of D3.js --> <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 schemeYlGn[] Function</h3> <script> document.write(d3.schemeYlGn[8][0]+"<br>"); document.write(d3.schemeYlGn[8][1]+"<br>"); document.write(d3.schemeYlGn[8][2]+"<br>"); document.write(d3.schemeYlGn[8][3]+"<br>"); document.write(d3.schemeYlGn[8][4]+"<br>"); document.write(d3.schemeYlGn[8][5]+"<br>"); document.write(d3.schemeYlGn[8][6]+"<br>"); document.write(d3.schemeYlGn[8][7]+"<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 schemeYlGn[] Function</title> <!--Fetching from CDN of D3.js --> <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 schemeYlGn[] Function</h3> <div class="b1"> <span> D3.schemeYlGn[8][0] </span> </div> <div class="b2"> <span> D3.schemeYlGn[8][1] </span> </div> <div class="b3"> <span> D3.schemeYlGn[8][2] </span> </div> <div class="b4"> <span> D3.schemeYlGn[8][3] </span> </div> <div class="b5"> <span> D3.schemeYlGn[8][4] </span> </div> <div class="b6"> <span> D3.schemeYlGn[8][5] </span> </div> <div class="b7"> <span> D3.schemeYlGn[8][6] </span> </div> <div class="b8"> <span> D3.schemeYlGn[8][7] </span> </div> <script> // Array of colors is given let color1 = d3.schemeYlGn[8][0]; let color2 = d3.schemeYlGn[8][1]; let color3 = d3.schemeYlGn[8][2]; let color4 = d3.schemeYlGn[8][3]; let color5 = d3.schemeYlGn[8][4]; let color6 = d3.schemeYlGn[8][5]; let color7 = d3.schemeYlGn[8][6]; let color8 = d3.schemeYlGn[8][7]; 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"); 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; </script> </center> </body> </html> Output: Comment More infoAdvertise with us Next Article D3.js schemeYlGn[] Function S SHUBHAMSINGH10 Follow Improve Article Tags : JavaScript Web Technologies D3.js Similar Reads D3.js schemeRdYlGn[] Function The d3.schemeRdYlGn[] function in D3.js is used to return a particular color from the RdYlGn sequential color scheme which is returned as a HEX string. Syntax: d3.schemeRdYlGn[k] Parameters: This function accepts a single parameter as mentioned above and described below: k: “k†is a number. Return V 2 min read D3.js schemeYlGnBu[] Function The d3.schemeYlGnBu[] function in D3.js is used to return a particular color from the “YlGnBu†sequential color scheme which is returned as a HEX string. Syntax: d3.schemeYlGnBu[k] Parameters: This function accepts a single parameter as mentioned above and described below: k: “k†is a number. Return 2 min read D3.js schemeBuGn[] Function The d3.schemeBuGn[] function in D3.js is used to return a particular color from the “BuGn†sequential color scheme which is returned as a HEX string. Syntax: d3.schemeBuGn[k] Parameters: This function accepts a single parameter as mentioned above and described below. k: “k†is a number ranging from 2 min read D3.js schemePRGn[] Function The d3.schemePRGn[] function is a part of the diverging color scheme in d3.js and is used to return a HEX code color string which corresponds to the color from "BrBG" diverging color scheme. Syntax: d3.schemePRGn[k]; Parameters: This function accepts a single parameter as mentioned above and describ 2 min read D3.js schemePiYG[] Function The d3.schemePiYG[] function is a part of the diverging color scheme in d3.js and is used to return a HEX code color string which corresponds to the color from "PiYG" diverging color scheme. Syntax: d3.schemePiYG[k]; Parameters: This function accepts a single parameter as mentioned above and describ 2 min read Like