var barmargin = {top: 20, right: 20, bottom: 30, left: 40},
    barwidth = 700 - barmargin.left - barmargin.right,
    barheight = 500 - barmargin.top - barmargin.bottom;

var barx = d3.scale.ordinal()
    .rangeRoundBands([0, barwidth], .1);

var bary = d3.scale.linear()
    .range([barheight, 0]);

var barxAxis = d3.svg.axis()
    .scale(barx)
    .orient("bottom");

var baryAxis = d3.svg.axis()
    .scale(bary)
    .orient("left");

var barsvg = d3.select("body").append("svg")
    .attr("width", barwidth + barmargin.left + barmargin.right)
    .attr("height", barheight + barmargin.top + barmargin.bottom)
  .append("g")
    .attr("transform", "translate(" + barmargin.left + "," + barmargin.top + ")");

d3.csv("data.csv", function(error, data) {

  data.forEach(function(d) {
    d.total = +d.total
    d.year = +d.year;
  });

  barx.domain(data.map(function(d) { return d.year; }));
  bary.domain([0, d3.max(data, function(d) { return d.total; })]);

  barsvg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + barheight + ")")
      .call(barxAxis);

  barsvg.append("g")
      .attr("class", "y axis")
      .call(baryAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Tornado count");

  barsvg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return barx(d.year); })
      .attr("width", barx.rangeBand())
      .attr("y", function(d) { return bary(d.total); })
      .attr("height", function(d) { return barheight - bary(d.total); });
    
});