Testing bl.ocks.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="../d3/d3.v3.js"></script>
        <style type="text/css">
            div.bar {
                display: inline-block;
                width: 20px;
                height: 75px;
                background-color: teal;

margin-right: 2px;
            }
        </style>
    </head>
    <body>
        <p>Click this text to change the data.</p>
        <script type="text/javascript">
            var dataset = [
                5, 10, 13, 19, 21,
                24, 22, 18, 15, 13,
                11, 12, 15, 20, 18,
                17, 16, 18, 23, 25];

var w = 600,
                h = 250,
                maxValue = 100;

var xScale = d3.scale.ordinal()
                           .domain(d3.range(dataset.length))
                           .rangeRoundBands([0, w], 0.05);

var yScale = d3.scale.linear()
                            .domain([0, d3.max(dataset)])
                            .range([0, h]);

var svg = d3.select("body")
                        .append("svg")
                        .attr({
                            "width": w,
                            "height": h
                        });

svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr({
                    "x": function(d, i) {return xScale(i);},
                    "y": function(d)    { return h - yScale(d); },
                    "width": xScale.rangeBand(),
                    "height": function(d) { return yScale(d); },
                    "fill": function(d) {
                        return "rgb(0, 0, " + (d * 10) + ")";
                    }
                });

svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) { return d; })
               .attr({
                    "x": function(d, i) {
                        return xScale(i) + xScale.rangeBand() / 2;
                    },
                    "y": function(d) { return h - yScale(d) + 14; },
                    "font-family": "sans-serif",
                    "font-size": "11px",
                    "fill": "white",
                    "text-anchor": "middle"
               });

d3.select("p")
              .on("click", function() {
                  var numValues = dataset.length;
                  dataset = [];

for (var i = 0; i < numValues; i++) {
                      var newNumber = Math.floor(Math.random() * maxValue);
                      dataset.push(newNumber);
                  }

yScale.domain([0, d3.max(dataset)]);

svg.selectAll("rect")
                     .data(dataset)
                     .transition()
                     .attr({
                        "y": function(d)      { return h - yScale(d); },
                        "height": function(d) { return yScale(d); },
                        "fill": function(d) {
                            return "rgb(0, 0, " + (d * 10) + ")";
                        }
                     });

svg.selectAll("text")
                     .data(dataset)
                     .transition()
                     .text(function(d) { return d; })
                     .attr({
                          "x": function(d, i) {
                              return xScale(i) + xScale.rangeBand() / 2; },
                          "y": function(d) { return h - yScale(d) + 14;  }
                     });
              });
        </script>
    </body>
</html>