a force layout where like-nodes cluster together, drawn from static data
an iteration on the block Clustered Force Layout 4.0 from @shancarter
while es-linting code from this block, I read up on operator precendence in Javascript. It turns out that multiplication * is evaluated before division /.
check out the companion repo for a nice commit history and related experiments
<!doctype html>
<meta charset='utf-8'>
<body>
<script src='//d3js.org/d3.v4.min.js'></script>
<script src='vis.js'></script>{
"nodes": [
{
"cluster": 9,
"r": 9.259670255973901
},
{
"cluster": 7,
"r": 8.909499905215805
},
{
"cluster": 6,
"r": 13.111974353489249
},
{
"cluster": 8,
"r": 11.373085883848557
},
{
"cluster": 2,
"r": 0.813474563335458
},
{
"cluster": 3,
"r": 4.341946600458814
},
{
"cluster": 2,
"r": 6.667333434466238
},
{
"cluster": 9,
"r": 7.911498350320349
},
{
"cluster": 0,
"r": 4.597604124486907
},
{
"cluster": 6,
"r": 4.340571868290901
},
{
"cluster": 5,
"r": 3.5878606980553065
},
{
"cluster": 0,
"r": 0.3818599744977188
},
{
"cluster": 6,
"r": 6.874201213903172
},
{
"cluster": 7,
"r": 11.988881995045055
},
{
"cluster": 0,
"r": 0.7375641615588722
},
{
"cluster": 1,
"r": 3.83142426518969
},
{
"cluster": 5,
"r": 2.7302570653623466
},
{
"cluster": 7,
"r": 2.1650055752224318
},
{
"cluster": 7,
"r": 3.7860658129035656
},
{
"cluster": 4,
"r": 16.962609275339474
},
{
"cluster": 2,
"r": 7.397340156592428
},
{
"cluster": 2,
"r": 6.999531169611245
},
{
"cluster": 6,
"r": 13.019894090019307
},
{
"cluster": 0,
"r": 4.046616197852555
},
{
"cluster": 8,
"r": 3.225328780272923
},
{
"cluster": 8,
"r": 6.087740584733343
},
{
"cluster": 8,
"r": 14.425967477661167
},
{
"cluster": 8,
"r": 3.34470377759449
},
{
"cluster": 1,
"r": 4.293510114124356
},
{
"cluster": 7,
"r": 11.914055313583855
},
{
"cluster": 2,
"r": 3.6810638302844323
},
{
"cluster": 9,
"r": 13.045300117867052
},
{
"cluster": 0,
"r": 1.9679969981361989
},
{
"cluster": 4,
"r": 6.002836962375587
},
{
"cluster": 5,
"r": 5.44559457861006
},
{
"cluster": 3,
"r": 7.112859827105364
},
{
"cluster": 2,
"r": 3.8631945337911615
},
{
"cluster": 5,
"r": 9.808344270855102
},
{
"cluster": 8,
"r": 8.786242195775312
},
{
"cluster": 2,
"r": 2.4304680551459286
},
{
"cluster": 8,
"r": 7.690584140956325
},
{
"cluster": 1,
"r": 3.8063210378920243
},
{
"cluster": 5,
"r": 7.604382514568928
},
{
"cluster": 9,
"r": 17.434628390107957
},
{
"cluster": 0,
"r": 1.6252513672061384
},
{
"cluster": 2,
"r": 7.331808927318587
},
{
"cluster": 4,
"r": 8.116763401587676
},
{
"cluster": 6,
"r": 6.903091426770327
},
{
"cluster": 3,
"r": 8.962587526121954
},
{
"cluster": 4,
"r": 5.087408184352244
},
{
"cluster": 7,
"r": 11.451560642415068
},
{
"cluster": 3,
"r": 11.261865276144224
},
{
"cluster": 8,
"r": 3.7619998884007604
},
{
"cluster": 4,
"r": 5.852465067502188
},
{
"cluster": 3,
"r": 2.2988242179838516
},
{
"cluster": 4,
"r": 19.169514948665487
},
{
"cluster": 9,
"r": 5.862770330322363
},
{
"cluster": 2,
"r": 9.351640223353849
},
{
"cluster": 9,
"r": 10.430131136161929
},
{
"cluster": 7,
"r": 5.289130100573111
},
{
"cluster": 0,
"r": 2.1931576543536737
},
{
"cluster": 8,
"r": 7.344952622197862
},
{
"cluster": 3,
"r": 6.362549353826214
},
{
"cluster": 0,
"r": 5.912921938589746
},
{
"cluster": 5,
"r": 5.84701314380495
},
{
"cluster": 5,
"r": 17.53188903716625
},
{
"cluster": 8,
"r": 16.454719754871196
},
{
"cluster": 1,
"r": 2.0967313521660165
},
{
"cluster": 8,
"r": 22.665073351721833
},
{
"cluster": 0,
"r": 2.3953220941716147
},
{
"cluster": 8,
"r": 17.398089063400704
},
{
"cluster": 2,
"r": 4.489631238988284
},
{
"cluster": 1,
"r": 1.5550861469241708
},
{
"cluster": 7,
"r": 6.828176179631646
},
{
"cluster": 5,
"r": 1.3949983557808792
},
{
"cluster": 7,
"r": 18.15519976143089
},
{
"cluster": 4,
"r": 10.777944013818828
},
{
"cluster": 4,
"r": 5.727158717707772
},
{
"cluster": 7,
"r": 15.263980953990075
},
{
"cluster": 0,
"r": 4.140056876451165
},
{
"cluster": 3,
"r": 11.809815703272445
},
{
"cluster": 3,
"r": 7.625769247350361
},
{
"cluster": 8,
"r": 11.670369407548918
},
{
"cluster": 3,
"r": 2.864976753122453
},
{
"cluster": 1,
"r": 5.782808182124143
},
{
"cluster": 9,
"r": 20.27296671509774
},
{
"cluster": 8,
"r": 7.424973928831013
},
{
"cluster": 4,
"r": 11.477056172978916
},
{
"cluster": 7,
"r": 13.072068416142244
},
{
"cluster": 1,
"r": 1.312838094842473
},
{
"cluster": 3,
"r": 8.5523149371797
},
{
"cluster": 2,
"r": 5.241904021515078
},
{
"cluster": 3,
"r": 11.448925815920003
},
{
"cluster": 0,
"r": 4.609895492082293
},
{
"cluster": 9,
"r": 8.588913842173824
},
{
"cluster": 1,
"r": 5.496249454373348
},
{
"cluster": 4,
"r": 4.9553056846580485
},
{
"cluster": 2,
"r": 6.951273479651984
},
{
"cluster": 9,
"r": 5.759588486541276
},
{
"cluster": 5,
"r": 0.8585655746100416
},
{
"cluster": 8,
"r": 5.4857925910781855
},
{
"cluster": 4,
"r": 9.036566271337456
},
{
"cluster": 5,
"r": 2.9200903345628006
},
{
"cluster": 6,
"r": 9.381396697639099
},
{
"cluster": 3,
"r": 6.095422235806083
},
{
"cluster": 7,
"r": 9.690503428977397
},
{
"cluster": 3,
"r": 6.006485216173571
},
{
"cluster": 3,
"r": 8.76405182817216
},
{
"cluster": 5,
"r": 0.4808168518632294
},
{
"cluster": 2,
"r": 11.450886171521642
},
{
"cluster": 6,
"r": 6.071099103644298
},
{
"cluster": 1,
"r": 6.034605011868475
},
{
"cluster": 7,
"r": 3.640626110465396
},
{
"cluster": 5,
"r": 6.129561103598028
},
{
"cluster": 9,
"r": 5.4690797797471316
},
{
"cluster": 1,
"r": 1.288352602570954
},
{
"cluster": 1,
"r": 4.503481956678496
},
{
"cluster": 0,
"r": 4.968285461344784
},
{
"cluster": 5,
"r": 4.869913292532537
},
{
"cluster": 8,
"r": 19.035513800218055
},
{
"cluster": 2,
"r": 5.1820315591317065
},
{
"cluster": 7,
"r": 18.328291456381145
},
{
"cluster": 8,
"r": 6.4765003613544705
},
{
"cluster": 6,
"r": 9.75904707313678
},
{
"cluster": 3,
"r": 4.071578675034565
},
{
"cluster": 4,
"r": 13.194936050984108
},
{
"cluster": 0,
"r": 4.155648062659441
},
{
"cluster": 0,
"r": 1.0802805219045832
},
{
"cluster": 9,
"r": 23.053981988652996
},
{
"cluster": 5,
"r": 2.463089780679736
},
{
"cluster": 1,
"r": 5.132590626539599
},
{
"cluster": 7,
"r": 6.93572766107949
},
{
"cluster": 0,
"r": 3.4720879272197287
},
{
"cluster": 9,
"r": 15.877291057948877
},
{
"cluster": 9,
"r": 14.134502338886765
},
{
"cluster": 1,
"r": 4.545784293988218
},
{
"cluster": 2,
"r": 9.317274725878152
},
{
"cluster": 8,
"r": 12.123802063260968
},
{
"cluster": 0,
"r": 5.321990904712712
},
{
"cluster": 3,
"r": 1.4041552057405893
},
{
"cluster": 4,
"r": 9.920924102977988
},
{
"cluster": 5,
"r": 5.478774195361606
},
{
"cluster": 9,
"r": 9.526789295392865
},
{
"cluster": 4,
"r": 6.518980383115273
},
{
"cluster": 9,
"r": 14.995010382404313
},
{
"cluster": 9,
"r": 16.642003223956607
},
{
"cluster": 5,
"r": 4.114844420766859
},
{
"cluster": 7,
"r": 0.49892292359509965
},
{
"cluster": 3,
"r": 6.275627467950188
},
{
"cluster": 3,
"r": 9.81168599309813
},
{
"cluster": 6,
"r": 12.64377750017487
},
{
"cluster": 3,
"r": 12.797889781218368
},
{
"cluster": 4,
"r": 7.618020914702662
},
{
"cluster": 5,
"r": 10.731774476576987
},
{
"cluster": 5,
"r": 9.716585571655193
},
{
"cluster": 6,
"r": 18.565683428845595
},
{
"cluster": 6,
"r": 3.8217862145573287
},
{
"cluster": 3,
"r": 3.8588917727479473
},
{
"cluster": 8,
"r": 4.4774999074563855
},
{
"cluster": 3,
"r": 4.318195408619502
},
{
"cluster": 2,
"r": 6.328501633198946
},
{
"cluster": 1,
"r": 4.094078339502131
},
{
"cluster": 3,
"r": 3.8588240066751505
},
{
"cluster": 1,
"r": 4.004632383005384
},
{
"cluster": 6,
"r": 13.881526898543534
},
{
"cluster": 4,
"r": 12.506719650183388
},
{
"cluster": 4,
"r": 0.487449443958749
},
{
"cluster": 3,
"r": 2.993864029861696
},
{
"cluster": 1,
"r": 3.4358535790337443
},
{
"cluster": 9,
"r": 11.61416030506196
},
{
"cluster": 6,
"r": 13.775399779244715
},
{
"cluster": 8,
"r": 7.873977390020491
},
{
"cluster": 1,
"r": 3.097979808541668
},
{
"cluster": 8,
"r": 9.31232564478648
},
{
"cluster": 6,
"r": 11.940072218061433
},
{
"cluster": 0,
"r": 4.10117521077354
},
{
"cluster": 7,
"r": 10.51899397149345
},
{
"cluster": 8,
"r": 8.865336255450714
},
{
"cluster": 6,
"r": 6.963356353488244
},
{
"cluster": 5,
"r": 2.4384432695021627
},
{
"cluster": 4,
"r": 7.6272270137507245
},
{
"cluster": 1,
"r": 1.1509093147707856
},
{
"cluster": 3,
"r": 11.79628492531506
},
{
"cluster": 1,
"r": 9.39586561627845
},
{
"cluster": 8,
"r": 5.451120564138922
},
{
"cluster": 9,
"r": 25.661014262625976
},
{
"cluster": 5,
"r": 16.70431528730784
},
{
"cluster": 8,
"r": 5.789847734049817
},
{
"cluster": 3,
"r": 7.967538691580401
},
{
"cluster": 6,
"r": 16.50366405247469
},
{
"cluster": 2,
"r": 8.28219564420553
},
{
"cluster": 3,
"r": 8.152748149145362
},
{
"cluster": 8,
"r": 5.220993365370065
},
{
"cluster": 5,
"r": 7.2993278654242815
},
{
"cluster": 4,
"r": 7.2263395643139
},
{
"cluster": 2,
"r": 12.25015185685546
},
{
"cluster": 4,
"r": 1.6578362894228034
},
{
"cluster": 1,
"r": 4.094982685322045
},
{
"cluster": 6,
"r": 13.592577795980258
},
{
"cluster": 6,
"r": 7.6784326664344835
}
],
"links": []
}/* global d3 */
d3.json('graph.json', (error, graph) => {
const nodes = graph.nodes;
console.log('nodes', nodes);
const margin = { top: 100, right: 100, bottom: 100, left: 100 };
const width = 960;
const height = 500;
// separation between same-color circles
const padding = 1.5;
// separation between different-color circles
const clusterPadding = 6;
const maxRadius = 12;
const z = d3.scaleOrdinal(d3.schemeCategory20);
// total number of nodes
const n = nodes.length;
// collect clusters from nodes
const clusters = {};
nodes.forEach((node) => {
const radius = node.r;
const clusterID = node.cluster;
if (!clusters[clusterID] || (radius > clusters[clusterID].r)) {
clusters[clusterID] = node;
}
});
console.log('clusters', clusters);
const svg = d3.select('body')
.append('svg')
.attr('height', height)
.attr('width', width)
.append('g')
.attr('transform', `translate(${width / 2},${height / 2})`);
const circles = svg.append('g')
.datum(nodes)
.selectAll('.circle')
.data(d => d)
.enter().append('circle')
.attr('r', d => d.r)
.attr('fill', d => z(d.cluster))
.attr('stroke', 'black')
.attr('stroke-width', 1);
const simulation = d3.forceSimulation(nodes)
.velocityDecay(0.2)
.force('x', d3.forceX().strength(0.0005))
.force('y', d3.forceY().strength(0.0005))
.force('collide', collide)
.force('cluster', clustering)
.on('tick', ticked);
function ticked() {
circles
.attr('cx', d => d.x)
.attr('cy', d => d.y);
}
// These are implementations of the custom forces
function clustering(alpha) {
nodes.forEach((d) => {
const cluster = clusters[d.cluster];
if (cluster === d) return;
let x = d.x - cluster.x;
let y = d.y - cluster.y;
let l = Math.sqrt((x * x) + (y * y));
const r = d.r + cluster.r;
if (l !== r) {
l = ((l - r) / l) * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
});
}
function collide(alpha) {
const quadtree = d3.quadtree()
.x(d => d.x)
.y(d => d.y)
.addAll(nodes);
nodes.forEach((d) => {
const r = d.r + maxRadius + Math.max(padding, clusterPadding);
const nx1 = d.x - r;
const nx2 = d.x + r;
const ny1 = d.y - r;
const ny2 = d.y + r;
quadtree.visit((quad, x1, y1, x2, y2) => {
if (quad.data && (quad.data !== d)) {
let x = d.x - quad.data.x;
let y = d.y - quad.data.y;
let l = Math.sqrt((x * x) + (y * y));
const r = d.r + quad.data.r + (d.cluster === quad.data.cluster ? padding : clusterPadding);
if (l < r) {
l = ((l - r) / l) * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.data.x += x;
quad.data.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
});
}
});