title: D3: Bar chart coloring
body: <p>I have a bar chart with x and y values in D3 and I want to color my bars depending on the value of y. If y is smaller then 6 then it should be one color and if otherwise I want another color for it.</p>
  
  <p>This is my code so far. This is working just for one value.</p>
  
  <pre><code>var data = [
                                              {x: 2, y:  4},
                                              {x: 5, y:  8},
                                              {x: 8, y: 10}
                                          ];
  
    bars.selectAll(".rect")
                                              .data(data)
                                              .enter().append("rect")
                                              .attr("class", "rect")
                                              .attr("x", function(d) { return x(d.x); })
                                              .attr("y", function(d) { return y(d.y); })
                                              .attr("height", function(d) { return h - y(d.y); })
                                              .attr("width", 15)
                                              .attr("fill", function(d){
                                                  return colorPicker(d);
                                              });
  
                                          function colorPicker(v){
                                              if(v&lt;=6) { return "#666666"}
                                              else if (v &gt; 6){ return "#FF0033";}
  
                                          }
  </code></pre>
  
  <p>Do you have any idea how should I change this ? Thanks in advance!</p>