D3 : Basic start with Bar Chart

d3-barChart.js

var w = 300;
var h = 250;
var padding = 5;
var dataset = [5, 10, 15, 20, 25,
              11, 45, 21, 3, 21];
var svg = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);

function colorPicker(v) {
  if (v <= 20) return '#666666';
  else if (v > 20) 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 * 5; 
  },
  "width" : w / dataset.length - padding,
  "height": function(d) {
    return d * 5;
  },
  "fill": function(d){
    return colorPicker(d);
  }
});

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) + 12;},
  y: function(d) {return h - (d * 5.2);},
  "font-family": 'sans-serif',
  "font-size": '12',
  "fill": "blue"
});