self-sorting nodes in d3 fdg

Force Directed Graph with self sorting nodes - Inertial winnowing

Features

Collisions between nodes
Based on this example but enhanced to simulate inertia. The distance each node is moved away from the collision is proportional to their relative mass. Since gravity is switched on and friction is set for low damping, the heavier nodes will move towards the center of the graph and the smaller nodes pushed out of the way. The mass is calculated assuming the nodes are spheres, using r³, and the rebounds calculated according to relative "mass".

  force.alpha(a/0.99*(1 - x))

d3 features used

forked from cool-Blue's block: self-sorting nodes in d3 fdg

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        /*margin: 200px 500px 100px 500px;*/
    }

#inputs {
        display: inline-block;
        margin: 0 0 0 0.5em;
    }

#panel {
        display: inline-block;
        margin: 0 0 0 100px;
        border: none;
        box-sizing: border-box;
        background-color: black;
    }

#metrics {
        display: inline-block;
    }

label, input {
        text-align: left;
        width: 3.5em;
        color: orange;
        /*padding-left: 1em;*/
        background-color: black;
        outline: none;
        border: none;
    }

circle {
        stroke: black;
    }

svg {
        display: block;
        overflow: visible;
        border: none;
        background: black;
        margin: 0 100px 0 100px;
    }

text {
        text-anchor: middle;
    }

rect {
        stroke: #ccc;
    }

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/filters/shadow.js"></script>
<script
    src="https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/elapsedTime/elapsed-time-1.0.js"></script>
<script>
    var inputs = d3.select("body").append("div")
            .attr("id", "metrics")
            .attr("id", "panel")
            .append("div").attr({id: "inputs"}),
        nodeCount = inputs.append("label")
            .attr("for", "nodeCount")
            .text("nodes: ")
            .append("input")
            .attr({id    : "nodeCount",
                class    : "numIn",
                type     : "number",
                min      : "100",
                max      : "5,000",
                step     : "100",
                inputmode: "numeric"
            });

var elapsedTime = ElapsedTime("#panel", {
            border : 0, margin: 0, "box-sizing": "border-box",
            padding: "0 0 0 3px", background: "black", "color": "orange"
        })
            .message(function(value) {
                var this_lap = this.lap().lastLap, aveLap = this.aveLap(this_lap)
                return 'alpha:' + d3.format(" >7,.3f")(value)
                    + '\ttick time:' + d3.format(" >8,.4f")(this_lap)
                    + ' (' + d3.format(" >4,.3f")(this.aveLap(this_lap)) + ')'
                    + '\tframe rate:' + d3.format(" >4,.1f")(1 / aveLap) + " fps"
            }),

width = 960 - 200,
        height = 500 - elapsedTime.selection.node().clientHeight,
        padding = 4, // separation between nodes
        maxRadius = 7;

var n = 500, // total number of nodes
        m = 1, // number of distinct layers
        c = 10,
        g  = 0.2, g2 = 0.1,
        f1 = 0.5, f2 = 0.01,
        q2 = -40;

var tick = (function() {
            var phase = -1, stage1 = true;

tick.reset = function() {
                stage1 = true;
            };
            return tick;
        })(),
        force = d3.layout.force()
            .size([width, height])
            .gravity(g)
            .charge(0)
            .friction(f1)
            .on("tick", tick)
            .on("start", function() {
                elapsedTime.start(1000);
                force
                    .gravity(g)
                    .charge(0)
                    .friction(f1)
                tick.reset();
            });
    force.drag().on("dragend", function(){force.alpha(0.05)})

var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g"),
        bubble = Bubble(svg);

var viz = update(force, n, padding);

nodeCount
        .property("value", n)
        .on("change", function() {
            viz = update(force, this.value, padding);
            this.blur();
        });

elapsedTime.selection.style({
        width: (width
        - parseFloat(window.getComputedStyle(d3.select("#inputs").node()).getPropertyValue("width"))
        - parseFloat(window.getComputedStyle(d3.select("#inputs").node()).getPropertyValue("margin-left")))
        + "px"
    });

</script>
</body>

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/filters/shadow.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/filters/shadow.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/filters/shadow.js