Trying to plot overlapping groups bugish

[CrashLaker]

Hi all,

I'm trying to render a graph that could draw group overlays on top of an orgs' hierarchical structure using this example as a quickstart.

json

{"nodes": [{"name": "RT1"}, {"name": "CL0"}, {"name": "CL1"}, {"name": "CL2"}, {"name": "CL0W00"}, {"name": "CL0W01"}, {"name": "CL0W02"}, {"name": "CL0W03"}, {"name": "CL0W04"}, {"name": "CL0W05"}, {"name": "CL0W06"}, {"name": "CL0W07"}, {"name": "CL0W08"}, {"name": "CL0W09"}, {"name": "CL0W10"}, {"name": "CL0W11"}, {"name": "CL0W12"}, {"name": "CL0W13"}, {"name": "CL0W14"}, {"name": "CL0W15"}, {"name": "CL0W16"}, {"name": "CL0W17"}, {"name": "CL0W18"}, {"name": "CL0W19"}, {"name": "CL0W20"}, {"name": "CL1W00"}, {"name": "CL1W01"}, {"name": "CL1W02"}, {"name": "CL1W03"}, {"name": "CL1W04"}, {"name": "CL1W05"}, {"name": "CL1W06"}, {"name": "CL1W07"}, {"name": "CL1W08"}, {"name": "CL1W09"}, {"name": "CL1W10"}, {"name": "CL1W11"}, {"name": "CL1W12"}, {"name": "CL1W13"}, {"name": "CL1W14"}, {"name": "CL1W15"}, {"name": "CL1W16"}, {"name": "CL1W17"}, {"name": "CL1W18"}, {"name": "CL1W19"}, {"name": "CL1W20"}, {"name": "CL1W21"}, {"name": "CL2W00"}, {"name": "CL2W01"}, {"name": "CL2W02"}, {"name": "CL2W03"}, {"name": "CL2W04"}, {"name": "CL2W05"}, {"name": "CL2W06"}, {"name": "CL2W07"}, {"name": "CL2W08"}, {"name": "CL2W09"}, {"name": "CL2W10"}, {"name": "CL2W11"}, {"name": "CL2W12"}, {"name": "CL2W13"}, {"name": "CL2W14"}, {"name": "CL2W15"}, {"name": "CL2W16"}, {"name": "CL2W17"}, {"name": "CL2W18"}, {"name": "CL2W19"}, {"name": "CL2W20"}, {"name": "CL2W21"}, {"name": "CL2W22"}, {"name": "CL2W23"}, {"name": "CL2W24"}, {"name": "CL2W25"}, {"name": "CL2W26"}], "links": [{"source": 0, "target": 3}, {"source": 0, "target": 2}, {"source": 0, "target": 1}, {"source": 1, "target": 18}, {"source": 1, "target": 8}, {"source": 1, "target": 10}, {"source": 1, "target": 21}, {"source": 1, "target": 11}, {"source": 1, "target": 9}, {"source": 1, "target": 16}, {"source": 1, "target": 22}, {"source": 1, "target": 20}, {"source": 1, "target": 13}, {"source": 1, "target": 4}, {"source": 1, "target": 12}, {"source": 1, "target": 6}, {"source": 1, "target": 23}, {"source": 1, "target": 24}, {"source": 1, "target": 5}, {"source": 1, "target": 15}, {"source": 1, "target": 17}, {"source": 1, "target": 19}, {"source": 1, "target": 14}, {"source": 1, "target": 7}, {"source": 2, "target": 36}, {"source": 2, "target": 31}, {"source": 2, "target": 29}, {"source": 2, "target": 42}, {"source": 2, "target": 45}, {"source": 2, "target": 39}, {"source": 2, "target": 41}, {"source": 2, "target": 46}, {"source": 2, "target": 28}, {"source": 2, "target": 44}, {"source": 2, "target": 32}, {"source": 2, "target": 30}, {"source": 2, "target": 35}, {"source": 2, "target": 33}, {"source": 2, "target": 26}, {"source": 2, "target": 40}, {"source": 2, "target": 25}, {"source": 2, "target": 38}, {"source": 2, "target": 43}, {"source": 2, "target": 37}, {"source": 2, "target": 34}, {"source": 2, "target": 27}, {"source": 3, "target": 58}, {"source": 3, "target": 67}, {"source": 3, "target": 66}, {"source": 3, "target": 47}, {"source": 3, "target": 49}, {"source": 3, "target": 52}, {"source": 3, "target": 65}, {"source": 3, "target": 56}, {"source": 3, "target": 73}, {"source": 3, "target": 64}, {"source": 3, "target": 60}, {"source": 3, "target": 53}, {"source": 3, "target": 50}, {"source": 3, "target": 72}, {"source": 3, "target": 57}, {"source": 3, "target": 48}, {"source": 3, "target": 55}, {"source": 3, "target": 51}, {"source": 3, "target": 68}, {"source": 3, "target": 69}, {"source": 3, "target": 61}, {"source": 3, "target": 54}, {"source": 3, "target": 71}, {"source": 3, "target": 63}, {"source": 3, "target": 62}, {"source": 3, "target": 70}, {"source": 3, "target": 59}], "groups": [{"leaves": [0, 1, 2, 3]}, {"leaves": [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]}, {"leaves": [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46]}, {"leaves": [47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73]}]}

so I'm trying to embed the squad, chapter, tribe view onto it somehow like this picture:

source

so it would turn into something of the sort

the whole thing explodes..

json

{"nodes": [{"name": "RT1"}, {"name": "CL0"}, {"name": "CL1"}, {"name": "CL2"}, {"name": "CL0W00"}, {"name": "CL0W01"}, {"name": "CL0W02"}, {"name": "CL0W03"}, {"name": "CL0W04"}, {"name": "CL0W05"}, {"name": "CL0W06"}, {"name": "CL0W07"}, {"name": "CL0W08"}, {"name": "CL0W09"}, {"name": "CL0W10"}, {"name": "CL0W11"}, {"name": "CL0W12"}, {"name": "CL0W13"}, {"name": "CL0W14"}, {"name": "CL0W15"}, {"name": "CL0W16"}, {"name": "CL0W17"}, {"name": "CL0W18"}, {"name": "CL0W19"}, {"name": "CL0W20"}, {"name": "CL1W00"}, {"name": "CL1W01"}, {"name": "CL1W02"}, {"name": "CL1W03"}, {"name": "CL1W04"}, {"name": "CL1W05"}, {"name": "CL1W06"}, {"name": "CL1W07"}, {"name": "CL1W08"}, {"name": "CL1W09"}, {"name": "CL1W10"}, {"name": "CL1W11"}, {"name": "CL1W12"}, {"name": "CL1W13"}, {"name": "CL1W14"}, {"name": "CL1W15"}, {"name": "CL1W16"}, {"name": "CL1W17"}, {"name": "CL1W18"}, {"name": "CL1W19"}, {"name": "CL1W20"}, {"name": "CL1W21"}, {"name": "CL2W00"}, {"name": "CL2W01"}, {"name": "CL2W02"}, {"name": "CL2W03"}, {"name": "CL2W04"}, {"name": "CL2W05"}, {"name": "CL2W06"}, {"name": "CL2W07"}, {"name": "CL2W08"}, {"name": "CL2W09"}, {"name": "CL2W10"}, {"name": "CL2W11"}, {"name": "CL2W12"}, {"name": "CL2W13"}, {"name": "CL2W14"}, {"name": "CL2W15"}, {"name": "CL2W16"}, {"name": "CL2W17"}, {"name": "CL2W18"}, {"name": "CL2W19"}, {"name": "CL2W20"}, {"name": "CL2W21"}, {"name": "CL2W22"}, {"name": "CL2W23"}, {"name": "CL2W24"}, {"name": "CL2W25"}, {"name": "CL2W26"}], "links": [{"source": 0, "target": 3}, {"source": 0, "target": 2}, {"source": 0, "target": 1}, {"source": 1, "target": 18}, {"source": 1, "target": 8}, {"source": 1, "target": 10}, {"source": 1, "target": 21}, {"source": 1, "target": 11}, {"source": 1, "target": 9}, {"source": 1, "target": 16}, {"source": 1, "target": 22}, {"source": 1, "target": 20}, {"source": 1, "target": 13}, {"source": 1, "target": 4}, {"source": 1, "target": 12}, {"source": 1, "target": 6}, {"source": 1, "target": 23}, {"source": 1, "target": 24}, {"source": 1, "target": 5}, {"source": 1, "target": 15}, {"source": 1, "target": 17}, {"source": 1, "target": 19}, {"source": 1, "target": 14}, {"source": 1, "target": 7}, {"source": 2, "target": 36}, {"source": 2, "target": 31}, {"source": 2, "target": 29}, {"source": 2, "target": 42}, {"source": 2, "target": 45}, {"source": 2, "target": 39}, {"source": 2, "target": 41}, {"source": 2, "target": 46}, {"source": 2, "target": 28}, {"source": 2, "target": 44}, {"source": 2, "target": 32}, {"source": 2, "target": 30}, {"source": 2, "target": 35}, {"source": 2, "target": 33}, {"source": 2, "target": 26}, {"source": 2, "target": 40}, {"source": 2, "target": 25}, {"source": 2, "target": 38}, {"source": 2, "target": 43}, {"source": 2, "target": 37}, {"source": 2, "target": 34}, {"source": 2, "target": 27}, {"source": 3, "target": 58}, {"source": 3, "target": 67}, {"source": 3, "target": 66}, {"source": 3, "target": 47}, {"source": 3, "target": 49}, {"source": 3, "target": 52}, {"source": 3, "target": 65}, {"source": 3, "target": 56}, {"source": 3, "target": 73}, {"source": 3, "target": 64}, {"source": 3, "target": 60}, {"source": 3, "target": 53}, {"source": 3, "target": 50}, {"source": 3, "target": 72}, {"source": 3, "target": 57}, {"source": 3, "target": 48}, {"source": 3, "target": 55}, {"source": 3, "target": 51}, {"source": 3, "target": 68}, {"source": 3, "target": 69}, {"source": 3, "target": 61}, {"source": 3, "target": 54}, {"source": 3, "target": 71}, {"source": 3, "target": 63}, {"source": 3, "target": 62}, {"source": 3, "target": 70}, {"source": 3, "target": 59}], "groups": [{"leaves": [0, 1, 2, 3]}, {"leaves": [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]}, {"leaves": [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46]}, {"leaves": [47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73]}, {"leaves": [27, 30, 63, 59, 60, 64, 35, 40, 66, 36, 15]}, {"leaves": [5, 54, 71, 37, 26, 57, 4, 44]}, {"leaves": [9, 53, 13, 28, 55, 20, 7, 19, 69, 24, 46, 68]}, {"leaves": [10, 41, 25, 21, 61, 43, 29, 58, 17, 39]}]}

here's my config:

var width = 860,
        height = 700;

    var color = d3.scaleOrdinal(d3.schemeCategory20);

    var cola = cola.d3adaptor(d3)
        .linkDistance(80)
        .avoidOverlaps(true)
        .handleDisconnected(false)
        .size([width, height]);

can anyone guide me whether this is the right approach to it?
or if there are other libs that could achieve similar results?

thanks

regards,
C.

to anyone wondering about faces privacy the avatars are from https://uifaces.co/

[CrashLaker]

babysteps