D3 Scale bug

by Ryan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.top {
    float: left;
    width: 50px;
}

.inner {
    float: none;
}

JavaScript

var scales = [
    { name: "scale1", scale: d3.scale.linear().domain([0, 100]).range(["#ff0000", "#ffffff"]) },
    { name: "scale2", scale: d3.scale.linear().domain([0, 100]).range(["#ffffff", "#ff0000"]) },
    { name: "scale3", scale: d3.scale.linear().domain([0, 100]).range(["rgb(255, 0, 0)", "rgb(255, 255, 255)"]) },
    { name: "scale4", scale: d3.scale.linear().domain([0, 100]).range(["rgb(255, 255, 255)", "rgb(255, 0, 0)"]) }
];

var data = [-10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110];
var body = d3.select("body");

scales.forEach(function(scale){    
    var topDiv = d3.select("body").append("div")
        .attr("class", "top")
        .attr("id", scale.name)
        .text(scale.name);
    
    topDiv.selectAll("div").data(data).enter().append("div")
        .attr("class", "inner")
        .text( function(d) { return d; } )
        .style("background-color", function(d) { return scale.scale(d)} );
});