var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var barWidth = width / 14;

var x = d3.scale.linear()
    .range([barWidth / 2, width - (barWidth / 2)]);

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

var opacity = d3.scale.linear()
    .range([0, 1]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(function(_) { return _; })
    .orient('bottom');

var yAxis = d3.svg.axis()
    .scale(y)
    .tickFormat(function(_) {
        var minutes = _ * 10;
        var hours = Math.floor(minutes / 60);
        var mins = '' + (minutes - (hours * 60));
        if (mins.length == 1) mins = '0' + mins;
        return hours + ':' + mins;
    })
    .orient('left');

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

d3.json('histogram.json', function(error, data) {
  data.forEach(function(d) {
    d.time = +d.time;
    d.count = +d.count;
    d.elapsed = (+d.time * 10);
  });

  x.domain(d3.extent(data, function(d) { return d.year; })).nice();
  y.domain(d3.extent(data, function(d) { return d.time; })).nice();
  opacity.domain(d3.extent(data, function(d) { return d.count; }));

  svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis)
    .append('text')
      .attr('class', 'label')
      .attr('x', width)
      .attr('y', -6)
      .style('text-anchor', 'end')
      .text('Year');

  svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis)
    .append('text')
      .attr('class', 'label')
      .attr('transform', 'rotate(-90)')
      .attr('y', 6)
      .attr('dy', '.71em')
      .style('text-anchor', 'end')
      .text('Time');

  svg.selectAll('.dot')
      .data(data)
    .enter().append('rect')
      .attr('class', 'dot')
      .attr('width', barWidth)
      .attr('height', y(0) - y(1))
      .attr('x', function(d) { return x(d.year) - (barWidth / 2); })
      .attr('y', function(d) { return y(d.time); })
      .style('fill', '#000')
      // .style('stroke', '#000')
      .style('stroke-width', 0)
      // .style('stroke-opacity', function(d) {
      //     return opacity(d.count) * 2;
      // })
      .style('fill-opacity', function(d) {
          return opacity(d.count);
      });
});