This repository has been archived by the owner on Oct 10, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
subgroups-visualization.html
80 lines (72 loc) · 2.16 KB
/
subgroups-visualization.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Subgroups visualization</title>
<script src="//unpkg.com/force-graph"></script>
<script src="//unpkg.com/3d-force-graph"></script>
</head>
<body>
<div id="graph"></div>
<script>
let n = 10;
let people = [];
let binaries = [];
let subgroups = {};
let nodes = [];
let edges = [];
let subgroupCenterNode = false;
let connectSubgroupCenters = false;
for (let i = 0; i < n; i++) {
people.push("Person_" + i)
}
for (let i = 0; i < Math.pow(2, n); i++) {
let binary = i.toString(2);
while (binary.length < n) {
binary = "0" + binary;
}
let subgroup = [];
for (let i = 0; i < n; i++) {
if (binary[i] === "1") {
subgroup.push(people[i]);
}
}
subgroups[binary] = subgroup;
binaries.push(binary);
}
for (let key of binaries) {
let subgroup = subgroups[key];
// nodes
for (let i = 0; i < subgroup.length; i++) {
let person = subgroup[i];
nodes.push({ id: key + "_" + i, name: person });
}
if (subgroupCenterNode) {
nodes.push({ id: key, name: "subgroup" });
for (let i = 0; i < subgroup.length; i++) {
edges.push({ source: key, target: key + "_" + i });
}
} else {
for (let i = 0; i < subgroup.length; i++) {
for (let j = i + 1; j < subgroup.length; j++) {
edges.push({ source: key + "_" + i, target: key + "_" + j });
}
}
}
}
if (connectSubgroupCenters) {
for (let i = 0; i < binaries.length; i++) {
for (let j = i + 1; j < binaries.length; j++) {
edges.push({ source: binaries[i], target: binaries[j] });
}
}
}
// console.log(nodes, edges);
let graphDiv = document.getElementById("graph");
let graph = ForceGraph3D()(graphDiv);
graph
.nodeAutoColorBy("name")
.graphData({ nodes: nodes, links: edges });
</script>
</body>
</html>