Force Update Pattern

Example from d3 #help slack channel

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

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

var api = "https://budino-server.eu-west-1.elasticbeanstalk.com/api";

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

var nodes = fizzbuzz();

var simulation = d3.forceSimulation(nodes)
                            .force("charge", d3.forceManyBody().strength(-150))
                            .force("forceX", d3.forceX().strength(.1))
                            .force("forceY", d3.forceY().strength(.1))
                            .force("center", d3.forceCenter())
                            .alphaTarget(1)
                            .on("tick", ticked);

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(fizzbuzz())

}, 3000);

function restart(nodes) {
console.log('restart', nodes)
             // transition
             var t = d3.transition()
                       .duration(750);

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

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

node
                 .transition(t)
                 .style("fill", "#3a403d")
                 .attr("r", function(d){ return d.size; });

node = node.enter().append("circle")
                        .style("fill", "#45b29d")
                        .attr("r", function(d){ return d.size; })
                        .merge(node);

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

}

function fizzbuzz() {
console.log('enter fizzbuzz', node)
             d3.json(api, function (error, json) {

if (error) {console.log(error);}

var nodules = json.map(function(d) {
                     return {

id : d.id,
                         macid: d.macid,
                         label: d.label,
                         frequency: d.frequency,
                         make: d.make,
                         group: d.group,
                         size: d.frequency/10

};
                 });

nodules.sort(function(a,b) { return b.frequency - a.frequency; });

console.log({nodules});

return nodules;

});
console.log('exit fizzbuzz', node)
         }

function ticked() {
           console.log('ticked', node)
             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

https://unpkg.com/lodash