The d3.interpolateBlues() function in d3.js is used to return an RGB string of color that corresponds to the sequential color scheme of “Blues”.
Syntax:
d3.interpolateBlues(t);
Parameters: This function takes only one parameter which is given above and described below:
- t: This is a number in the range of 0 and 1 inclusively.
Return Values: This function returns an RGB string of color.
Below given are a few examples of the above-given 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 src =
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script>
console.log(d3.interpolateBlues(0));
console.log(d3.interpolateBlues(0.4));
console.log(d3.interpolateBlues(0.2));
console.log(d3.interpolateBlues(0.25));
console.log(d3.interpolateBlues(0.54));
console.log(d3.interpolateBlues(0.85));
console.log(d3.interpolateBlues(2));
console.log(d3.interpolateBlues(1));
</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>
div{ padding:6px;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
width: 90px;
height: 50px;
float: left;
} </style>
<body>
<h2>D3.interpolateBlues() </h2>
<div class="box1">
<span>
</span>
</div>
<div class="box2">
<span>
</span>
</div>
<div class="box3">
<span>
</span>
</div>
<div class="box4">
<span>
</span>
</div>
<div class="box5">
<span>
</span>
</div>
<!--Fetching from CDN of D3.js --> <script src =
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script>
// creating different colors for different
// Values of t is 0.1
let color1=
d3.interpolateBlues(0.1);
// Values of t is 0.3
let color2=
d3.interpolateBlues(0.3);
// Values of t is 0.5
let color3=
d3.interpolateBlues(0.5);
// Values of t is 0.8
let color4=
d3.interpolateBlues(0.8);
// Values of t is 1.0
let color5=
d3.interpolateBlues(1.0);
// Selecting Div using query selector
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let box3=document.querySelector(".box3");
let box4=document.querySelector(".box4");
let box5=document.querySelector(".box5");
// Setting style and BG color of the particular DIVs
box1.style.backgroundColor=color1;
box2.style.backgroundColor=color2;
box3.style.backgroundColor=color3;
box4.style.backgroundColor=color4;
box5.style.backgroundColor=color5;
</script>
</body>
</html>
|
Output: