D3.js interpolateBlues() Function

0 0 1 minute read

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 =  
  "https://d3js.org/d3.v4.min.js">  
  </script>  
  <script src= 
  "https://d3js.org/d3-color.v1.min.js"> 
  </script> 
  <script src= 
  "https://d3js.org/d3-interpolate.v1.min.js"> 
  </script> 
  <script src= 
  "https://d3js.org/d3-scale-chromatic.v1.min.js"> 
  </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 =  
  "https://d3js.org/d3.v4.min.js">  
  </script>  
  <script src= 
  "https://d3js.org/d3-color.v1.min.js"> 
  </script> 
  <script src= 
  "https://d3js.org/d3-interpolate.v1.min.js"> 
  </script> 
  <script src= 
  "https://d3js.org/d3-scale-chromatic.v1.min.js"> 
  </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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!