|
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; |
|
}); |
|
}); |
