Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

D3.js schemeBlues() Function

  • Last Updated : 19 Aug, 2020

The d3.schemeBlues[] function in D3.js is used to return a particular color from the “Blues” sequential color scheme which is returned as a HEX string.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

d3.schemeBlues[k]

Parameters: This function accepts a single parameter as mentioned above and described below:

  • k: “k” is a number.

Return Values: It returns a HEX string.



Below given are a few examples of the function given above.

Example1:




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width,  
        initial-scale=1.0"/> 
          
    <title>D3.js schemeBlues[] Function</title
    <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
</head
<body
    <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
      
    <h3>D3.js schemeBlues[] Function</h3>
      
    <script
        document.write(d3.schemeBlues[6][0]+"<br>"); 
        document.write(d3.schemeBlues[6][1]+"<br>");
        document.write(d3.schemeBlues[6][2]+"<br>");
        document.write(d3.schemeBlues[6][3]+"<br>");
        document.write(d3.schemeBlues[6][4]+"<br>");
        document.write(d3.schemeBlues[6][5]);
    </script
    </center>
</body
</html>

Output:

Example2:




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width,  
        initial-scale=1.0"/> 
          
    <title>D3.js schemeBlues[] Function</title
    <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
</head
<style
    div { 
        padding: 10px; 
        width: fit-content; 
        height: 20px; 
    
</style
<body
    <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
      
    <h3>D3.js schemeBlues[] Function</h3>
      
    <div class="b1"
        <span
            D3.schemeBlues[6][0] 
        </span
    </div
    <div class="b2"
        <span
            D3.schemeBlues[6][1]  
        </span
    </div
    <div class="b3"
        <span
            D3.schemeBlues[6][2] 
        </span
    </div
    <div class="b4"
        <span
            D3.schemeBlues[6][3]  
        </span
    </div
    <div class="b5"
        <span
            D3.schemeBlues[6][4] 
        </span
    </div
    <div class="b6"
        <span
            D3.schemeBlues[6][5]  
        </span
    </div
      
    <script
        // Array of colors is given 
        let color1 = d3.schemeBlues[6][0]; 
        let color2 = d3.schemeBlues[6][1]; 
        let color3 = d3.schemeBlues[6][2]; 
        let color4 = d3.schemeBlues[6][3]; 
        let color5 = d3.schemeBlues[6][4]; 
        let color6 = d3.schemeBlues[6][5]; 
  
        let b1 = document.querySelector(".b1"); 
        let b2 = document.querySelector(".b2"); 
        let b3 = document.querySelector(".b3"); 
        let b4 = document.querySelector(".b4"); 
        let b5 = document.querySelector(".b5"); 
        let b6 = document.querySelector(".b6"); 
          
        b1.style.backgroundColor = color1; 
        b2.style.backgroundColor = color2;
        b3.style.backgroundColor = color3; 
        b4.style.backgroundColor = color4;
        b5.style.backgroundColor = color5; 
        b6.style.backgroundColor = color6;
    </script
    </center>
</body
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :