d3 threshold scales

by findango

JavaScript

var svg = d3.select("body").append("svg")
    .attr({width: 600, height:100});

var bands = d3.scale.threshold()
    .domain([0.25, 0.5, 0.75])
    .range(["green", "yellow", "orange", "red"]);

var data = [0, 0.24, 0.25, 0.49, 0.50, 0.74, 0.75];

svg.selectAll("rect").data(data)
.enter()
.append("rect")
.attr({
    x: function(d, i) {return 55 * i;}, 
    y: 0, 
    width: 50, 
    height: 50
})
.style({fill: function(d){ return bands(d);}});