Open In App

D3.js schemeAccent Method

Last Updated : 26 Aug, 2020
Comments
Improve
Suggest changes
Like Article
Like
Report

The d3.schemeAccent method in D3.js is used to return an array of eight categorical colors which is returned as RGB hexadecimal strings.

Syntax:

d3.schemeAccent

Parameters: This function does not accept any parameter.

Return Value: It returns an RGB hexadecimal string.

Below examples illustrate the d3.schemeAccent in D3.js:

Example 1:

HTML
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width,  
        initial-scale=1.0"/> 
   
    <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 schemeAccent Method</h3>
    
    <script> 
        document.write(d3.schemeAccent[0]+"<br>"); 
        document.write(d3.schemeAccent[1]+"<br>");
        document.write(d3.schemeAccent[2]+"<br>");
        document.write(d3.schemeAccent[3]+"<br>");
        document.write(d3.schemeAccent[4]+"<br>");
        document.write(d3.schemeAccent[5]+"<br>");
        document.write(d3.schemeAccent[6]+"<br>");
        document.write(d3.schemeAccent[7]+"<br>");
    </script> 
    </center>
</body> 
</html>

Output:

Example 2:

HTML
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width,  
        initial-scale=1.0"/> 
    
    <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> 
 
    <style> 
        div { 
            padding: 3px; 
            width: fit-content; 
            height: 20px;
            width: 250px;
        } 
    </style> 
</head>

<body> 
    <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
    
    <h3>D3.js schemeAccent Method</h3>
    
    <div class="b1"> 
        <span> 
            D3.schemeAccent[0] 
        </span> 
    </div> 
    <div class="b2"> 
        <span> 
            D3.schemeAccent[1]   
        </span> 
    </div> 
    <div class="b3"> 
        <span> 
            D3.schemeAccent[2] 
        </span> 
    </div> 
    <div class="b4"> 
        <span> 
            D3.schemeAccent[3]  
        </span> 
    </div> 
    <div class="b5"> 
        <span> 
            D3.schemeAccent[4] 
        </span> 
    </div> 
    <div class="b6"> 
        <span> 
            D3.schemeAccent[5]  
        </span> 
    </div> 
    <div class="b7"> 
        <span> 
            D3.schemeAccent[6]  
        </span> 
    </div> 
    <div class="b8"> 
        <span> 
            D3.schemeAccent[7] 
        </span> 
    </div> 
    <script> 
        // Array of colors is given 
        let color1 = d3.schemeAccent[0]; 
        let color2 = d3.schemeAccent[1]; 
        let color3 = d3.schemeAccent[2]; 
        let color4 = d3.schemeAccent[3]; 
        let color5 = d3.schemeAccent[4]; 
        let color6 = d3.schemeAccent[5];
        let color7 = d3.schemeAccent[6]; 
        let color8 = d3.schemeAccent[7];

        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"); 
        let b7 = document.querySelector(".b7"); 
        let b8 = document.querySelector(".b8");  
        
        b1.style.backgroundColor = color1; 
        b2.style.backgroundColor = color2;
        b3.style.backgroundColor = color3; 
        b4.style.backgroundColor = color4;
        b5.style.backgroundColor = color5; 
        b6.style.backgroundColor = color6;
        b7.style.backgroundColor = color7;
        b8.style.backgroundColor = color8; 
        
    </script> 
    </center>
</body> 
</html>

Output:


Next Article

Similar Reads