title: How to assign custom colors to bars in a D3.js bar chart?
body: <p>I am using LeafletJs and D3js to put a bar chart in a Leaflet popup window.</p>
  
  <p>How can I assign a custom color for each ethnic group bar? I want to assign the custom colors within the D3 code because I can't modify the original dataset. <a href="http://arsh23.github.io/ogmda/map.html" rel="nofollow">Link</a></p>
  
  <p>Thanks.</p>
  
  <pre><code>var onEachFeature = function onEachFeature(feature, layer) {
  
  colors = d3.scale.category20()
  var div = $('&lt;div id="chart"&gt;&lt;h3&gt;Ethnic Group Distribution&lt;/h3&gt;&lt;svg/&gt;&lt;h4&gt;Additional details:&lt;/h4&gt;Extra stuff here&lt;/div&gt;')[0];
  
  var popup = L.popup({
      minWidth: 500,
      minHeight: 350
  }).setContent(div);
  
  layer.bindPopup(popup);
  
  var values = feature.properties;
  
  var data = [{
      name: "Pashtun",
      value: values["Pashtun"]
  }, {
      name: "Tajik",
      value: values["Tajik"]
  }, {
      name: "Uzbek",
      value: values["Uzbek"]
  }, {
      name: "Turkmen",
      value: values["Turkmen"]
  }, {
      name: "Hazara",
      value: values["Hazara"]
  }, {
      name: "Baloch",
      value: values["Baloch"]
  }, {
      name: "Kirghiz",
      value: values["Kirghiz"]
  }, {
      name: "Nuristani",
      value: values["Nuristani"]
  }, {
      name: "Aimak",
      value: values["Aimak"]
  }, {
      name: "Arab",
      value: values["Arab"]
  }, {
      name: "Pashaye",
      value: values["Pashaye"]
  }, {
      name: "Sadat",
      value: values["Sadat"]
  }, {
      name: "Qezelbash",
      value: values["Qezelbash"]
  }];
  
  var margin = {
          top: 20,
          right: 90,
          bottom: 80,
          left: 30
      },
      width = 600 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom,
      barWidth = width / data.length;
  
  var x = d3.scale.linear()
      .domain([0, data.length])
      .range([0, width]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(function(d) {
          return "";
      })
  
  var y = d3.scale.linear()
      .domain([0, 1])
      .range([height, 0]);
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5)
  
  var svg = d3.select(div)
      .select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .classed("chart", true);
  
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
  var bar = svg.selectAll("g.bar")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", function(d, i) {
          return "translate(" + (i * barWidth + 5) + ",0)";
      });
  
  bar.append("rect")
      .attr("y", function(d) {
          if (!isNaN(d.value)) {
              return y(d.value);
          } else {
              return 0;
          }
      })
      .attr("width", barWidth - 10)
      .attr("height", function(d) {
          if (!isNaN(d.value)) {
              return height - y(d.value);
          } else {
              return 0;
          }
      })
      .attr("fill",function(d,i){return colors(i)})
  
  
  bar.append("text")
      .attr("x", function(d) {
          return -height - 70;
      })
      .attr("y", barWidth / 2)
      .attr("transform", "rotate(270)")
      .text(function(d) {
          return d.name;
      });
  
  };
  
  var geojson = L.geoJson(myData, {
      onEachFeature: onEachFeature
  }).addTo(map);
  </code></pre>
  
  <p>Dataset Test:</p>
  
  <pre><code>var afghanDistrictsSample = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
          "stroke": "#555555",
          "stroke-width": 2,
          "stroke-opacity": 1,
          "fill": "#555555",
          "fill-opacity": 0.5,
          "Pashtun": 0.43,
          "Tajik": 0.12,
          "Uzbek": 0.05,
          "Turkmen": 0.00,
          "Hazara": 0.00,
          "District": "Argo",
          "Province": "Kandahar"
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [
              [
                  [61.69921875, 32.08257455954592],
                  [61.69921875, 32.879587173066305],
                  [62.666015625, 32.879587173066305],
                  [62.666015625, 32.08257455954592],
                  [61.69921875, 32.08257455954592]
              ]
          ]
      }
  }, {
      "type": "Feature",
      "properties": {
          "Pashtun": 0.32,
          "Tajik": 0.20,
          "Uzbek": 0.01,
          "Turkmen": 0.02,
          "Hazara": 0.00,
          "District": "Jurm",
          "Province": "Farah"
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [
              [
                  [62.75390625, 32.95336814579932],
                  [62.75390625, 33.76088200086917],
                  [63.69873046874999, 33.76088200086917],
                  [63.69873046874999, 32.95336814579932],
                  [62.75390625, 32.95336814579932]
              ]
          ]
      }
  }, {
      "type": "Feature",
      "properties": {
          "Pashtun": 0.05,
          "Tajik": 0.50,
          "Uzbek": 0.21,
          "Turkmen": 0.00,
          "Hazara": 0.00,
          "District": "Ragh",
          "Province": "Ghor"
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [
              [
                  [63.74267578125, 33.54139466898275],
                  [63.74267578125, 34.43409789359469],
                  [65.14892578125, 34.43409789359469],
                  [65.14892578125, 33.54139466898275],
                  [63.74267578125, 33.54139466898275]
              ]
          ]
      }
  }, {
      "type": "Feature",
      "properties": {
          "Pashtun": 0.00,
          "Tajik": 0.01,
          "Uzbek": 0.10,
          "Turkmen": 0.20,
          "Hazara": 0.40,
          "District": "Highan",
          "Province": "Kabul"
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [
              [
                  [64.53369140625, 35.15584570226544],
                  [64.53369140625, 35.94243575255426],
                  [65.56640625, 35.94243575255426],
                  [65.56640625, 35.15584570226544],
                  [64.53369140625, 35.15584570226544]
              ]
          ]
      }
  }, {
      "type": "Feature",
      "properties": {
          "Pashtun": 0.00,
          "Tajik": 0.01,
          "Uzbek": 0.20,
          "Turkmen": 0.30,
          "Hazara": 0.04,
          "District": "Nusay",
          "Province": "Kunduz"
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [
              [
                  [65.58837890625, 33.30298618122413],
                  [65.58837890625, 34.32529192442733],
                  [66.90673828125, 34.32529192442733],
                  [66.90673828125, 33.30298618122413],
                  [65.58837890625, 33.30298618122413]
              ]
          ]
      }
  }, {
      "type": "Feature",
      "properties": {
          "Pashtun": 0.20,
          "Tajik": 0.00,
          "Uzbek": 0.00,
          "Turkmen": 0.10,
          "Hazara": 0.20,
          "District": "Zebak",
          "Province": "Logar"
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [
              [
                  [65.98388671875, 34.72355492704219],
                  [65.98388671875, 35.53222622770337],
                  [66.95068359374999, 35.53222622770337],
                  [66.95068359374999, 34.72355492704219],
                  [65.98388671875, 34.72355492704219]
              ]
          ]
      }
  }, {
      "type": "Feature",
      "properties": {
          "Pashtun": 0.10,
          "Tajik": 0.10,
          "Uzbek": 0.28,
          "Turkmen": 0.10,
          "Hazara": 0.00,
          "District": "Wakhan",
          "Province": "Nimruz"
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [
              [
                  [67.32421875, 34.43409789359469],
                  [67.32421875, 35.42486791930558],
                  [68.37890625, 35.42486791930558],
                  [68.37890625, 34.43409789359469],
                  [67.32421875, 34.43409789359469]
              ]
          ]
      }
  }]
  };
  </code></pre>