Force Update Pattern BC

An attempt to replicate Mike's General Update Pattern, III with a force layout. The update has four parts: (1) Join, (2) Exit, (3) Update, (4) Enter.

forked from HarryStevens's block: Force Update Pattern

forked from Thanaporn-sk's block: Force Update Pattern

forked from lorenzopub's block: Force Update Pattern

var alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

var width = window.innerWidth,
        height = window.innerHeight;

var nodes = randomizeData();

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
        node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

d3.interval(function(){
      restart(randomizeData())
    }, 2000);

function restart(nodes) {
      
      var simulation = d3.forceSimulation(nodes)
        .force("charge", d3.forceManyBody().strength(10))
        .force("x", d3.forceX(-250).strength(.1))
        .force("y", d3.forceY(50).strength(.1))
        .alphaTarget(1)
        .on("tick", ticked);

// transition
      var t = d3.transition()
          .duration(750);

// Apply the general update pattern to the nodes.
      node = node.data(nodes, function(d) { return d.name;});
      
      //console.log(nodes);
      console.log(node);

node.exit()
          .style("fill", "red")
        .transition(t)
          .attr("r", 1e-6)
          .remove();

node = node.enter().append("circle")
          .style("fill", "green")
      		.attr("cx", -250)
        	.attr("cy", 50)
          .attr("r", function(d){ return 10; })
          .merge(node);

// Update and restart the simulation.
      simulation.nodes(nodes)
        .force("collide", d3.forceCollide().strength(1).radius(function(d){ return 20; }));

}

function ticked() {

node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })

}

function random(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

function shuffle(array) {
      var m = array.length, t, i;

// While there remain elements to shuffle…
      while (m) {

// Pick a remaining element…
        i = Math.floor(Math.random() * m--);

// And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
      }

return array;
    }

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

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