var N, P, W, base_hue, color_TP, color_FN, color_FP, color_TN, data, enter_stacks, height, i, max, randint, stacks, svg, width, x;

d3.csv('http://wafi.iit.cnr.it/webvis/tmp/algPerformance.csv', function(data) {
 
    data.unshift({
      _N: data[0].N,
      _P: data[0].P,
      ACC: "1",
      alg_id: "Ideal Algorithm",
      descrizione: "Ideal Algorithm",
      FN: "0",
      FP: "0",
      N: data[0].N,
      P: data[0].P,
      PREC: "1",
      REC: "1",
      TN: data[0].N,
      TP: data[0].P
    });  
  
    data.forEach(function(d){
        d.FN = parseInt(d.FN, 10);
        d.FP = parseInt(d.FP, 10);
        d.TN = parseInt(d.TN, 10);
        d.TP = parseInt(d.TP, 10);
    });
    
    N = data.length;
    
    max = d3.max(data, function(d) {
      return d.FN + d.FP + d.TN + d.TP;
    });

    svg = d3.select('svg');

    width = 960;
    height = data.length * 50;
  
    svg.attr({
        width: width,
        height: height
      });
  
    x = d3.scale.linear().domain([0, max]).range([110, width - 40]);

    W = 30;
    P = 16;

    base_hue = 170;

    color_TP = d3.hcl(base_hue, 40, 55);
    color_TN = d3.hcl(base_hue + 180, 40, 55);
    color_FN = d3.hcl(base_hue + 180, 40, 55);
    color_FP = d3.hcl(base_hue, 40, 55);

    stacks = svg.selectAll('.stack').data(data, function(d) {
      return d.alg_id;
    });

    enter_stacks = stacks.enter().append('g');

    enter_stacks.append('rect').attr({
      "class": 'bar',
      x: function(d) {
        return x(d.FN);
      },
      y: function(d, i) {
        return (W + P) * i;
      },
      width: function(d) {
        return x(d.TP) - x(0);
      },
      height: W,
      fill: color_TP
    }).append('title').text(function(d) {
      return d3.format(',')(d.TP);
    });

    enter_stacks.append('rect').attr({
      "class": 'bar',
      x: function(d) {
        return x(d.TP + d.FN);
      },
      y: function(d, i) {
        return (W + P) * i;
      },
      width: function(d) {
        return x(d.TP + d.TN) - x(d.TP);
      },
      height: W,
      fill: color_TN
    }).append('title').text(function(d) {
      return d3.format(',')(d.TN);
    });

    enter_stacks.append('rect').attr({
      "class": 'bar',
      x: x(0),
      y: function(d, i) {
        return (W + P) * i;
      },
      width: function(d) {
        return x(d.TP + d.TN + d.FN) - x(d.TP + d.TN);
      },
      height: W / 3,
      fill: color_FN
    }).append('title').text(function(d) {
      return d3.format(',')(d.FN);
    });

    enter_stacks.append('rect').attr({
      "class": 'bar',
      x: function(d) {
        return x(d.TN + d.TP + d.FN);
      },
      y: function(d, i) {
        return (W + P) * i;
      },
      width: function(d) {
        return x(d.TP + d.TN + d.FN + d.FP) - x(d.TP + d.TN + d.FN);
      },
      height: W / 3,
      fill: color_FP
    }).append('title').text(function(d) {
      return d3.format(',')(d.FP);
    });

    enter_stacks.append('text').text(function(d) {
      return d.alg_id;
    }).attr({
      "class": 'label',
      x: x(0) - 10,
      y: function(d, i) {
        return (W + P) * i + W / 2;
      },
      dy: '0.35em'
    }).append('title').text(function(d) {
      return d.descrizione;
    });
});