Trying to plot overlapping groups bugish

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

```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..

colajs-layout-with-hierarchical-grouping

json

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/

tgdwyer / WebCola

Trying to plot overlapping groups bugish #324