Untitled

<!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v2.js"></script>
    <style>
      .chart rect {
        fill: steelblue;
      }
      .chart text {
        fill: black;
      }
      .axis path, .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
  </body>
  <script>
    var toTime = function(time) {
      var splitTime = time.split(/:/);
      return new Date(2012, 1, 1, splitTime[0], splitTime[1], splitTime[2]);
    }
    var margin ={ left: 30, right: 20, top: 20, bottom: 20};
    var width=800 - margin.left - margin.right;
    var height=400 - margin.top - margin.bottom;
    d3.csv('2011-eldorado-race.csv', function(data) {

      data = data.map(function(x) { return toTime(x.time); });

      data = d3.layout.histogram().bins(10)(data);

      var x = d3.scale.ordinal()
      .domain(data.map(function(d) { return d.x; }))
      .rangeBands([0,width], 0.1);

      var y = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return d.y; })])
      .range([height, 0 ]);

      var svg = d3.select('body').append('svg')
      .attr('class', 'chart')
      .attr('width', width + margin.left + margin.right)
      .attr('height',height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //bars
      svg.selectAll('rect')
      .data(data)
        .enter().append('rect')
      .attr('width', x.rangeBand())
      .attr('x', function(d) { return x(d.x); })
      .attr('y', function(d) { return y(d.y); })
      .attr('height', function(d) { return y.range()[0] - y(d.y); })
      .order();

      //labels
      svg.selectAll('text.datalabel')
      .data(data)
      .enter()
      .append('svg:text')
      .attr('x', function(d,i) { return x(d.x); })
      .attr('y', function(d,i) { return y(d.y); })
      .attr('dx', x.rangeBand() / 2)
      .attr('dy', '1.2em')
      .attr('text-anchor', 'middle')
      .attr('fill', 'white')
      .text(function(d) { return d.length; })
      .attr('class', 'datalabel');

      //axis
      svg.append('g')
      .attr('class', 'y axis')
      .call(d3.svg.axis()
        .scale(y)
        .orient('left'));

      //Unable to make this work
      svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%H:%M'))
        .orient('bottom'));
    });
  </script>
</html>