JS Bin // source http://jsbin.com/gateko

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

var w = 300;
var h = 300;
var padding = 2;
var dataset = [5, 10, 15, 14, 33, 25,3,45,19,11];
var svg = d3.select('body').append("svg")
      .attr("width", w).attr("height", h);

function colorPicker(v) {
  if (v<=20) {
    return "#666666";
  } else {
    return "#FF0033";
  }
}

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")

.attr({
    x: function(d,i){ return i * (w/dataset.length);},
    
    y: function(d){return h-(d*3);},
  
    width: (w/dataset.length) - padding,
      
    height: function(d){return d*3;},
  
    fill: function(d) {
      return colorPicker(d);
    }
      
    //fill: function(d){return "rgb(0, " + (d*10) + ", 0)";}
});

svg.selectAll("text").data(dataset).enter().append("text")
.text(function(d) { return d; })
.attr({
  
  "text-anchor": "middle",
  x: function(d, i) {return i * (w/dataset.length) + (w/dataset.length - padding)/2;},
  y: function(d) {return h - (d*3);}
  
});
</script>

var w = 300;
var h = 300;
var padding = 2;
var dataset = [5, 10, 15, 14, 33, 25,3,45,19,11];
var svg = d3.select('body').append("svg")
      .attr("width", w).attr("height", h);

function colorPicker(v) {
  if (v<=20) {
    return "#666666";
  } else {
    return "#FF0033";
  }
}

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js