d3.lasso example - scatterplot

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

forked from shashank2104's block: d3.lasso example - scatterplot

<!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);
    }
     .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