StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.7 KiB
115 lines
2.7 KiB
<html>
|
|
<head>
|
|
<script src="d3.js"></script>
|
|
<script src="../build/d3-lasso.js"></script>
|
|
<style>
|
|
svg {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
circle {
|
|
fill-opacity: 0.5;
|
|
}
|
|
|
|
.lasso path {
|
|
stroke: rgb(80,80,80);
|
|
stroke-width:2px;
|
|
}
|
|
|
|
.lasso .drawn {
|
|
fill-opacity:.05 ;
|
|
}
|
|
|
|
.lasso .loop_close {
|
|
fill:none;
|
|
stroke-dasharray: 4,4;
|
|
}
|
|
|
|
.lasso .origin {
|
|
fill:#3399FF;
|
|
fill-opacity:.5;
|
|
}
|
|
|
|
.not_possible {
|
|
fill: rgb(200,200,200);
|
|
}
|
|
|
|
.possible {
|
|
fill: #EC888C;
|
|
}
|
|
|
|
.selected {
|
|
fill: steelblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
var data = new Array(100).fill(null).map(m=>[Math.random(),Math.random()]);
|
|
var w = 400;
|
|
var h = 400;
|
|
var r = 3.5;
|
|
|
|
var svg = d3.select("body").append("svg")
|
|
.attr("width",w)
|
|
.attr("height",h);
|
|
|
|
var circles = svg.selectAll("circle")
|
|
.data(data)
|
|
.enter()
|
|
.append("circle")
|
|
.attr("cx",d=>d[0]*w)
|
|
.attr("cy",d=>d[1]*h)
|
|
.attr("r",r);
|
|
|
|
// Lasso functions
|
|
var lasso_start = function() {
|
|
lasso.items()
|
|
.attr("r",3.5) // reset size
|
|
.classed("not_possible",true)
|
|
.classed("selected",false);
|
|
};
|
|
|
|
var lasso_draw = function() {
|
|
|
|
// Style the possible dots
|
|
lasso.possibleItems()
|
|
.classed("not_possible",false)
|
|
.classed("possible",true);
|
|
|
|
// Style the not possible dot
|
|
lasso.notPossibleItems()
|
|
.classed("not_possible",true)
|
|
.classed("possible",false);
|
|
};
|
|
|
|
var lasso_end = function() {
|
|
// Reset the color of all dots
|
|
lasso.items()
|
|
.classed("not_possible",false)
|
|
.classed("possible",false);
|
|
|
|
// Style the selected dots
|
|
lasso.selectedItems()
|
|
.classed("selected",true)
|
|
.attr("r",7);
|
|
|
|
// Reset the style of the not selected dots
|
|
lasso.notSelectedItems()
|
|
.attr("r",3.5);
|
|
|
|
};
|
|
|
|
var lasso = d3.lasso()
|
|
.closePathSelect(true)
|
|
.closePathDistance(100)
|
|
.items(circles)
|
|
.targetArea(svg)
|
|
.on("start",lasso_start)
|
|
.on("draw",lasso_draw)
|
|
.on("end",lasso_end);
|
|
|
|
svg.call(lasso);
|
|
</script>
|
|
</body>
|
|
</html> |