The d3.interpolateCubehelix() function in D3.js is used to return the cubehelix color space interpolator function. It takes two colors as a parameter.
Syntax:
d3.interpolateCubehelix(a, b);
or
d3.interpolateCubehelix.gamma(k)(a, b);
Parameters: It takes two parameters.
- a: It is the name of the color of datatype string.
- b: It is also the name of the color of type string.
Returns: It returns the interpolator function.
Below given are a few examples of the above function.
Example 1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> </style> <body> <!--fetching from CDN of D3.js --> <script type = "text/javascript" </script> <script> // Printing the return type of the function console.log( "function type is: ", typeof(d3.interpolateCubehelix("blue", "white"))) // Using function d3.interpolateCubehelix() console.log( "A RGB string: ", d3.interpolateCubehelix("blue", "white")(0.5)) //using gamma console.log( "A RGB string", d3.interpolateCubehelix.gamma(2)("blue", "white")(0.2)) </script> </body> </html> |
Output:
Example 2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box1, .box2{ display: flex; margin-bottom: 40px; color: white; border: 2px solid black; width: fit-content; height: 150px; } </style> <body> D3.interpolateCubehelix() <div> <div class="box1"> d3.interpolateCubehelix.gamma(10)("green", "white")(0.5) </div> <div class="box2"> d3.interpolateCubehelix("green", "white")(0.5) </div> </div> <!--fetching from CDN of D3.js --> <script type = "text/javascript" </script> <script> let box1=document.querySelector(".box1"); let box2=document.querySelector(".box2"); // Please note the effect of gamma let color= d3.interpolateCubehelix.gamma(10)("green", "white")(0.5); let color2= d3.interpolateCubehelix("green", "white")(0.5); // Changing css of the div with class-name box1 box1.style.backgroundColor=color; // Changing css of the div with class-name box2 box2.style.backgroundColor=color2; </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!
