Skip to content

Commit

Permalink
Fix of variable importance graph
Browse files Browse the repository at this point in the history 
Includes:
 - show of variable names
 - show of var imp. values
 - sort rewrite
  • Loading branch information
@mmalohlava
mmalohlava committed May 6, 2014
1 parent 5b6f207 commit 939f68c
Showing 1 changed file with 90 additions and 46 deletions.
136 changes: 90 additions & 46 deletions lib/resources/h2o/js/graphs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,14 @@ function zip(x, y) {
function g_varimp(divid, names, varimp) {
// Create a dataset as an array of tuples
var dataset = zip(names, varimp);
var valueLabelWidth = 20; // Space reserved for values on the right
var barLabelWidth = 80; // Space reserved for col names on the left
var barHeight = 20; // Height of bar
var maxBarWidth = 640; // Maximum bar width
// Setup size and axis
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 640 - margin.left - margin.right,
height = names.length*20 - margin.top - margin.bottom;
var margin = {top: 30, right: 5, bottom: 10, left: 5},
width = maxBarWidth - margin.left - margin.right,
height = names.length*barHeight - margin.top - margin.bottom;

var xScale = d3.scale.linear()
.range([0, width])
Expand All @@ -25,24 +29,40 @@ function g_varimp(divid, names, varimp) {
.orient("top");

var svg = d3.select("#"+divid).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("width", width + margin.left + margin.right + valueLabelWidth + barLabelWidth)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

/*
var tooltip = d3.select("body")
.append("div")
.attr("id", "d3tip")
.classed("hidden", true);
.classed("hidden", true); */

svg.selectAll(".bar")
var fx = function(d) { return xScale(Math.min(0, d[1])); }
var fy = function(d) { return yScale(d[0]); }
var yText = function(d, i) { return fy(d) + yScale.rangeBand() / 2; };
var barLabel = function(d) { return d[0]; };

var labelsContainer = svg.append("g").attr("transform", "translate("+(barLabelWidth-margin.left) + "," + margin.top + ")");
labelsContainer.selectAll("text").data(dataset).enter().append('text')
.attr('y', yText)
.attr('stroke', 'none')
.attr('fill', 'black')
.attr("dy", ".25em") // vertical-align: middle
.attr('text-anchor', 'end')
.attr("font-size", "11px")
.text(barLabel);

var barsContainer = svg.append("g").attr("transform", "translate(" + barLabelWidth + "," + margin.top + ")");
barsContainer.selectAll(".bar")
.data(dataset)
.enter().append("rect")
.attr("class", function(d) { return d[1] < 0 ? "bar negative" : "bar positive"; })
.attr("x", function(d) { return xScale(Math.min(0, d[1])); })
.attr("y", function(d) { return yScale(d[0]); })
.attr("x", fx)
.attr("y", fy)
.attr("width", function(d) { return Math.abs(xScale(d[1]) - xScale(0)); })
.attr("height", yScale.rangeBand())
.attr("height", yScale.rangeBand());
/*
.on("mouseover", function (d) {
var xPosition = width + document.getElementById(divid).offsetLeft;
var yPosition = parseFloat(d3.select(this).attr("y")) + yScale.rangeBand() / 2 + document.getElementById(divid).offsetTop;
Expand All @@ -53,49 +73,73 @@ function g_varimp(divid, names, varimp) {
})
.on("mouseout", function(d) {
tooltip.classed("hidden", true);
});
});*/

var dname = function(d) { return d[0]; };
var dval = function(d) { return d[1]; };
var tval = function(d) { return d3.round(dval(d), 2); };

barsContainer.selectAll("text").data(dataset).enter().append("text")
.attr("x", function(d) { return xScale(dval(d)); })
.attr("y", yText)
.attr("dx", 3) // padding-left
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "start") // text-align: right
.attr("fill", "black")
.attr("stroke", "none")
.attr("font-size", "11px")
.text(function(d) { return tval(d); });

svg.append("g")
// Axes into a dedicated container
var gridContainer = svg.append("g").attr("transform", "translate(" + barLabelWidth + "," + margin.top + ")");
gridContainer.append("g")
.attr("class", "x axis")
.call(xAxis);

svg.append("g")
gridContainer.append("g")
.attr("class", "y axis")
.append("line")
.attr("x1", xScale(0))
.attr("x2", xScale(0))
.attr("y2", height);
}

$(document).ready(function() {
var svg = d3.select("#graphvarimp");
var varimp = svg.selectAll(".bar").data().map(function(d) {return d[1]});
var names = svg.selectAll(".bar").data().map(function(d) {return d[0]});
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 640 - margin.left - margin.right,
height = names.length*20 - margin.top - margin.bottom;

var yScale = d3.scale.ordinal()
.rangeRoundBands([0, height], .2)
.domain(names);
// Hook for sort button
$(document).ready(function() {
var sorted = false;
var sortIt = function() {
sorted = !sorted;
bars = function(l,r) {
if (sorted) {
return l[1]- r[1];
}
return r[1]- l[1];
}
barsContainer.selectAll(".bar")
.sort(bars)
.transition()
.delay(function(d,i) { return i * 40;})
.duration(400)
.attr("y", function(d,i) {
return yScale(names[i]);
});
barsContainer.selectAll("text")
.sort(bars)
.transition()
.delay(function(d,i) { return i * 40;})
.duration(400)
.text(function(d) { return tval(d); })
.attr("text-anchor", "start") // text-align: right
.attr("x", function(d,i) { return xScale(dval(d)); })
.attr("y", function(d,i) { return yScale(names[i]) + yScale.rangeBand() / 2; } );
labelsContainer.selectAll("text")
.sort(bars)
.transition()
.delay(function(d,i) { return i * 40;})
.duration(400)
.text(function(d,i) { return d[0]; })
.attr("y", function(d,i) { return yScale(names[i]) + yScale.rangeBand() / 2; } );
};
d3.select("#sortBars").on("click", sortIt);
});
}

var sorted = false;
var sortIt = function() {
sorted = !sorted;
bars = function(l,r) {
if (sorted) {
return l[1]- r[1];
}
return r[1]- l[1];
}
svg.selectAll(".bar")
.sort(bars)
.transition()
.delay(function(d,i) { return i * 40;})
.duration(800)
.attr("y", function(d,i) {
return yScale(names[i]);
});
};
d3.select("#sortBars").on("click", sortIt);
});

0 comments on commit 939f68c

Please sign in to comment.