d3.lasso example - scatterplot

forked from skokenes's block: d3.lasso example - scatterplot to answer SO question

<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;
      }
    </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]];

const colours = d3.scaleOrdinal()
          .domain(data)
          .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);

var canvasW = 675;
      var canvasH = 400;   
      var w = 365;
      var h = 365;
      var xPadding = 30;
      var yPadding = 20;
      var padding = 10;

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 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 lasso_end = function() {
          lasso.items()
              .classed("not_possible",false)
              .classed("possible",false);

lasso.selectedItems()
              .classed("selected",true)
              .attr("r",7);

lasso.notSelectedItems()
              .attr("r",3.5);

};

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

var lasso = d3.lasso()
          .closePathDistance(75) 
          .closePathSelect(true) 
          .targetArea(svg)
          .items(circles) 
          .on("start",lasso_start) 
          .on("draw",lasso_draw) 
          .on("end",lasso_end);

svg.call(lasso);
    </script>
</body>
</html>

https://d3js.org/d3.v4.min.js