Coloring svg elements depending on data value with d3.js
<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>