The d3.interpolatorHsl() function of D3.js is used to return the HSL color space interpolator function of two given colors. The colors that are given are not to be in HSL format.
Syntax:
d3.interpolateHsl(a, b);
Parameters: It takes two parameters:
- a: It is a color name eg. red or green.
- b: It is also a color name eg. red or green.
Returns: It returns an interpolator function.
Below given are a few examples of the above function.
Example 1: Using the function in 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" </script>
<script>
console.log("Type of the function is: ",
typeof(d3.interpolateHsl("white", "red")))
console.log(d3.interpolateHsl("white", "red")(0.9))
console.log(d3.interpolateHsl("white", "red")(0.4))
</script>
</body>
</html>
|
Output:
Example 2: Using the function 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>
div{
width: 100px;
height: 100px;
}
</style>
<body>
D3.interpolateHsl()
<div class="b1">
</div>
<div class="b2">
</div>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript" </script>
<script>
let color=d3.interpolateHsl("white", "green")(0.2);
let color2=d3.interpolateHsl("red", "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: