title: Changing color for each stacked bar in D3.js
body: <p>can someone help me with changing the color of the stacked bar in d3? if have tried some method, but it doesn't work. Thank You.</p>
  <p>example :</p>
  <ol>
  <li>admit_male - light blue</li>
  <li>admit_female - deep blue</li>
  <li>reject_male - pale red</li>
  <li>reject_female - deep red</li>
  </ol>
  <p>var data = [
  {
  Category: &quot;University Of Bath&quot;,
  admit_male: 512,
  admit_female: 89,
  reject_male: 313,
  reject_female: 19</p>
  <pre><code>  },
    {
      Category: &quot;University Of Bristol&quot;,
      admit_male: 22,
      admit_female: 24,
      reject_male: 351,
      reject_female: 317
    },
    {
      Category: &quot;University Of Greenwish&quot;,
      admit_male: 138,
      admit_female: 131,
      reject_male: 279,
      reject_female: 244
    },
  
  ];
  
  var w=500,h=600,padding=40;
  var svg=d3.select('body').append('svg')
              .attr('width', w)
              .attr('height', h);
  var stack=d3.stack()
              .keys(['admit_male','admit_female','reject_male','reject_female']);
  
  var datasets=[d3.stack().keys(['admit_male','admit_female'])(data),
                d3.stack().keys(['reject_male','reject_female'])(data)];
  
  var num_groups=datasets.length;
  
  var xlabels=data.map(function(d){return d['Category']});
  
  var xscale=d3.scaleBand()
                  .domain(xlabels)
                  .range([padding,w-padding])
                  .paddingInner(0.5);
  
  var ydomain_min=d3.min(datasets.flat().map(function(row) {
                          return d3.min(row.map(function(d){return d[1];}));
                      }));
  var ydomain_max=d3.max(datasets.flat().map(function(row) {
                          return d3.max(row.map(function(d){return d[1];}));
                      }));
  
  var yscale=d3.scaleLinear()
                  .domain([0,ydomain_max])
                  .range([h-padding,padding]);
  
  var accent = d3.scaleOrdinal(d3.schemeBlues[6]);
  var xaxis=d3.axisBottom(xscale);
  var yaxis=d3.axisLeft(yscale);
  
  d3.range(num_groups).forEach(function(gnum) {
      svg.selectAll('g.group'+gnum)
          .data(datasets[gnum])
          .enter()
          .append('g')
              .attr('fill',accent)
              .attr('class', 'group'+gnum)
          .selectAll('rect')
          .data(d=&gt;d)
          .enter()
          .append('rect')
              .attr('x',(d,i)=&gt;xscale(xlabels[i])+(xscale.bandwidth()/num_groups)*gnum)
              .attr('y',d=&gt;yscale(d[1]))
              .attr('width',xscale.bandwidth()/num_groups)
              .attr('height',d=&gt;yscale(d[0])-yscale(d[1]));
          });
  
  svg.append('g')
          .attr('class','axis x')
          .attr('transform','translate(0,'+(h-padding)+&quot;)&quot;)
      .call(xaxis);
  svg.append('g')
          .attr('class','axis y')
          .attr('transform','translate('+padding+&quot;,0)&quot;)
          
      .call(yaxis);
  </code></pre>