The d3.schemeBrBG[] 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.schemeBrBG[k];
Parameters: This function accepts a single parameter as mentioned above and described below.
- k: It is any number in the range 3 to 10.
Return Value: This function returns a HEX code color 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 schemeBrBG[] Function</title> <script src= </script> <script src= </script> <script src= </script> <script src= </script> <style> h2{ color: green; } </style> </head> <body> <h2>Geeks for neveropen</h2> <p>Different colors from schemeBrBG are: </p> <script> document.write(d3.schemeBrBG[3][1]+"<br>"); document.write(d3.schemeBrBG[3][2]+"<br>"); document.write(d3.schemeBrBG[4][3]+"<br>"); document.write(d3.schemeBrBG[5][4]+"<br>"); document.write(d3.schemeBrBG[6][5]+"<br>"); document.write(d3.schemeBrBG[10][6]); </script> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Fetching from CDN of D3.js --> </script> </script> <script src= </script> <script src= </script> <style> div { padding: 6px; text-align: center; vertical-align: middle; display: flex; justify-content: center; width: fit-content; margin-top: 2px; height: 20px; } </style> </head> <body> <h2>D3.schemeBrBG[k] </h2> <div class="pixel1"> <span>d3.schemeBrBG[10][0]</span> </div> <div class="pixel2"> <span>d3.schemeBrBG[10][1]</span> </div> <div class="pixel3"> <span>d3.schemeBrBG[10][2]</span> </div> <div class="pixel4"> <span>d3.schemeBrBG[10][3]</span> </div> <div class="pixel5"> <span>d3.schemeBrBG[10][4]</span> </div> <script> // Creating different colors for // different value of k let color1 = d3.schemeBrBG[10][0]; let color2 = d3.schemeBrBG[10][1]; let color3 = d3.schemeBrBG[10][2]; let color4 = d3.schemeBrBG[10][3]; let color5 = d3.schemeBrBG[10][4]; // Selecting Div using query selector let pixel1 = document.querySelector(".pixel1"); let pixel2 = document.querySelector(".pixel2"); let pixel3 = document.querySelector(".pixel3"); let pixel4 = document.querySelector(".pixel4"); let pixel5 = document.querySelector(".pixel5"); // Setting style and BG color of // the particular DIVs pixel1.style.backgroundColor = color1; pixel2.style.backgroundColor = color2; pixel3.style.backgroundColor = color3; pixel4.style.backgroundColor = color4; pixel5.style.backgroundColor = color5; </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
