var linemargin = {top: 20, right: 20, bottom: 30, left: 50},
    linewidth = 960 - linemargin.left - linemargin.right,
    lineheight = 500 - linemargin.top - linemargin.bottom;
    
var parseDate = d3.time.format("%Y").parse;

var linex = d3.time.scale()
    .range([0, linewidth]);

var liney = d3.scale.linear()
    .range([lineheight, 0]);

var linexAxis = d3.svg.axis()
    .scale(linex)
    .orient("bottom");

var lineyAxis = d3.svg.axis()
    .scale(liney)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return linex(d.year); })
    .y(function(d) { return liney(d.total); });

var linesvg = d3.select("body").append("svg")
    .attr("width", linewidth + linemargin.left + linemargin.right)
    .attr("height", lineheight + linemargin.top + linemargin.bottom)
  .append("g")
    .attr("transform", "translate(" + linemargin.left + "," + linemargin.top + ")");

d3.csv("data.csv", function(error, data) {
  data.forEach(function(d) {
    d.total = +d.total
    d.year = parseDate(d.year);
  });

  linex.domain(d3.extent(data, function(d) { return d.year; }));
  liney.domain(d3.extent(data, function(d) { return d.total; }));

  linesvg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + lineheight + ")")
      .call(linexAxis);

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

  linesvg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});