var w = 500;
var h = 100;
var barPadding = 1;

var dataset = [ 7, 5, 8, 5, 13, 6, 11, 8, 7, 10 ];

//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
              return i * (w / dataset.length);
                              })
   .attr("y", function(d) {
              return h - (d * 4);
                              })
   .attr("width", w / dataset.length - barPadding)
   .attr("height", function(d) {
              return d * 4;
                              })
   .attr("fill", "blue");


svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
          return d;
                     })
   .attr("text-anchor", "middle")
   .attr("x", function(d, i) {
               return i * (w / dataset.length) + (w / dataset.length                - barPadding) / 2;
                              })
   .attr("y", function(d) {
              return h - (d * 4) + 14;
                          })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "black");