title: Color grouped bar chart based on comparison of numbers d3
body: <p>I am building up a grouped bar chart. In the chart, I want to color one group of bar chart differently because its Missouri number is bigger than the national average number. However, my else if statement doesn't work out for the fill function. Can anyone tell me what should I do to color the chart differently based on the comparison of numbers? Thanks in advance!!</p>
  
  <p>Here is my Code</p>
  
  <pre><code>&lt;svg id="bodychart" width="900" height="500" style="display: block; margin: auto"&gt;&lt;/svg&gt;
  
  &lt;script&gt;
  
  var svg = d3.select("#bodychart"),
      margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top +")" ); //Not quite understand (??)
  
  var x0 = d3.scaleBand()
      .rangeRound([0, width])
      .paddingInner(0.1);
  
  var x1 = d3.scaleBand()
      .padding(0.05);
  
  var y = d3.scaleLinear()
      .rangeRound([height, 0]);
  
  var z = d3.scaleOrdinal()
      .range(["#F63014", "#ABABAB"]);
  
  var tooltip = d3.select("body").append("div").attr("class", "toolTip");
  
  d3.csv("number.csv", function(d, i, columns){
    for (var i = 1, n = columns.length; i &lt; n; ++i) d[columns[i]] = + d[columns[i]];
      return d;
  }, function(error, data) {
    if (error) throw error;
  
    var keys = data.columns.slice(1); 
  
    x0.domain(data.map(function(d) {return d.BodyParts; }));
    x1.domain(keys).rangeRound([0, x0.bandwidth()]);
    y.domain([0, d3.max(data, function(d) {return d3.max(keys, function(key) {return d[key]; }); })]);
  
    g.append("g")
      .selectAll("g")
      .data(data)
      .enter()
      .append("g")
        .attr("transform", function(d) {return "translate(" + x0(d.BodyParts) + ",0)"; })
      .selectAll("rect")
      .data(function(d) {return keys.map(function(key){return {key: key, value: d[key]}; }); })
      .enter()
      .append("rect")
        .attr("x", function(d) {return x1(d.key);})
        .attr("y", function(d) {return y(d.value);})
        .attr("width", x1.bandwidth())
        .attr("height", function(d){return height - y(d.value);})
        .attr("fill", function(d, i) {
  
          if (d.value['Missouri'] &gt; d.value['National_Average']) {
            return z(d.key);
          } else (d.value['Missouri'] &lt; d.value['National_Average']) {
            return "yellow";
          }
          })
        .on("mousemove", function(d){
          tooltip
            .style("left", d3.event.pageX - 50 + "px")
            .style("top", d3.event.pageY - 70 + "px")
            .style("display", "inline-block")
  
            .html("&lt;span style='font-weight: bold'&gt;"+ (d.key) +"&lt;/span&gt;" + ":" + "&lt;br&gt;" + "$" + d3.format(",.0f")(d.value));
  
      })
          .on("mouseout", function(d){ tooltip.style("display", "none");});
  
      g.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x0));
  
      g.append("g")
          .attr("class", "axis")
          .call(d3.axisLeft(y).ticks(10, ",.0f"))
        .append("text")
          .attr("x", -32)
          .attr("y", y(y.ticks().pop()) + 0.5)
          .attr("dy", "-3em")
          .attr("fill", "#000")
          .attr("font-weight", "bold")
          .attr("text-anchor", "start")
          .text("Dollars");
  
  });
  </code></pre>
  
  <p></p>
  
  <p>Here is my csv file:</p>
  
  <pre><code>    BodyParts,Missouri,National_Average
      Arm,115100,169878
      Leg,102697,153221
      Hand,86821,144930
      Thumb,29767,42432
      Index Finger,22325,24474
      Middle Finger,17364,20996
      Ring Finger,17364,14660
      Pinky,10915,11343
      Foot,74418,91779
      Big Toe,19845,23436
      Eye,69457,96700
      Ear,24310,38050
      Testicle,0,27678
  </code></pre>