Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

D3.js schemeSet1 Method

  • Last Updated : 23 Aug, 2020

The d3.schemeSet1 Method in D3.js is used to return an array of nine categorical colors which is returned as RGB hexadecimal strings.

Syntax:

d3.schemeSet1

Parameters: This method does not accept any parameter.

Return Values: It returns an RGB hexadecimal string.

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
  <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
      
    <h3>D3.js schemeSet1 Method</h3>
      
    <script>
      document.write(d3.schemeSet1[0] + "<br>");
      document.write(d3.schemeSet1[1] + "<br>");
      document.write(d3.schemeSet1[2] + "<br>");
      document.write(d3.schemeSet1[3] + "<br>");
      document.write(d3.schemeSet1[4] + "<br>");
      document.write(d3.schemeSet1[5] + "<br>");
      document.write(d3.schemeSet1[6] + "<br>");
      document.write(d3.schemeSet1[7] + "<br>");
      document.write(d3.schemeSet1[8] + "<br>");
    </script>
  </center>
</body>
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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 schemeSet1 Method</h3>
  
    <div class="b1">
      <span>
        D3.schemeSet1[0]
      </span>
    </div>
    <div class="b2">
      <span>
        D3.schemeSet1[1]
      </span>
    </div>
    <div class="b3">
      <span>
        D3.schemeSet1[2]
      </span>
    </div>
    <div class="b4">
      <span>
        D3.schemeSet1[3]
      </span>
    </div>
    <div class="b5">
      <span>
        D3.schemeSet1[4]
      </span>
    </div>
    <div class="b6">
      <span>
        D3.schemeSet1[5]
      </span>
    </div>
    <div class="b7">
      <span>
        D3.schemeSet1[6]
      </span>
    </div>
    <div class="b8">
      <span>
        D3.schemeSet1[7]
      </span>
    </div>
    <div class="b9">
      <span>
        D3.schemeSet1[8]
      </span>
    </div>
      
    <script>
      // Array of colors is given 
      let color1 = d3.schemeSet1[0];
      let color2 = d3.schemeSet1[1];
      let color3 = d3.schemeSet1[2];
      let color4 = d3.schemeSet1[3];
      let color5 = d3.schemeSet1[4];
      let color6 = d3.schemeSet1[5];
      let color7 = d3.schemeSet1[6];
      let color8 = d3.schemeSet1[7];
      let color9 = d3.schemeSet1[8];
  
      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");
      let b9 = document.querySelector(".b9");
  
      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;
      b9.style.backgroundColor = color9; 
    </script>
  </center>
</body>
</html>

Output:

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!


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!