D3 Examples - d3 force directed particle flow (v4)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<button id="combine-btn" style="margin-left:10px; margin-top:10px;">Combine</button>
<button id="separate-btn" style="margin-left:3px; margin-top:10px;">Separate</button>
<button id="restart-btn" style="margin-left:700px; margin-top:10px;">Restart</button>
<div id="target"></div>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
​
const width = 960,
      height = 600,
      radius = 4,
      color = d3.schemePaired;
​
let nodes = [],
    counter = 0,
    int;
​
let svg = d3.select("#target").append("svg")
    .attr("width", width)
    .attr("height", height);
​
let simulation = d3.forceSimulation()
      .force("x", d3.forceX().x(width/2))
      .force("y", d3.forceY().y(height/2))
      .force("gravity", d3.forceManyBody().strength(-radius))
      .force("collide", d3.forceCollide()
          .radius(d => d.radius + 1.1)
          .iterations(5)
      )
      .on("tick", () => {
        svg.selectAll("circle")
          .attr("cx", d => d.x)
          .attr("cy", d => d.y);
      });
​
startSimulation();
​
function startSimulation() {
  int = d3.interval(() => {
        addNode();
        updateSim();
        if (counter > 440) {
            int.stop();
        }
    }, 80);
}
​
function addNode() {
​
    let offenseGroup = Math.floor(d3.randomUniform(7)()) + 1;
​
    nodes.push(
        {
            radius,
            x: width/2,
            y: 0,
            offenseGroup,
            fill: color[offenseGroup]
        }
    );
​
    counter += 1;
}
​
d3.select("#combine-btn").on("click", () => combine());
d3.select("#separate-btn").on("click", () => separate());
d3.select("#restart-btn").on("click", () => restart());
​
function restart() {
  nodes = [];
  counter = 0;
  int.stop();
  simulation.restart();
  updateSim();
  startSimulation();
}
​
function separate() {
    simulation.force("x", d3.forceX().x(d => d.offenseGroup * width/8));
}
​
function combine() {
    simulation.force("x", d3.forceX().x(width/2));
}
​
function updateSim() {
​
    simulation.nodes(nodes);
​
    let bubs = svg.selectAll("circle")
        .data(nodes);
​
    bubs.exit().remove();
​
    bubs.enter().append("circle")
    .attr("r", function(d) { return d.radius; })
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("stroke", d => d3.rgb(d.fill).darker())
    .attr("stroke-width", 1)
    .style("fill", function(d) { return d.fill; })
    .style("opacity", 0.6)
    .merge(bubs);
​
    simulation.alphaTarget(0.5);
​
}
​
</script>
​
    