d3.lasso example - scatterplot

Built with blockbuilder.org. Forked from here to answer question on StackOverflow

<!DOCTYPE html>
<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;
      }
      
      .selected {
        fill: steelblue;
      }
.textBox rect {
  fill: steelblue;
}
text.selection {
  font-size: 12px;
  fill: #FFF;
  letter-spacing: 0.1em;
  font-weight: 300;
}    
  </style>
</head>
<body>

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