title: Coloring svg elements depending on data value with d3.js
body: <p>I was wondering how I could color svg rectangles depending on values from a dataset? If i was plotting rectangles for every data entry, how could I modify the color of the rectangle based on the data value?</p>
  
  <p>so far I have:</p>
  
  <pre><code>         //Make an SVG Container
          var svgContainer = d3.select("body").selectAll("svg")
                                   .data(data)
                                   .enter().append("svg")
                                   .attr("width", 38)
                                   .attr("height", 25);
  
      //Draw the rectangle
       var rectangle = svgContainer.append("rect")
                      .attr("x", 5)
                       .attr("y", 5)
                       .attr("width", 38)
                       .attr("height", 25)
                        //want to color here based on data points, I want the data values to make my rectangles different shades of red
                      .style("fill", d3.rgb("red").darker(.data(data));
  </code></pre>
  
  <p>Let's say my data looks like:</p>
  
  <p>var data = [{One:420, Two:222, Three:332},...]; And I only want the "Two" values to affect the color of the rectangles</p>