Built with blockbuilder.org. Forked from here to answer question on StackOverflow
forked from shashank2104's block: d3.lasso example - scatterplot
xxxxxxxxxx
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-lasso.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url("https://fonts.googleapis.com/css?family=Lato:300");
text {
font-family: "Open Sans Condensed";
}
.axis path {
stroke: black;
}
.tick line {
visibility: hidden;
}
.border {
margin-top: 9px;
margin-left: 29px;
border: .5px solid black;
width: 325px;
height: 335px;
position: absolute;
}
.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;
}
.textBox rect {
fill: steelblue;
}
text.selection {
font-size: 12px;
fill: #FFF;
letter-spacing: 0.1em;
font-weight: 300;
}
</style>
</head>
<body>
<script>
var data = [["Arsenal",-0.0032967741593940836, 0.30399753945657115],["Chelsea", 0.2752159801936051, -0.0389675484210763], ["Liverpool",-0.005096951348655329, 0.026678627680541075], ["Manchester City",-0.004715381791104284, -0.12338379196523988], ["Manchester United",0.06877966010653305, -0.0850615090351779], ["Tottenham",-0.3379518099485709, -0.09933664174939877]];
var selectedTeams = [];
const colours = d3.scaleOrdinal()
.domain(data)
.range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);
var canvasW = 675;
var canvasH = 600;
var w = 365;
var h = 365;
var xPadding = 30;
var yPadding = 20;
var padding = 10;
var border = 0.5;
var bordercolor = 'black';
var xScale = d3.scaleLinear()
.range([xPadding, w - padding])
.domain([-1, 1]);
var yScale = d3.scaleLinear()
.range([h - yPadding, padding])
.domain([-1, 1]);
var svg = d3.select('body')
.append("svg")
.attr('width', canvasW)
.attr('height', canvasH);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 7)
.attr("cx", function(d) { return xScale(d[1]); })
.attr("cy", function(d) { return yScale(d[2]); })
.attr("fill", function(d) {
var result = null;
if (data.indexOf(d) >= 0) {
result = colours(d);
} else {
result = "white";
}
return result;
});
var lasso_start = function() {
lasso.items()
.attr("r",7)
.classed("not_possible",true)
.classed("selected",false);
};
var lasso_draw = function() {
lasso.possibleItems()
.classed("not_possible",false)
.classed("possible",true);
lasso.notPossibleItems()
.classed("not_possible",true)
.classed("possible",false);
};
var modifyTextBox = function (selected) {
if(selected.length) {
var widths = [], textHeight = 0;
var texts = textBox.selectAll('text.selection')
.data(selected);
texts.exit().remove();
texts
.enter().append('text').attr('class', 'selection').attr('x', '3')
.merge(texts)
.attr('y', function (d, i) {
return i * 13 + 12;
}).text(function (d) { return d; });
textBox.selectAll('text.selection')
.each(function (d) {
widths.push(d3.select(this).node().getBBox().width);
textHeight = d3.select(this).node().getBBox().height;
});
var maxW = selected.length ? d3.max(widths) : 0;
textBox.style('display', null).select('rect').attr('width', maxW+10).attr('height', selected.length*textHeight);
} else {
textBox.style('display', 'none');
}
};
var lasso_end = function() {
lasso.items()
.classed("not_possible",false)
.classed("possible",false);
var selected = lasso.selectedItems()
.classed("selected", true)
.attr("r", 13);
var selectedDots = selected.data().map(d=>d[0]);
modifyTextBox(selectedDots);
};
var textBox = svg.append("g").classed('textBox', true).style('display', 'none');
textBox.append("rect")
.attr("height", 10)
.attr("width", 100)
.style("stroke-width", 1);
var area = svg.append("rect")
.attr("width", w)
.attr("height", h)
.style("opacity", 0);
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(circles)
.targetArea(area)
.on("start",lasso_start)
.on("draw",lasso_draw)
.on("end",lasso_end);
var legend = svg.selectAll(".legend")
.data(colours.domain())
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 29 + ")"; });
legend.append("rect")
.attr("x", canvasW - 184)
.attr("y", 11)
.attr("width", 18)
.attr("height", 18)
.style("fill", colours);
legend.append("text")
.attr("x", canvasW - 194)
.attr("y", 20)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d[0];})
svg.call(lasso);
</script>
https://d3js.org/d3.v4.min.js