Group Clustering

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
    	font-family: sans-serif;
    }
    .selected {
      fill: none;
    }
    
    .button {
      min-width: 130px;
      padding: 4px 5px;
      cursor: pointer;
      text-align: center;
      font-size: 13px;
      border: 1px solid #e0e0e0;
      text-decoration: none;
    }

.button.active {
      background: #000;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="toolbar">
      <button id="all" class="button active">All</button>
      <button id="Location" class="button">By Location</button>
      <button id="Group" class="button">By Group</button>
      <button id="Class" class="button">By Class</button>
      <button id="Type" class="button">By Type</button>
    </div>
  <script>
    console.clear()
    var w = 960, h = 500;
    
    var radius = 25;
    var color = d3.scaleOrdinal(d3.schemeCategory20);
    var centerScale = d3.scalePoint().padding(1).range([0, w]);
    var forceStrength = 0.05;
    
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)

simulation
            .nodes(data)
            .on("tick", ticked);
      
      function dragstarted(d,i) {
        //console.log("dragstarted " + i)
        if (!d3.event.active) simulation.alpha(1).restart();
        d.fx = d.x;
        d.fy = d.y;
      }

function dragged(d,i) {
        //console.log("dragged " + i)
        d.fx = d3.event.x;
        d.fy = d3.event.y;
      }

function dragended(d,i) {
        //console.log("dragended " + i)
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
        var me = d3.select(this)
        console.log(me.classed("selected"))
        me.classed("selected", !me.classed("selected"))
        
        d3.selectAll("circle")
          .style("fill", function(d, i){ return color(d.ID); })
      	
        d3.selectAll("circle.selected")
          .style("fill", "none")
      	
      } 
      
      function groupBubbles() {
        hideTitles();

// @v4 Reset the 'x' force to draw the bubbles to the center.
        simulation.force('x', d3.forceX().strength(forceStrength).x(w / 2));

// @v4 We can reset the alpha value and restart the simulation
        simulation.alpha(1).restart();
      }
      
      function splitBubbles(byVar) {
        
        centerScale.domain(data.map(function(d){ return d[byVar]; }));
        
        if(byVar == "all"){
          hideTitles()
        } else {
	        showTitles(byVar, centerScale);
        }
        
        // @v4 Reset the 'x' force to draw the bubbles to their year centers
        simulation.force('x', d3.forceX().strength(forceStrength).x(function(d){ 
        	return centerScale(d[byVar]);
        }));

// @v4 We can reset the alpha value and restart the simulation
        simulation.alpha(2).restart();
      }
      
      function hideTitles() {
        svg.selectAll('.title').remove();
      }

// Set it as the active button
            button.classed('active', true);

// Get the id of the button
            var buttonId = button.attr('id');

console.log(buttonId)
            // Toggle the bubble chart based on
            // the currently clicked button.
            splitBubbles(buttonId);
          });
      }
      
      setupButtons()
      
    })
    
  </script>
</body>

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