d3-cluster

d3-cluster compiled from @stormpython and @emeeks’ https://github.com/stormpython/d3-cluster

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-cluster.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  svg {
    height: 1000px;
    width: 1000px;
    border: 1px solid lightgray;
  }
</style>
</head>

<body>

<div id="viz">
  <svg class="main">
  </svg>
</div>
</body>
  <footer>
<script>
const colors = [
    "#00a2ce",
    "#4d430c",
    "#b3331d",
    "#b6a756"
]
const testData = []
for (let x=1;x<500;x++) {
    testData.push({ x: 10 + Math.random() * 940, y: 10 + Math.random() * 480, r: 1 + Math.random() * 20, color: colors[x%4] })
}
d3.select("svg")
  .selectAll("circle")
  .data(testData)
  .enter()
  .append("circle")
  .attr("r", d => d.r)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .style("fill", d => d.color)
  .style("fill-opacity", 0.5)

setTimeout(() => {
  const cluster = d3.cluster()
  .x(d => d.x)
  .y(d => d.y)
  .radius(d => d.r);
d3.select("svg")
  .selectAll("circle.collision")
  .data(cluster(testData))
  .enter()
  .append("circle")
  .attr("r", d => d.radius)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .style("fill", "#FCBC34")
  .style("fill-opacity", d => d.overlap.length === 0  ? 1 : 0)
  .style("stroke", d => d.overlap.length === 0 ? "none" : "#FE9922")
  .style("stroke-width", d => d.overlap.length + 1)

}, 1000)
</script>
  </footer>

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