d3.InterpolateRgb() Function is used to interpolate the two colors and return the interpolator between them with a gamma value that is adjustable.
Syntax:
d3.interpolateRgb(a, b)
Parameters: It takes the two parameters.
- a: It is a color.
- b: It is a color.
Returns: It returns the Interpolator function.
Below given are a few Examples of d3.interpolateRgb() function.
Example 1: Printing color in the console.
<!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"           src =    </script>   <script>     console.log("Type of the function is: ",  typeof(d3.interpolateRgb("Red", "blue")));     console.log(d3.interpolateRgb("Red", "blue")(0.2));     console.log(d3.interpolateRgb("Red", "green")(0.2))   </script> </body> </html> |
Output:
Example 2: Displaying color in HTML
<!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> Â Â .b1, .b2{ Â Â Â Â width: 100px; Â Â Â Â height: 100px; Â Â } </style> <body> Â Â <div class="b1"> Â Â Â Â </div> Â Â <div class="b2"> Â Â Â Â </div> Â Â <!--fetching from CDN of D3.js -->Â Â <script type = "text/javascript"Â Â </script> Â Â <script> Â Â Â Â let color=d3.interpolateRgb( "white", "green")(0.2); Â Â Â Â let color2=d3.interpolateRgb( "blue", "green")(0.8); Â Â Â Â let b1=document.querySelector(".b1"); Â Â Â Â let b2=document.querySelector(".b2"); Â Â Â Â b1.style.backgroundColor=color; Â Â Â Â b2.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!
… [Trackback]
[…] There you will find 45099 more Info on that Topic: geeksforgeeks.org/d3-js-interpolatergb-function-2/ […]