pack enclose tests

forked from emeeks's block: pack enclose tests

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
  <style>svg {overflow: visible;}</style>
</head>
<body>
    <svg width=960 height=500>
    </svg>
    <script src="https://d3js.org/d3.v5.js"></script>

var color = {
      "a": "#cfd0d0",
      "b": "#F24236" 
    }
    let groups = ["embedded", "dedicated"]

const nodes = d3.range(5000).map((d,i) => {
      if (i < 500) {
        return { color: "b", embedded: false, dedicated: true, center: 515 }
      }
        return { color: "a", embedded: true, dedicated: false, center: 0 }

})

var simulation = d3.forceSimulation()
       .force("collision", d3.forceCollide(6).iterations(2))
       .force("x", d3.forceX(a => a.center).strength(0.05))
       .force("y", d3.forceY(0).strength(0.05))
       .force("center", d3.forceCenter(width / 2, height / 2))
       .alphaDecay(0.005)
       .alpha(0.25)
        .nodes(nodes)
        .on("tick", ticked)
       .stop()

simulation.tick()
        
      var node = svg.append("g")
          .attr("class", "nodes")
        .selectAll("circle")
        .data(nodes)
        .enter().append("circle")
          .attr("r", 2)
          //.style("stroke", "black")
            .attr("cx", d => d.x)
            .attr("cy", d => d.y)
          .style("fill", d => color[d.color])

setTimeout(() => { simulation.restart() }, 250);

let points = groups.map(p => nodes
      .filter(d => d[p])
      .map(d => ({ x: d.x, y: d.y, r: 5 })))

var circle = points.map( p => d3.packEnclose(p))
    
    var bounds = g.selectAll(".bounds")
        .data(circle)//, 260])
      .enter().append("circle")
        .attr("cx", (d) => d.x)
        .attr("cy", (d) => d.y)
        .attr("r", (d) => d.r)
        .attr("fill", 'whitesmoke')
    		.attr("opacity", 0.85)

function ticked() {
        node
            .attr("cx", (d) => d.x)
            .attr("cy", (d) => d.y)
        points = groups.map(p => nodes
          .filter(d => d[p])
          .map(d => ({ x: d.x, y: d.y, r: 5 })))
        
        circle = points.map( p => d3.packEnclose(p))
        
        bounds.data(circle).transition()
          .duration(80)
          .attr("cx", (d) => d.x)
          .attr("cy", (d) => d.y)
          .attr("r", (d) => d.r)
      }

</script>
</body>
</html>

https://d3js.org/d3.v5.js