<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart rect.commited {
  fill: steelblue;
}

.chart rect.expected {
  fill: red;
}

.chart text {
  fill: black;
  font: 10px sans-serif;
  text-anchor: middle;
}


</style>
<body>

<svg class="chart">
<g class="commited" />
<g class="expected" />
</svg>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var commited = [4, 8, 15, 16, 23, 42];
var expected = [ 50, 50, 50];


var width = 240,
    height = 500;

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);

var barWidth = width / (commited.length + expected.length);

var y = d3.scale.linear()
    .domain([0, d3.max(expected)])
    .range([height, 0]);

var bar_commited = d3.select("g.commited").selectAll("g")
   .data(commited)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

bar_commited.append("rect")
      .attr("class", "commited")
      .attr("y", function(d) { return y(d); })
      .attr("height", function(d) { return height - y(d); })
      .attr("width", barWidth - 1)

bar_commited
      .append("text")
      .attr("y", function(d) { return y(d) - 8; })
      .attr("x", barWidth / 2)
      .attr("dy", ".35em")
      .text(function(d) { return "$" + d; });

var bar_expected = d3.select("g.expected").selectAll("g")
   .data(expected)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(" + (i + commited.length) * barWidth + ",0)"; });

bar_expected.append("rect")
      .attr("class", "expected")
      .attr("y", function(d) { return y(d); })
      .attr("height", function(d) { return height - y(d); })
      .attr("width", barWidth - 1);

</script>


</body>
