The d3.interpolateSinbow() function is a part of the sinebow color scheme which was introduced by Jim Bumgardner and Charlie Loyd. This function is used to return an RGB string of color that corresponds to the Sinebow color scheme.
Syntax:
d3.interpolateSinebow(t);
Parameters: This function accepts single parameter as mentioned above and described below:
- t: It is a numeric value that ranges in [0, 1] inclusively.
Return Values: An RGB string is returned by the above-given function.
Below given are a few examples of the function given above.
Example 1:
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> </head> <body> <script> console.log(d3.interpolateSinebow(0.4)); console.log(d3.interpolateSinebow(0.3)); console.log(d3.interpolateSinebow(0.2)); console.log(d3.interpolateSinebow(0.5)); console.log(d3.interpolateSinebow(0.4)); console.log(d3.interpolateSinebow(0.9)); console.log(d3.interpolateSinebow(0.2)); console.log(d3.interpolateSinebow(0)); </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"> <style> div { padding: 6px; text-align: center; vertical-align: middle; display: flex; justify-content: center; width: 90px; height: 50px; float: left; } </style> <!--Fetching from CDN of D3.js --> </script> </script> <script src= </script> <script src= </script> </head> <body> <h2>D3.interpolateSinebow() </h2> <div class="pixel1"> <span></span> </div> <div class="pixel2"> <span></span> </div> <div class="pixel3"> <span></span> </div> <div class="pixel4"> <span></span> </div> <div class="pixel5"> <span></span> </div> <script> // Creating different colors for // different // Values of t is 0.4 let color1 = d3.interpolateSinebow(0.4); // Values of t is 0.6 let color2 = d3.interpolateSinebow(0.6); // Values of t is 0.8 let color3 = d3.interpolateSinebow(0.8); // Values of t is 0.9 let color4 = d3.interpolateSinebow(0.9); // Values of t is 0 let color5 = d3.interpolateSinebow(0); // 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!
