var Plot_edu_income = function(){
  var outerWidth = 650;
  var outerHeight = 500;
  var margin = { left: 80, top: 60, right: 30, bottom:130 };

  var xColumn = "EduLevel";
  var yColumns = ["Income_mean", "Income_median", "EarnFT_mean", "EarnFT_median", "EarnAll_mean", "EarnAll_median"];

  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;

  var svg = d3.select("#line_edu_income").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);

  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var xScale = d3.scale.ordinal().rangeBands([0, innerWidth]);
  var yScale = d3.scale.linear().range([innerHeight, 0]);

  var xAxisG = g.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(0," + innerHeight + ")");
  var yAxisG = g.append("g")
    .attr("class", "y-axis");

  var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
  var yAxis = d3.svg.axis().scale(yScale).orient("left");

  var color = ["#3366cc", "#dc3912", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"];

  function plot_axis(data){
    xScale.domain(data.map( function (d){ return d[xColumn]; }));
    yScale.domain([d3.min(data, function(d){ return d[yColumns[1]];}), d3.max(data, function(d){ return d[yColumns[2]];})]);

    xAxisG.call(xAxis);
    xAxisG
      .selectAll("text")
      .attr("dx", "-.8em")
      .attr("dy", ".25em")
      .attr("transform", "rotate(-30)")
      .style("text-anchor", "end");

    yAxisG.call(yAxis);

    yAxisG.append("text")
      .attr("class", "ylabel")
      .attr("x", -innerHeight/2)
      .attr("y", -margin.left*2/3)
      .attr("transform", "rotate(-90)")
      .style("text-anchor", "middle")
      .style("font-size", "12.5pt")
      .text("Income/Earnings by Education");
  }

  function render(data, i){

    xScale.domain(data.map( function (d){ return d[xColumn]; }));
    yScale.domain([d3.min(data, function(d){ return d[yColumns[1]];}), d3.max(data, function(d){ return d[yColumns[2]];})]);


    var dots = g.selectAll(".dot")
      .data(data);

    dots.exit()
      .remove();

    dots.enter().append("circle")
      .attr("class", "dot")
      .attr("r", 5);

    dots
      .transition()
      .attr("cx", function (d){ return xScale(d[xColumn]); })
      .attr("cy", function (d){ return yScale(d[yColumns[i]]); })
      .attr("fill", color[i]);

    var line = d3.svg.line()
      .x(function(d) { return xScale(d[xColumn]); })
      .y(function(d) { return yScale(d[yColumns[i]]); }) ;

    var path = g.selectAll(".line")
      .data(data);

    path.exit()
      .remove();

    path.enter().append("path")
      .attr("class", "line");

    path
      .transition()
      .attr("fill", "none")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("stroke", color[i])
      .attr("d", line(data));
      
    var legends = g.append("g")
      .attr("class","legend")
      .attr("transform", "translate(" + 20 + "," + 20 + ")")
      .attr("x", 15)
      .attr("y", 25)
      .attr("height", 100)
      .attr("width", 100);

    legends.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 10)
      .attr("height", 10)
      .style("fill", color[i] );

    var text = g.select(".legend").selectAll("text").data([yColumns[i]]);

    text.enter().append("text");

    text
      .attr("x", 15)
      .attr("y", 10)
      .text(function(d){return d;})
      .style("text-anchor", "front");

    text.exit().remove();
  }

  d3.csv("data_2A_2J.csv", function(data) {
    //make the data numeric
    data.forEach(function(d){
      var keys = d3.keys(d);
      for(var i = 1, n = keys.length; i<n; i++){
        d[keys[i]] = +d[keys[i]];
      }
      return d;
    });

    plot_axis(data);
    render(data, 0);
  });

  var public ={
    plot: function(index) {
      d3.csv("data_2A_2J.csv", function(data) {
        //make the data numeric
        data.forEach(function(d){
          var keys = d3.keys(d);
          for(var i = 1, n = keys.length; i<n; i++){
            d[keys[i]] = +d[keys[i]];
          }
          return d;
        });

        render(data, index);
      });
    }
  }

  return public;
}();