Line chart with button transitions

<!doctype html>
<html lang='en-GB'>
<head>
</head>
<style>
  body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.4;
    display: block;
    margin: 0;
    padding: 0;
    color: #333;
    -webkit-font-smoothing: antialiased;
  }
  p {
    font-family: sans-serif;
    font-size: 14px;
  }
  /*chart styles*/
  .gia-chart {
    max-width: 620px;
  }
  .y.axis line {
    fill: none;
    stroke: #dcdcdc;
    stroke-dasharray: 1px 1px;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }
  .x.axis line {
    fill: none;
    stroke: #333333;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }
  .tick.g-baseline line {
    stroke: #333333;
    stroke-dasharray: 0;
    stroke-width: 1px;
  } 
  .axis text {
    font-family: sans-serif;
    font-size: 12px;
    pointer-events: none;
    fill: #bdbdbd;
  }
  .y.axis text {
    text-anchor: end !important;
    font-size:12px;
    fill: #bdbdbd;
  }
  .domain {
    display: none;
  }
  .line {
    stroke: #4bc6df;
    stroke-width: 2px;
    fill: none;
  }
  .area {
    fill: #4bc6df;
    opacity: 0.1;
  }
  .g-label-text {
    font-family: sans-serif;
    font-size: 14px;
  }
  .g-label-circle {
    fill: #4bc6df;
  }
  .gia-key {
    margin-bottom: 10px;
  }
  button {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 15px;
    color: #333333;
    padding: 5px 8px;
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    font-family: sans-serif;
  }
  button:focus {
    outline: 0;
  }
  .active {
    background-color: #333333;
    color: #ffffff;
  }
</style>

var widther = d3.select(".gia-chart").node().clientWidth;

var width = widther - margin.left - margin.right,
      height = 350 - margin.top - margin.bottom;

//Parses date for correct time format
  var parseDate = d3.time.format("%d-%b-%y").parse;

//Appends the svg to the chart-container div
  var svg = d3.select(".gia-chart").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 + ")");

//Creates the xScale 
  var xScale = d3.time.scale()
    .range([0, width]);

//Creates the yScale
  var yScale = d3.scale.linear()
    .range([height, 0]);

//Defines the y axis styles
  var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .tickPadding(8)
    .tickFormat(function(d) { return "$" + d + ".00"; })
    .orient("left");

//Defines the y axis styles
  var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickPadding(8)
    .orient("bottom")
    .ticks(8)
    .tickFormat(d3.time.format("%Y"));

//line function convention (feeds an array)
  var line = d3.svg.line()
    .interpolate("step-after")
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d.dollar); });

//Loads the data
  d3.csv("minwage.csv", ready);

function ready(err, data) {

if (err) throw "error loading data";

//FORMAT data
    data.forEach(function(d) {
      d.dollar = +d.dollar;
      d.date = parseDate(d.date);
    });
    
    //Organizes the data  
    data.sort(function(a,b) { return a.date - b.date; });
    var maxY = d3.max(data, function(d) { return d.dollar; });
    var maxX = d3.max(data, function(d) { return d.date; });

//Defines the xScale max
    xScale.domain(d3.extent(data, function(d) { return d.date; }));

//Defines the yScale max
    yScale.domain([0, 10]);

//Organizes buttons data
    var types = data.map(function(d) { return d.type;});
    
    var uniq = d3.set(types).values();

//Buttons
    var button = d3.select(".gia-key").selectAll("button")
      .data(uniq)
      .enter()  
      .append("button")
      .attr("class", function (d) {
        if ( d === "Unadjusted dollars" ) { return 'active'; }
        else { return 'not-active'; }
      })
      .text(function(d) {return d;})
      .on("click", function(d) {
        updateChartForType(d);
        d3.select(".active").classed("active", false);
        d3.select(this).classed("active", true);
      });

//Appends the y axis
    var yAxisGroup = svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .selectAll("g")
      .classed("g-baseline", function(d) {return d == 0});

//Appends the x axis    
    var xAxisGroup = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

//Filters the data
    initialType = data.filter(function(d) { return d.type === "Unadjusted dollars";});

//Binds the data to the line
    var drawline = svg.append("path")
      .datum(initialType)
      .attr("class", "line")
      .attr("d", line);

//Update chart on click
    function updateChartForType(typeId) {

var typeData = data.filter(function(d) { return d.type === typeId;});

drawline
        .datum(typeData)
        .transition().duration(1000)
        .attr("d", line);
    }

//RESPONSIVENESS
    d3.select(window).on("resize", resized);

function resized() {

//new margin
      var newMargin = {top: 10, right: 10, bottom: 30, left: 50};

var newWidther = d3.select(".gia-chart").node().clientWidth;

var newWidth = newWidther - newMargin.left - newMargin.right;

//Change the width of the svg
      d3.select("svg")
        .attr("width", newWidth + newMargin.left + newMargin.right);

//Change the xScale
      xScale
        .range([0, newWidth]);

//Update the line
      line = d3.svg.line()
        .interpolate("step-after")
        .x(function(d) { return xScale(d.date); })
        .y(function(d) { return yScale(d.dollar); });

d3.selectAll('.line')
        .attr("d", line);

//Updates xAxis
      xAxisGroup
        .call(xAxis);

//Updates ticks
      xAxis
        .scale(xScale)
        .ticks(6);

//Updates yAxis  
      yAxis
        .tickSize(-newWidth)
    };

}
  </script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js