var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25]


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

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)
    },
    y: h,
    width: (w / dataset.length - barPadding),
    height: 0,
    fill: "#808080"
  })
  .transition()
  .delay(function(d, i) {
    return i * 10
  })
  .attr({
    
    y: function(d, i) {
     return h - (d * 4)
    },
    height: function(d, i) {
     return d * 4
    },
  })
  
svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .text(function(d) {
    return d
  })
  .attr({  
    x: function(d, i) {
      return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2
    },
    y: function(d, i) {
      return h - (d * 4) + 14
    },
    fill: "white",
    "text-anchor": "middle"
  })