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: