barchart.html

<script>
var w = 500;
var h = 100;
var barPadding = 2;

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

var svg = d3.select("#contents")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

var bars = 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", function(d) {
             return "rgb(" + (d * 10) + ", 0, 0)";
           })
           .attr("stroke", "black");

  var labels = svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                 return d;
               })
               .attr("x", function(d, i) {
                 return i * (w / dataset.length) + 11;
               })
               .attr("y", function(d) {
                 return h - (d * 4) + 15;
               })
               .attr("text-anchor", "middle")
               .attr("fill", "white")
</script>