Spaces:
Running
Running
add js and python
Browse files- main.js +640 -0
- main.py +85 -0
- network.js +196 -0
main.js
ADDED
|
@@ -0,0 +1,640 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// initialize global variables.
|
| 2 |
+
var edges;
|
| 3 |
+
var nodes;
|
| 4 |
+
var allNodes;
|
| 5 |
+
var allEdges;
|
| 6 |
+
var nodeColors;
|
| 7 |
+
var originalNodes;
|
| 8 |
+
var network;
|
| 9 |
+
var container;
|
| 10 |
+
var options, data;
|
| 11 |
+
var filter = {
|
| 12 |
+
item: "",
|
| 13 |
+
property: "",
|
| 14 |
+
value: [],
|
| 15 |
+
};
|
| 16 |
+
|
| 17 |
+
// This method is responsible for drawing the graph, returns the drawn network
|
| 18 |
+
function drawGraph() {
|
| 19 |
+
var container = document.getElementById("mynetwork");
|
| 20 |
+
// parsing and collecting nodes and edges from the python
|
| 21 |
+
nodes = new vis.DataSet([
|
| 22 |
+
{ color: "#1f77b4", id: "Widiya", label: "Widiya", shape: "dot" },
|
| 23 |
+
{ color: "#1f77b4", id: "Malik", label: "Malik", shape: "dot" },
|
| 24 |
+
{
|
| 25 |
+
color: "#1f77b4",
|
| 26 |
+
id: "Adi Sahrul",
|
| 27 |
+
label: "Adi Sahrul",
|
| 28 |
+
shape: "dot",
|
| 29 |
+
},
|
| 30 |
+
{ color: "#1f77b4", id: "Ali", label: "Ali", shape: "dot" },
|
| 31 |
+
{ color: "#aec7e8", id: "Zakaria", label: "Zakaria", shape: "dot" },
|
| 32 |
+
{ color: "#aec7e8", id: "Sabil", label: "Sabil", shape: "dot" },
|
| 33 |
+
{ color: "#aec7e8", id: "Hanafi", label: "Hanafi", shape: "dot" },
|
| 34 |
+
{ color: "#aec7e8", id: "Faqih", label: "Faqih", shape: "dot" },
|
| 35 |
+
{ color: "#ff7f0e", id: "Ilham", label: "Ilham", shape: "dot" },
|
| 36 |
+
{ color: "#ff7f0e", id: "Mahreza", label: "Mahreza", shape: "dot" },
|
| 37 |
+
{
|
| 38 |
+
color: "#ffbb78",
|
| 39 |
+
id: "Firmansyah",
|
| 40 |
+
label: "Firmansyah",
|
| 41 |
+
shape: "dot",
|
| 42 |
+
},
|
| 43 |
+
{ color: "#ff7f0e", id: "Hendra", label: "Hendra", shape: "dot" },
|
| 44 |
+
{ color: "#2ca02c", id: "Ronggo", label: "Ronggo", shape: "dot" },
|
| 45 |
+
{ color: "#2ca02c", id: "Akhyar", label: "Akhyar", shape: "dot" },
|
| 46 |
+
{ color: "#2ca02c", id: "Agus", label: "Agus", shape: "dot" },
|
| 47 |
+
{
|
| 48 |
+
color: "#ff7f0e",
|
| 49 |
+
id: "Habiburrochman",
|
| 50 |
+
label: "Habiburrochman",
|
| 51 |
+
shape: "dot",
|
| 52 |
+
},
|
| 53 |
+
{ color: "#ff7f0e", id: "Anam", label: "Anam", shape: "dot" },
|
| 54 |
+
{
|
| 55 |
+
color: "#ff7f0e",
|
| 56 |
+
id: "Mishbahus",
|
| 57 |
+
label: "Mishbahus",
|
| 58 |
+
shape: "dot",
|
| 59 |
+
},
|
| 60 |
+
{ color: "#aec7e8", id: "Wafda", label: "Wafda", shape: "dot" },
|
| 61 |
+
{ color: "#aec7e8", id: "Faisal", label: "Faisal", shape: "dot" },
|
| 62 |
+
{ color: "#98df8a", id: "Bagus", label: "Bagus", shape: "dot" },
|
| 63 |
+
{ color: "#98df8a", id: "Glendy", label: "Glendy", shape: "dot" },
|
| 64 |
+
{
|
| 65 |
+
color: "#98df8a",
|
| 66 |
+
id: "Andre Eka",
|
| 67 |
+
label: "Andre Eka",
|
| 68 |
+
shape: "dot",
|
| 69 |
+
},
|
| 70 |
+
{ color: "#98df8a", id: "Naufal", label: "Naufal", shape: "dot" },
|
| 71 |
+
{ color: "#d62728", id: "Hera", label: "Hera", shape: "dot" },
|
| 72 |
+
{ color: "#2ca02c", id: "Dimas", label: "Dimas", shape: "dot" },
|
| 73 |
+
{ color: "#2ca02c", id: "Alivian", label: "Alivian", shape: "dot" },
|
| 74 |
+
{ color: "#2ca02c", id: "Ariek", label: "Ariek", shape: "dot" },
|
| 75 |
+
{
|
| 76 |
+
color: "#ff9896",
|
| 77 |
+
id: "Wahyu Cahyanto",
|
| 78 |
+
label: "Wahyu Cahyanto",
|
| 79 |
+
shape: "dot",
|
| 80 |
+
},
|
| 81 |
+
{ color: "#9467bd", id: "Ramadani", label: "Ramadani", shape: "dot" },
|
| 82 |
+
{ color: "#9467bd", id: "Evi", label: "Evi", shape: "dot" },
|
| 83 |
+
{ color: "#9467bd", id: "Erwin", label: "Erwin", shape: "dot" },
|
| 84 |
+
{
|
| 85 |
+
color: "#ff9896",
|
| 86 |
+
id: "Adi Prawono",
|
| 87 |
+
label: "Adi Prawono",
|
| 88 |
+
shape: "dot",
|
| 89 |
+
},
|
| 90 |
+
{ color: "#ffbb78", id: "Izzul", label: "Izzul", shape: "dot" },
|
| 91 |
+
{
|
| 92 |
+
color: "#ffbb78",
|
| 93 |
+
id: "Frederico",
|
| 94 |
+
label: "Frederico",
|
| 95 |
+
shape: "dot",
|
| 96 |
+
},
|
| 97 |
+
{ color: "#ffbb78", id: "Yusron", label: "Yusron", shape: "dot" },
|
| 98 |
+
{ color: "#ffbb78", id: "Rafiq", label: "Rafiq", shape: "dot" },
|
| 99 |
+
{ color: "#c5b0d5", id: "Ramadika", label: "Ramadika", shape: "dot" },
|
| 100 |
+
{ color: "#c5b0d5", id: "Anandya", label: "Anandya", shape: "dot" },
|
| 101 |
+
{ color: "#c5b0d5", id: "Hafidz", label: "Hafidz", shape: "dot" },
|
| 102 |
+
{ color: "#9467bd", id: "Reza", label: "Reza", shape: "dot" },
|
| 103 |
+
{ color: "#9467bd", id: "Rizal", label: "Rizal", shape: "dot" },
|
| 104 |
+
{ color: "#9467bd", id: "Rosi", label: "Rosi", shape: "dot" },
|
| 105 |
+
{
|
| 106 |
+
color: "#9467bd",
|
| 107 |
+
id: "Adi Rahman",
|
| 108 |
+
label: "Adi Rahman",
|
| 109 |
+
shape: "dot",
|
| 110 |
+
},
|
| 111 |
+
{ color: "#ff9896", id: "Akbar", label: "Akbar", shape: "dot" },
|
| 112 |
+
{ color: "#ff9896", id: "Fais", label: "Fais", shape: "dot" },
|
| 113 |
+
{ color: "#98df8a", id: "Umar", label: "Umar", shape: "dot" },
|
| 114 |
+
{ color: "#9467bd", id: "Adri", label: "Adri", shape: "dot" },
|
| 115 |
+
{
|
| 116 |
+
color: "#9467bd",
|
| 117 |
+
id: "Azis Alfajar",
|
| 118 |
+
label: "Azis Alfajar",
|
| 119 |
+
shape: "dot",
|
| 120 |
+
},
|
| 121 |
+
{ color: "#8c564b", id: "Tofan", label: "Tofan", shape: "dot" },
|
| 122 |
+
{ color: "#8c564b", id: "Surya", label: "Surya", shape: "dot" },
|
| 123 |
+
{ color: "#8c564b", id: "Nico", label: "Nico", shape: "dot" },
|
| 124 |
+
{ color: "#8c564b", id: "Jizdan", label: "Jizdan", shape: "dot" },
|
| 125 |
+
{ color: "#ff7f0e", id: "Bagas", label: "Bagas", shape: "dot" },
|
| 126 |
+
{ color: "#ff9896", id: "Dila", label: "Dila", shape: "dot" },
|
| 127 |
+
{ color: "#ff9896", id: "Ivada", label: "Ivada", shape: "dot" },
|
| 128 |
+
{ color: "#ff9896", id: "Riskina", label: "Riskina", shape: "dot" },
|
| 129 |
+
{ color: "#d62728", id: "Andi", label: "Andi", shape: "dot" },
|
| 130 |
+
{ color: "#d62728", id: "Aldy", label: "Aldy", shape: "dot" },
|
| 131 |
+
{ color: "#c5b0d5", id: "Windi", label: "Windi", shape: "dot" },
|
| 132 |
+
{ color: "#c5b0d5", id: "Putri", label: "Putri", shape: "dot" },
|
| 133 |
+
{ color: "#c5b0d5", id: "Febri", label: "Febri", shape: "dot" },
|
| 134 |
+
{ color: "#c5b0d5", id: "Natun", label: "Natun", shape: "dot" },
|
| 135 |
+
{
|
| 136 |
+
color: "#8c564b",
|
| 137 |
+
id: "Ali Ridho",
|
| 138 |
+
label: "Ali Ridho",
|
| 139 |
+
shape: "dot",
|
| 140 |
+
},
|
| 141 |
+
{ color: "#ff9896", id: "Rizky", label: "Rizky", shape: "dot" },
|
| 142 |
+
{ color: "#98df8a", id: "Fahmi", label: "Fahmi", shape: "dot" },
|
| 143 |
+
{ color: "#ffbb78", id: "Irfan", label: "Irfan", shape: "dot" },
|
| 144 |
+
{ color: "#ffbb78", id: "Rizka", label: "Rizka", shape: "dot" },
|
| 145 |
+
{ color: "#ffbb78", id: "Noval", label: "Noval", shape: "dot" },
|
| 146 |
+
{ color: "#d62728", id: "Niken", label: "Niken", shape: "dot" },
|
| 147 |
+
{ color: "#ffbb78", id: "Yusuf", label: "Yusuf", shape: "dot" },
|
| 148 |
+
{ color: "#ffbb78", id: "Ikbar", label: "Ikbar", shape: "dot" },
|
| 149 |
+
{ color: "#ffbb78", id: "Abid", label: "Abid", shape: "dot" },
|
| 150 |
+
{ color: "#98df8a", id: "Yunus", label: "Yunus", shape: "dot" },
|
| 151 |
+
{ color: "#98df8a", id: "Abdillah", label: "Abdillah", shape: "dot" },
|
| 152 |
+
{ color: "#98df8a", id: "Rifqi", label: "Rifqi", shape: "dot" },
|
| 153 |
+
{ color: "#1f77b4", id: "Vania", label: "Vania", shape: "dot" },
|
| 154 |
+
{ color: "#c49c94", id: "Melly", label: "Melly", shape: "dot" },
|
| 155 |
+
{ color: "#1f77b4", id: "Revika", label: "Revika", shape: "dot" },
|
| 156 |
+
{ color: "#1f77b4", id: "Devi", label: "Devi", shape: "dot" },
|
| 157 |
+
{ color: "#98df8a", id: "Satya", label: "Satya", shape: "dot" },
|
| 158 |
+
{ color: "#98df8a", id: "Farhan", label: "Farhan", shape: "dot" },
|
| 159 |
+
{ color: "#c49c94", id: "Fendi", label: "Fendi", shape: "dot" },
|
| 160 |
+
{ color: "#ffbb78", id: "Rere", label: "Rere", shape: "dot" },
|
| 161 |
+
{ color: "#aec7e8", id: "Farish", label: "Farish", shape: "dot" },
|
| 162 |
+
{ color: "#ff9896", id: "Yasmien", label: "Yasmien", shape: "dot" },
|
| 163 |
+
{ color: "#ff9896", id: "Zulfa", label: "Zulfa", shape: "dot" },
|
| 164 |
+
{ color: "#aec7e8", id: "Lydia", label: "Lydia", shape: "dot" },
|
| 165 |
+
{ color: "#aec7e8", id: "Arul", label: "Arul", shape: "dot" },
|
| 166 |
+
{ color: "#aec7e8", id: "Alifah", label: "Alifah", shape: "dot" },
|
| 167 |
+
{ color: "#1f77b4", id: "Tasya", label: "Tasya", shape: "dot" },
|
| 168 |
+
{
|
| 169 |
+
color: "#e377c2",
|
| 170 |
+
id: "Wahyu Rohmatul",
|
| 171 |
+
label: "Wahyu Rohmatul",
|
| 172 |
+
shape: "dot",
|
| 173 |
+
},
|
| 174 |
+
{ color: "#e377c2", id: "Aan", label: "Aan", shape: "dot" },
|
| 175 |
+
{ color: "#e377c2", id: "Holis", label: "Holis", shape: "dot" },
|
| 176 |
+
{
|
| 177 |
+
color: "#e377c2",
|
| 178 |
+
id: "Lufthanza",
|
| 179 |
+
label: "Lufthanza",
|
| 180 |
+
shape: "dot",
|
| 181 |
+
},
|
| 182 |
+
{ color: "#ffbb78", id: "Bima", label: "Bima", shape: "dot" },
|
| 183 |
+
{ color: "#ff9896", id: "Ilyas", label: "Ilyas", shape: "dot" },
|
| 184 |
+
{ color: "#2ca02c", id: "Febrianu", label: "Febrianu", shape: "dot" },
|
| 185 |
+
{ color: "#ff9896", id: "Winda", label: "Winda", shape: "dot" },
|
| 186 |
+
{ color: "#2ca02c", id: "Arifin", label: "Arifin", shape: "dot" },
|
| 187 |
+
{ color: "#2ca02c", id: "Andreas", label: "Andreas", shape: "dot" },
|
| 188 |
+
{ color: "#c5b0d5", id: "Balqis", label: "Balqis", shape: "dot" },
|
| 189 |
+
{ color: "#ff7f0e", id: "Nabhan", label: "Nabhan", shape: "dot" },
|
| 190 |
+
{ color: "#2ca02c", id: "Fedi", label: "Fedi", shape: "dot" },
|
| 191 |
+
{ color: "#2ca02c", id: "Nadhif", label: "Nadhif", shape: "dot" },
|
| 192 |
+
{ color: "#2ca02c", id: "Wildan", label: "Wildan", shape: "dot" },
|
| 193 |
+
{ color: "#98df8a", id: "Vemas", label: "Vemas", shape: "dot" },
|
| 194 |
+
{ color: "#ff9896", id: "Willy", label: "Willy", shape: "dot" },
|
| 195 |
+
{ color: "#aec7e8", id: "Yudha", label: "Yudha", shape: "dot" },
|
| 196 |
+
{ color: "#c49c94", id: "Auliya", label: "Auliya", shape: "dot" },
|
| 197 |
+
{ color: "#c49c94", id: "Febi", label: "Febi", shape: "dot" },
|
| 198 |
+
{ color: "#d62728", id: "Lia", label: "Lia", shape: "dot" },
|
| 199 |
+
{
|
| 200 |
+
color: "#98df8a",
|
| 201 |
+
id: "Syaiful Ramadani",
|
| 202 |
+
label: "Syaiful Ramadani",
|
| 203 |
+
shape: "dot",
|
| 204 |
+
},
|
| 205 |
+
{ color: "#2ca02c", id: "Rosyid", label: "Rosyid", shape: "dot" },
|
| 206 |
+
{ color: "#d62728", id: "Cici", label: "Cici", shape: "dot" },
|
| 207 |
+
{ color: "#d62728", id: "Ahya", label: "Ahya", shape: "dot" },
|
| 208 |
+
{ color: "#d62728", id: "Ami", label: "Ami", shape: "dot" },
|
| 209 |
+
{ color: "#c49c94", id: "Fentry", label: "Fentry", shape: "dot" },
|
| 210 |
+
{ color: "#c49c94", id: "Lisda", label: "Lisda", shape: "dot" },
|
| 211 |
+
{ color: "#c49c94", id: "Juan", label: "Juan", shape: "dot" },
|
| 212 |
+
{
|
| 213 |
+
color: "#aec7e8",
|
| 214 |
+
id: "Oktaveian",
|
| 215 |
+
label: "Oktaveian",
|
| 216 |
+
shape: "dot",
|
| 217 |
+
},
|
| 218 |
+
{ color: "#c49c94", id: "Zarkasyi", label: "Zarkasyi", shape: "dot" },
|
| 219 |
+
{ color: "#c49c94", id: "Samsul", label: "Samsul", shape: "dot" },
|
| 220 |
+
{ color: "#c49c94", id: "Bintang", label: "Bintang", shape: "dot" },
|
| 221 |
+
{ color: "#c5b0d5", id: "Helmia", label: "Helmia", shape: "dot" },
|
| 222 |
+
{ color: "#c5b0d5", id: "Vicky", label: "Vicky", shape: "dot" },
|
| 223 |
+
{ color: "#9467bd", id: "Billy", label: "Billy", shape: "dot" },
|
| 224 |
+
{ color: "#8c564b", id: "Shafy", label: "Shafy", shape: "dot" },
|
| 225 |
+
{ color: "#c49c94", id: "Elisa", label: "Elisa", shape: "dot" },
|
| 226 |
+
{ color: "#c49c94", id: "Khalisa", label: "Khalisa", shape: "dot" },
|
| 227 |
+
{ color: "#1f77b4", id: "Hamizan", label: "Hamizan", shape: "dot" },
|
| 228 |
+
{ color: "#d62728", id: "Nadiah", label: "Nadiah", shape: "dot" },
|
| 229 |
+
{ color: "#ffbb78", id: "Iqbil", label: "Iqbil", shape: "dot" },
|
| 230 |
+
{ color: "#ffbb78", id: "Yogi", label: "Yogi", shape: "dot" },
|
| 231 |
+
{ color: "#8c564b", id: "Ulum", label: "Ulum", shape: "dot" },
|
| 232 |
+
{ color: "#d62728", id: "Dina", label: "Dina", shape: "dot" },
|
| 233 |
+
{ color: "#d62728", id: "Rara", label: "Rara", shape: "dot" },
|
| 234 |
+
{ color: "#1f77b4", id: "Rissa", label: "Rissa", shape: "dot" },
|
| 235 |
+
{ color: "#1f77b4", id: "Ning", label: "Ning", shape: "dot" },
|
| 236 |
+
{ color: "#8c564b", id: "Fajar", label: "Fajar", shape: "dot" },
|
| 237 |
+
{
|
| 238 |
+
color: "#8c564b",
|
| 239 |
+
id: "Fahmi Fahrizi",
|
| 240 |
+
label: "Fahmi Fahrizi",
|
| 241 |
+
shape: "dot",
|
| 242 |
+
},
|
| 243 |
+
{ color: "#8c564b", id: "Danuarta", label: "Danuarta", shape: "dot" },
|
| 244 |
+
{ color: "#9467bd", id: "Abi", label: "Abi", shape: "dot" },
|
| 245 |
+
{ color: "#9467bd", id: "Erlangga", label: "Erlangga", shape: "dot" },
|
| 246 |
+
{ color: "#9467bd", id: "Valent", label: "Valent", shape: "dot" },
|
| 247 |
+
{ color: "#9467bd", id: "Desi", label: "Desi", shape: "dot" },
|
| 248 |
+
{ color: "#9467bd", id: "Olifia", label: "Olifia", shape: "dot" },
|
| 249 |
+
]);
|
| 250 |
+
edges = new vis.DataSet([
|
| 251 |
+
{ arrows: "to", from: "Widiya", to: "Malik" },
|
| 252 |
+
{ arrows: "to", from: "Widiya", to: "Adi Sahrul" },
|
| 253 |
+
{ arrows: "to", from: "Widiya", to: "Ali" },
|
| 254 |
+
{ arrows: "to", from: "Zakaria", to: "Sabil" },
|
| 255 |
+
{ arrows: "to", from: "Zakaria", to: "Hanafi" },
|
| 256 |
+
{ arrows: "to", from: "Zakaria", to: "Faqih" },
|
| 257 |
+
{ arrows: "to", from: "Ilham", to: "Mahreza" },
|
| 258 |
+
{ arrows: "to", from: "Ilham", to: "Firmansyah" },
|
| 259 |
+
{ arrows: "to", from: "Ilham", to: "Hendra" },
|
| 260 |
+
{ arrows: "to", from: "Ronggo", to: "Akhyar" },
|
| 261 |
+
{ arrows: "to", from: "Ronggo", to: "Sabil" },
|
| 262 |
+
{ arrows: "to", from: "Ronggo", to: "Agus" },
|
| 263 |
+
{ arrows: "to", from: "Habiburrochman", to: "Anam" },
|
| 264 |
+
{ arrows: "to", from: "Habiburrochman", to: "Mishbahus" },
|
| 265 |
+
{ arrows: "to", from: "Habiburrochman", to: "Hendra" },
|
| 266 |
+
{ arrows: "to", from: "Wafda", to: "Faisal" },
|
| 267 |
+
{ arrows: "to", from: "Wafda", to: "Mishbahus" },
|
| 268 |
+
{ arrows: "to", from: "Wafda", to: "Hendra" },
|
| 269 |
+
{ arrows: "to", from: "Bagus", to: "Glendy" },
|
| 270 |
+
{ arrows: "to", from: "Bagus", to: "Andre Eka" },
|
| 271 |
+
{ arrows: "to", from: "Bagus", to: "Naufal" },
|
| 272 |
+
{ arrows: "to", from: "Hera", to: "Dimas" },
|
| 273 |
+
{ arrows: "to", from: "Agus", to: "Akhyar" },
|
| 274 |
+
{ arrows: "to", from: "Agus", to: "Ronggo" },
|
| 275 |
+
{ arrows: "to", from: "Agus", to: "Alivian" },
|
| 276 |
+
{ arrows: "to", from: "Agus", to: "Ariek" },
|
| 277 |
+
{ arrows: "to", from: "Akhyar", to: "Agus" },
|
| 278 |
+
{ arrows: "to", from: "Akhyar", to: "Ronggo" },
|
| 279 |
+
{ arrows: "to", from: "Akhyar", to: "Wahyu Cahyanto" },
|
| 280 |
+
{ arrows: "to", from: "Ramadani", to: "Evi" },
|
| 281 |
+
{ arrows: "to", from: "Ramadani", to: "Erwin" },
|
| 282 |
+
{ arrows: "to", from: "Ramadani", to: "Adi Prawono" },
|
| 283 |
+
{ arrows: "to", from: "Izzul", to: "Frederico" },
|
| 284 |
+
{ arrows: "to", from: "Izzul", to: "Yusron" },
|
| 285 |
+
{ arrows: "to", from: "Izzul", to: "Rafiq" },
|
| 286 |
+
{ arrows: "to", from: "Ramadika", to: "Anandya" },
|
| 287 |
+
{ arrows: "to", from: "Ramadika", to: "Hafidz" },
|
| 288 |
+
{ arrows: "to", from: "Reza", to: "Rizal" },
|
| 289 |
+
{ arrows: "to", from: "Reza", to: "Rosi" },
|
| 290 |
+
{ arrows: "to", from: "Reza", to: "Adi Rahman" },
|
| 291 |
+
{ arrows: "to", from: "Akbar", to: "Fais" },
|
| 292 |
+
{ arrows: "to", from: "Andre Eka", to: "Bagus" },
|
| 293 |
+
{ arrows: "to", from: "Andre Eka", to: "Glendy" },
|
| 294 |
+
{ arrows: "to", from: "Andre Eka", to: "Umar" },
|
| 295 |
+
{ arrows: "to", from: "Rosi", to: "Adi Rahman" },
|
| 296 |
+
{ arrows: "to", from: "Rosi", to: "Adri" },
|
| 297 |
+
{ arrows: "to", from: "Rosi", to: "Ramadani" },
|
| 298 |
+
{ arrows: "to", from: "Rosi", to: "Azis Alfajar" },
|
| 299 |
+
{ arrows: "to", from: "Rosi", to: "Rizal" },
|
| 300 |
+
{ arrows: "to", from: "Tofan", to: "Surya" },
|
| 301 |
+
{ arrows: "to", from: "Tofan", to: "Nico" },
|
| 302 |
+
{ arrows: "to", from: "Tofan", to: "Jizdan" },
|
| 303 |
+
{ arrows: "to", from: "Hendra", to: "Mishbahus" },
|
| 304 |
+
{ arrows: "to", from: "Hendra", to: "Bagas" },
|
| 305 |
+
{ arrows: "to", from: "Hendra", to: "Habiburrochman" },
|
| 306 |
+
{ arrows: "to", from: "Anam", to: "Habiburrochman" },
|
| 307 |
+
{ arrows: "to", from: "Anam", to: "Bagas" },
|
| 308 |
+
{ arrows: "to", from: "Anam", to: "Mishbahus" },
|
| 309 |
+
{ arrows: "to", from: "Dila", to: "Ivada" },
|
| 310 |
+
{ arrows: "to", from: "Dila", to: "Riskina" },
|
| 311 |
+
{ arrows: "to", from: "Andi", to: "Aldy" },
|
| 312 |
+
{ arrows: "to", from: "Andi", to: "Habiburrochman" },
|
| 313 |
+
{ arrows: "to", from: "Umar", to: "Bagus" },
|
| 314 |
+
{ arrows: "to", from: "Umar", to: "Glendy" },
|
| 315 |
+
{ arrows: "to", from: "Umar", to: "Andre Eka" },
|
| 316 |
+
{ arrows: "to", from: "Windi", to: "Putri" },
|
| 317 |
+
{ arrows: "to", from: "Windi", to: "Febri" },
|
| 318 |
+
{ arrows: "to", from: "Windi", to: "Natun" },
|
| 319 |
+
{ arrows: "to", from: "Glendy", to: "Bagus" },
|
| 320 |
+
{ arrows: "to", from: "Glendy", to: "Umar" },
|
| 321 |
+
{ arrows: "to", from: "Ariek", to: "Akhyar" },
|
| 322 |
+
{ arrows: "to", from: "Ariek", to: "Ronggo" },
|
| 323 |
+
{ arrows: "to", from: "Mahreza", to: "Mishbahus" },
|
| 324 |
+
{ arrows: "to", from: "Mahreza", to: "Bagas" },
|
| 325 |
+
{ arrows: "to", from: "Mahreza", to: "Ali Ridho" },
|
| 326 |
+
{ arrows: "to", from: "Rizky", to: "Andre Eka" },
|
| 327 |
+
{ arrows: "to", from: "Rizky", to: "Fahmi" },
|
| 328 |
+
{ arrows: "to", from: "Irfan", to: "Rizka" },
|
| 329 |
+
{ arrows: "to", from: "Irfan", to: "Noval" },
|
| 330 |
+
{ arrows: "to", from: "Niken", to: "Hera" },
|
| 331 |
+
{ arrows: "to", from: "Yusuf", to: "Akhyar" },
|
| 332 |
+
{ arrows: "to", from: "Yusuf", to: "Ikbar" },
|
| 333 |
+
{ arrows: "to", from: "Yusuf", to: "Abid" },
|
| 334 |
+
{ arrows: "to", from: "Ivada", to: "Dila" },
|
| 335 |
+
{ arrows: "to", from: "Ivada", to: "Adi Prawono" },
|
| 336 |
+
{ arrows: "to", from: "Yunus", to: "Abdillah" },
|
| 337 |
+
{ arrows: "to", from: "Yunus", to: "Rifqi" },
|
| 338 |
+
{ arrows: "to", from: "Yunus", to: "Fahmi" },
|
| 339 |
+
{ arrows: "to", from: "Sabil", to: "Ronggo" },
|
| 340 |
+
{ arrows: "to", from: "Sabil", to: "Firmansyah" },
|
| 341 |
+
{ arrows: "to", from: "Sabil", to: "Hanafi" },
|
| 342 |
+
{ arrows: "to", from: "Vania", to: "Melly" },
|
| 343 |
+
{ arrows: "to", from: "Vania", to: "Revika" },
|
| 344 |
+
{ arrows: "to", from: "Vania", to: "Devi" },
|
| 345 |
+
{ arrows: "to", from: "Satya", to: "Farhan" },
|
| 346 |
+
{ arrows: "to", from: "Satya", to: "Fendi" },
|
| 347 |
+
{ arrows: "to", from: "Putri", to: "Febri" },
|
| 348 |
+
{ arrows: "to", from: "Putri", to: "Natun" },
|
| 349 |
+
{ arrows: "to", from: "Putri", to: "Windi" },
|
| 350 |
+
{ arrows: "to", from: "Adi Prawono", to: "Akbar" },
|
| 351 |
+
{ arrows: "to", from: "Adi Prawono", to: "Fais" },
|
| 352 |
+
{ arrows: "to", from: "Ikbar", to: "Noval" },
|
| 353 |
+
{ arrows: "to", from: "Ikbar", to: "Rere" },
|
| 354 |
+
{ arrows: "to", from: "Faqih", to: "Wafda" },
|
| 355 |
+
{ arrows: "to", from: "Faqih", to: "Farish" },
|
| 356 |
+
{ arrows: "to", from: "Yasmien", to: "Zulfa" },
|
| 357 |
+
{ arrows: "to", from: "Yasmien", to: "Riskina" },
|
| 358 |
+
{ arrows: "to", from: "Lydia", to: "Arul" },
|
| 359 |
+
{ arrows: "to", from: "Lydia", to: "Alifah" },
|
| 360 |
+
{ arrows: "to", from: "Devi", to: "Agus" },
|
| 361 |
+
{ arrows: "to", from: "Devi", to: "Vania" },
|
| 362 |
+
{ arrows: "to", from: "Devi", to: "Revika" },
|
| 363 |
+
{ arrows: "to", from: "Tasya", to: "Widiya" },
|
| 364 |
+
{ arrows: "to", from: "Tasya", to: "Malik" },
|
| 365 |
+
{ arrows: "to", from: "Tasya", to: "Adi Sahrul" },
|
| 366 |
+
{ arrows: "to", from: "Wahyu Rohmatul", to: "Aan" },
|
| 367 |
+
{ arrows: "to", from: "Wahyu Rohmatul", to: "Holis" },
|
| 368 |
+
{ arrows: "to", from: "Wahyu Rohmatul", to: "Lufthanza" },
|
| 369 |
+
{ arrows: "to", from: "Bima", to: "Yusron" },
|
| 370 |
+
{ arrows: "to", from: "Bima", to: "Noval" },
|
| 371 |
+
{ arrows: "to", from: "Bima", to: "Ikbar" },
|
| 372 |
+
{ arrows: "to", from: "Ilyas", to: "Adi Prawono" },
|
| 373 |
+
{ arrows: "to", from: "Ilyas", to: "Fais" },
|
| 374 |
+
{ arrows: "to", from: "Ilyas", to: "Rizky" },
|
| 375 |
+
{ arrows: "to", from: "Alivian", to: "Agus" },
|
| 376 |
+
{ arrows: "to", from: "Alivian", to: "Febrianu" },
|
| 377 |
+
{ arrows: "to", from: "Winda", to: "Zulfa" },
|
| 378 |
+
{ arrows: "to", from: "Winda", to: "Riskina" },
|
| 379 |
+
{ arrows: "to", from: "Winda", to: "Dila" },
|
| 380 |
+
{ arrows: "to", from: "Arifin", to: "Andreas" },
|
| 381 |
+
{ arrows: "to", from: "Arifin", to: "Dimas" },
|
| 382 |
+
{ arrows: "to", from: "Balqis", to: "Putri" },
|
| 383 |
+
{ arrows: "to", from: "Balqis", to: "Febri" },
|
| 384 |
+
{ arrows: "to", from: "Balqis", to: "Windi" },
|
| 385 |
+
{ arrows: "to", from: "Nabhan", to: "Wahyu Cahyanto" },
|
| 386 |
+
{ arrows: "to", from: "Nabhan", to: "Mahreza" },
|
| 387 |
+
{ arrows: "to", from: "Nabhan", to: "Mishbahus" },
|
| 388 |
+
{ arrows: "to", from: "Yusron", to: "Izzul" },
|
| 389 |
+
{ arrows: "to", from: "Yusron", to: "Frederico" },
|
| 390 |
+
{ arrows: "to", from: "Yusron", to: "Rafiq" },
|
| 391 |
+
{ arrows: "to", from: "Fedi", to: "Agus" },
|
| 392 |
+
{ arrows: "to", from: "Fedi", to: "Nadhif" },
|
| 393 |
+
{ arrows: "to", from: "Fedi", to: "Wildan" },
|
| 394 |
+
{ arrows: "to", from: "Wahyu Cahyanto", to: "Akhyar" },
|
| 395 |
+
{ arrows: "to", from: "Wahyu Cahyanto", to: "Riskina" },
|
| 396 |
+
{ arrows: "to", from: "Wahyu Cahyanto", to: "Zulfa" },
|
| 397 |
+
{ arrows: "to", from: "Rifqi", to: "Vemas" },
|
| 398 |
+
{ arrows: "to", from: "Zulfa", to: "Riskina" },
|
| 399 |
+
{ arrows: "to", from: "Zulfa", to: "Winda" },
|
| 400 |
+
{ arrows: "to", from: "Zulfa", to: "Yasmien" },
|
| 401 |
+
{ arrows: "to", from: "Hanafi", to: "Willy" },
|
| 402 |
+
{ arrows: "to", from: "Hanafi", to: "Faqih" },
|
| 403 |
+
{ arrows: "to", from: "Hanafi", to: "Zakaria" },
|
| 404 |
+
{ arrows: "to", from: "Yudha", to: "Alifah" },
|
| 405 |
+
{ arrows: "to", from: "Yudha", to: "Zakaria" },
|
| 406 |
+
{ arrows: "to", from: "Yudha", to: "Willy" },
|
| 407 |
+
{ arrows: "to", from: "Auliya", to: "Febi" },
|
| 408 |
+
{ arrows: "to", from: "Auliya", to: "Lia" },
|
| 409 |
+
{ arrows: "to", from: "Auliya", to: "Zakaria" },
|
| 410 |
+
{ arrows: "to", from: "Abdillah", to: "Yunus" },
|
| 411 |
+
{ arrows: "to", from: "Abdillah", to: "Rifqi" },
|
| 412 |
+
{ arrows: "to", from: "Abdillah", to: "Syaiful Ramadani" },
|
| 413 |
+
{ arrows: "to", from: "Mishbahus", to: "Wafda" },
|
| 414 |
+
{ arrows: "to", from: "Mishbahus", to: "Hendra" },
|
| 415 |
+
{ arrows: "to", from: "Mishbahus", to: "Bagas" },
|
| 416 |
+
{ arrows: "to", from: "Lufthanza", to: "Akhyar" },
|
| 417 |
+
{ arrows: "to", from: "Lufthanza", to: "Aan" },
|
| 418 |
+
{ arrows: "to", from: "Rosyid", to: "Ariek" },
|
| 419 |
+
{ arrows: "to", from: "Rosyid", to: "Alivian" },
|
| 420 |
+
{ arrows: "to", from: "Aldy", to: "Niken" },
|
| 421 |
+
{ arrows: "to", from: "Aldy", to: "Cici" },
|
| 422 |
+
{ arrows: "to", from: "Natun", to: "Putri" },
|
| 423 |
+
{ arrows: "to", from: "Natun", to: "Febri" },
|
| 424 |
+
{ arrows: "to", from: "Natun", to: "Windi" },
|
| 425 |
+
{ arrows: "to", from: "Ahya", to: "Ami" },
|
| 426 |
+
{ arrows: "to", from: "Ahya", to: "Niken" },
|
| 427 |
+
{ arrows: "to", from: "Ahya", to: "Lia" },
|
| 428 |
+
{ arrows: "to", from: "Fentry", to: "Lisda" },
|
| 429 |
+
{ arrows: "to", from: "Fentry", to: "Auliya" },
|
| 430 |
+
{ arrows: "to", from: "Fentry", to: "Juan" },
|
| 431 |
+
{ arrows: "to", from: "Noval", to: "Zakaria" },
|
| 432 |
+
{ arrows: "to", from: "Noval", to: "Irfan" },
|
| 433 |
+
{ arrows: "to", from: "Oktaveian", to: "Zakaria" },
|
| 434 |
+
{ arrows: "to", from: "Oktaveian", to: "Sabil" },
|
| 435 |
+
{ arrows: "to", from: "Zarkasyi", to: "Samsul" },
|
| 436 |
+
{ arrows: "to", from: "Zarkasyi", to: "Bintang" },
|
| 437 |
+
{ arrows: "to", from: "Zarkasyi", to: "Faqih" },
|
| 438 |
+
{ arrows: "to", from: "Anandya", to: "Helmia" },
|
| 439 |
+
{ arrows: "to", from: "Anandya", to: "Vicky" },
|
| 440 |
+
{ arrows: "to", from: "Anandya", to: "Billy" },
|
| 441 |
+
{ arrows: "to", from: "Lia", to: "Balqis" },
|
| 442 |
+
{ arrows: "to", from: "Lia", to: "Ahya" },
|
| 443 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Vemas" },
|
| 444 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Rifqi" },
|
| 445 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Abdillah" },
|
| 446 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Fahmi" },
|
| 447 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Zarkasyi" },
|
| 448 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Farhan" },
|
| 449 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Bagus" },
|
| 450 |
+
{ arrows: "to", from: "Syaiful Ramadani", to: "Umar" },
|
| 451 |
+
{ arrows: "to", from: "Ali Ridho", to: "Mahreza" },
|
| 452 |
+
{ arrows: "to", from: "Ali Ridho", to: "Shafy" },
|
| 453 |
+
{ arrows: "to", from: "Aan", to: "Wahyu Rohmatul" },
|
| 454 |
+
{ arrows: "to", from: "Aan", to: "Holis" },
|
| 455 |
+
{ arrows: "to", from: "Ami", to: "Ahya" },
|
| 456 |
+
{ arrows: "to", from: "Ami", to: "Niken" },
|
| 457 |
+
{ arrows: "to", from: "Elisa", to: "Febi" },
|
| 458 |
+
{ arrows: "to", from: "Elisa", to: "Khalisa" },
|
| 459 |
+
{ arrows: "to", from: "Melly", to: "Vania" },
|
| 460 |
+
{ arrows: "to", from: "Melly", to: "Juan" },
|
| 461 |
+
{ arrows: "to", from: "Melly", to: "Fentry" },
|
| 462 |
+
{ arrows: "to", from: "Juan", to: "Samsul" },
|
| 463 |
+
{ arrows: "to", from: "Juan", to: "Zarkasyi" },
|
| 464 |
+
{ arrows: "to", from: "Nico", to: "Tofan" },
|
| 465 |
+
{ arrows: "to", from: "Nico", to: "Surya" },
|
| 466 |
+
{ arrows: "to", from: "Rizka", to: "Irfan" },
|
| 467 |
+
{ arrows: "to", from: "Billy", to: "Anandya" },
|
| 468 |
+
{ arrows: "to", from: "Billy", to: "Adri" },
|
| 469 |
+
{ arrows: "to", from: "Hamizan", to: "Malik" },
|
| 470 |
+
{ arrows: "to", from: "Hamizan", to: "Adi Sahrul" },
|
| 471 |
+
{ arrows: "to", from: "Nadiah", to: "Cici" },
|
| 472 |
+
{ arrows: "to", from: "Nadiah", to: "Devi" },
|
| 473 |
+
{ arrows: "to", from: "Nadiah", to: "Adi Prawono" },
|
| 474 |
+
{ arrows: "to", from: "Febi", to: "Elisa" },
|
| 475 |
+
{ arrows: "to", from: "Febi", to: "Khalisa" },
|
| 476 |
+
{ arrows: "to", from: "Firmansyah", to: "Iqbil" },
|
| 477 |
+
{ arrows: "to", from: "Firmansyah", to: "Yogi" },
|
| 478 |
+
{ arrows: "to", from: "Ali", to: "Malik" },
|
| 479 |
+
{ arrows: "to", from: "Ali", to: "Adi Sahrul" },
|
| 480 |
+
{ arrows: "to", from: "Helmia", to: "Vicky" },
|
| 481 |
+
{ arrows: "to", from: "Helmia", to: "Anandya" },
|
| 482 |
+
{ arrows: "to", from: "Helmia", to: "Hafidz" },
|
| 483 |
+
{ arrows: "to", from: "Shafy", to: "Tofan" },
|
| 484 |
+
{ arrows: "to", from: "Shafy", to: "Nico" },
|
| 485 |
+
{ arrows: "to", from: "Shafy", to: "Ulum" },
|
| 486 |
+
{ arrows: "to", from: "Fais", to: "Adi Prawono" },
|
| 487 |
+
{ arrows: "to", from: "Fais", to: "Akbar" },
|
| 488 |
+
{ arrows: "to", from: "Ulum", to: "Surya" },
|
| 489 |
+
{ arrows: "to", from: "Cici", to: "Nadiah" },
|
| 490 |
+
{ arrows: "to", from: "Cici", to: "Agus" },
|
| 491 |
+
{ arrows: "to", from: "Fahmi", to: "Rizky" },
|
| 492 |
+
{ arrows: "to", from: "Fahmi", to: "Yunus" },
|
| 493 |
+
{ arrows: "to", from: "Fahmi", to: "Abdillah" },
|
| 494 |
+
{ arrows: "to", from: "Dimas", to: "Ariek" },
|
| 495 |
+
{ arrows: "to", from: "Dimas", to: "Ronggo" },
|
| 496 |
+
{ arrows: "to", from: "Andreas", to: "Arifin" },
|
| 497 |
+
{ arrows: "to", from: "Lisda", to: "Fentry" },
|
| 498 |
+
{ arrows: "to", from: "Lisda", to: "Auliya" },
|
| 499 |
+
{ arrows: "to", from: "Lisda", to: "Melly" },
|
| 500 |
+
{ arrows: "to", from: "Vemas", to: "Abdillah" },
|
| 501 |
+
{ arrows: "to", from: "Dina", to: "Hera" },
|
| 502 |
+
{ arrows: "to", from: "Dina", to: "Rara" },
|
| 503 |
+
{ arrows: "to", from: "Dina", to: "Anandya" },
|
| 504 |
+
{ arrows: "to", from: "Rere", to: "Noval" },
|
| 505 |
+
{ arrows: "to", from: "Rere", to: "Ikbar" },
|
| 506 |
+
{ arrows: "to", from: "Adri", to: "Rosi" },
|
| 507 |
+
{ arrows: "to", from: "Adri", to: "Ramadani" },
|
| 508 |
+
{ arrows: "to", from: "Rissa", to: "Widiya" },
|
| 509 |
+
{ arrows: "to", from: "Rissa", to: "Ning" },
|
| 510 |
+
{ arrows: "to", from: "Rissa", to: "Vania" },
|
| 511 |
+
{ arrows: "to", from: "Faisal", to: "Fais" },
|
| 512 |
+
{ arrows: "to", from: "Faisal", to: "Farish" },
|
| 513 |
+
{ arrows: "to", from: "Faisal", to: "Wafda" },
|
| 514 |
+
{ arrows: "to", from: "Samsul", to: "Juan" },
|
| 515 |
+
{ arrows: "to", from: "Samsul", to: "Bintang" },
|
| 516 |
+
{ arrows: "to", from: "Samsul", to: "Fendi" },
|
| 517 |
+
{ arrows: "to", from: "Iqbil", to: "Firmansyah" },
|
| 518 |
+
{ arrows: "to", from: "Iqbil", to: "Ikbar" },
|
| 519 |
+
{ arrows: "to", from: "Adi Sahrul", to: "Tasya" },
|
| 520 |
+
{ arrows: "to", from: "Adi Sahrul", to: "Malik" },
|
| 521 |
+
{ arrows: "to", from: "Adi Sahrul", to: "Ali" },
|
| 522 |
+
{ arrows: "to", from: "Malik", to: "Adi Sahrul" },
|
| 523 |
+
{ arrows: "to", from: "Malik", to: "Ali" },
|
| 524 |
+
{ arrows: "to", from: "Malik", to: "Tasya" },
|
| 525 |
+
{ arrows: "to", from: "Hafidz", to: "Febri" },
|
| 526 |
+
{ arrows: "to", from: "Hafidz", to: "Zarkasyi" },
|
| 527 |
+
{ arrows: "to", from: "Hafidz", to: "Windi" },
|
| 528 |
+
{ arrows: "to", from: "Jizdan", to: "Fajar" },
|
| 529 |
+
{ arrows: "to", from: "Jizdan", to: "Fahmi Fahrizi" },
|
| 530 |
+
{ arrows: "to", from: "Jizdan", to: "Danuarta" },
|
| 531 |
+
{ arrows: "to", from: "Nadhif", to: "Agus" },
|
| 532 |
+
{ arrows: "to", from: "Nadhif", to: "Alivian" },
|
| 533 |
+
{ arrows: "to", from: "Abi", to: "Erlangga" },
|
| 534 |
+
{ arrows: "to", from: "Abi", to: "Valent" },
|
| 535 |
+
{ arrows: "to", from: "Erlangga", to: "Desi" },
|
| 536 |
+
{ arrows: "to", from: "Erlangga", to: "Olifia" },
|
| 537 |
+
{ arrows: "to", from: "Desi", to: "Erlangga" },
|
| 538 |
+
{ arrows: "to", from: "Desi", to: "Olifia" },
|
| 539 |
+
{ arrows: "to", from: "Frederico", to: "Izzul" },
|
| 540 |
+
{ arrows: "to", from: "Frederico", to: "Yusron" },
|
| 541 |
+
{ arrows: "to", from: "Fendi", to: "Yudha" },
|
| 542 |
+
{ arrows: "to", from: "Fendi", to: "Juan" },
|
| 543 |
+
{ arrows: "to", from: "Fendi", to: "Bagus" },
|
| 544 |
+
{ arrows: "to", from: "Riskina", to: "Zulfa" },
|
| 545 |
+
{ arrows: "to", from: "Riskina", to: "Winda" },
|
| 546 |
+
{ arrows: "to", from: "Riskina", to: "Yasmien" },
|
| 547 |
+
{ arrows: "to", from: "Olifia", to: "Desi" },
|
| 548 |
+
{ arrows: "to", from: "Olifia", to: "Niken" },
|
| 549 |
+
{ arrows: "to", from: "Olifia", to: "Rosi" },
|
| 550 |
+
{ arrows: "to", from: "Willy", to: "Dila" },
|
| 551 |
+
{ arrows: "to", from: "Willy", to: "Hanafi" },
|
| 552 |
+
{ arrows: "to", from: "Willy", to: "Fais" },
|
| 553 |
+
]);
|
| 554 |
+
nodeColors = {};
|
| 555 |
+
allNodes = nodes.get({ returnType: "Object" });
|
| 556 |
+
for (nodeId in allNodes) {
|
| 557 |
+
nodeColors[nodeId] = allNodes[nodeId].color;
|
| 558 |
+
}
|
| 559 |
+
allEdges = edges.get({ returnType: "Object" });
|
| 560 |
+
// adding nodes and edges to the graph
|
| 561 |
+
data = { nodes: nodes, edges: edges };
|
| 562 |
+
|
| 563 |
+
var options = {
|
| 564 |
+
interaction: { navigationButtons: true, keyboard: true },
|
| 565 |
+
physics: { enabled: true },
|
| 566 |
+
};
|
| 567 |
+
network = new vis.Network(container, data, options);
|
| 568 |
+
network.on("stabilizationProgress", function (params) {
|
| 569 |
+
document.getElementById("loadingBar").removeAttribute("style");
|
| 570 |
+
var maxWidth = 496;
|
| 571 |
+
var minWidth = 20;
|
| 572 |
+
var widthFactor = params.iterations / params.total;
|
| 573 |
+
var width = Math.max(minWidth, maxWidth * widthFactor);
|
| 574 |
+
document.getElementById("bar").style.width = width + "px";
|
| 575 |
+
document.getElementById("text").innerHTML =
|
| 576 |
+
Math.round(widthFactor * 100) + "%";
|
| 577 |
+
});
|
| 578 |
+
network.once("stabilizationIterationsDone", function () {
|
| 579 |
+
document.getElementById("text").innerHTML = "100%";
|
| 580 |
+
document.getElementById("bar").style.width = "496px";
|
| 581 |
+
document.getElementById("loadingBar").style.opacity = 0;
|
| 582 |
+
style =
|
| 583 |
+
"padding: 10px; background: #fff; border: 1px solid #ccc; border-radius: 4px; position: absolute; top: 60px; left: 15px; z-index: 9999;" >
|
| 584 |
+
// really clean the dom element
|
| 585 |
+
setTimeout(function () {
|
| 586 |
+
document.getElementById("loadingBar").style.display = "none";
|
| 587 |
+
}, 500);
|
| 588 |
+
const legendContainer = document.getElementById("legend");
|
| 589 |
+
|
| 590 |
+
legendContainer.style.padding = "10px";
|
| 591 |
+
legendContainer.style.background = "#fff";
|
| 592 |
+
legendContainer.style.border = "1px solid #ccc";
|
| 593 |
+
legendContainer.style.borderRadius = "4px";
|
| 594 |
+
legendContainer.style.position = "absolute";
|
| 595 |
+
legendContainer.style.top = "80px";
|
| 596 |
+
legendContainer.style.left = "15px";
|
| 597 |
+
legendContainer.style.zIndex = "9999";
|
| 598 |
+
|
| 599 |
+
const heading = document.createElement("h3");
|
| 600 |
+
heading.textContent = "List Sirkel";
|
| 601 |
+
legendContainer.appendChild(heading);
|
| 602 |
+
|
| 603 |
+
const colors = [
|
| 604 |
+
"#1f77b4",
|
| 605 |
+
"#aec7e8",
|
| 606 |
+
"#ff7f0e",
|
| 607 |
+
"#ffbb78",
|
| 608 |
+
"#2ca02c",
|
| 609 |
+
"#98df8a",
|
| 610 |
+
"#d62728",
|
| 611 |
+
"#ff9896",
|
| 612 |
+
"#9467bd",
|
| 613 |
+
"#c5b0d5",
|
| 614 |
+
"#8c564b",
|
| 615 |
+
"#c49c94",
|
| 616 |
+
"#e377c2",
|
| 617 |
+
];
|
| 618 |
+
|
| 619 |
+
const communities = Array.from({ length: 12 }, (_, i) => i + 1);
|
| 620 |
+
communities.forEach((community, index) => {
|
| 621 |
+
if (index < colors.length) {
|
| 622 |
+
const legendItem = document.createElement("div");
|
| 623 |
+
legendItem.className = "legend-item";
|
| 624 |
+
|
| 625 |
+
const colorBox = document.createElement("div");
|
| 626 |
+
colorBox.className = "legend-color";
|
| 627 |
+
colorBox.style.background = colors[index];
|
| 628 |
+
|
| 629 |
+
const label = document.createElement("div");
|
| 630 |
+
label.textContent = `Sirkel ${community}`;
|
| 631 |
+
|
| 632 |
+
legendItem.appendChild(colorBox);
|
| 633 |
+
legendItem.appendChild(label);
|
| 634 |
+
legendContainer.appendChild(legendItem);
|
| 635 |
+
}
|
| 636 |
+
});
|
| 637 |
+
});
|
| 638 |
+
return network;
|
| 639 |
+
}
|
| 640 |
+
drawGraph();
|
main.py
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import pandas as pd
|
| 2 |
+
import networkx as nx
|
| 3 |
+
from pyvis.network import Network
|
| 4 |
+
import community.community_louvain as community_louvain
|
| 5 |
+
import matplotlib.cm as cm
|
| 6 |
+
import numpy as np
|
| 7 |
+
|
| 8 |
+
df = pd.read_csv("data.csv")
|
| 9 |
+
# Membaca data dari df
|
| 10 |
+
connections = []
|
| 11 |
+
|
| 12 |
+
for idx, row in df.iterrows():
|
| 13 |
+
source = row['Source'].strip() # Menghapus spasi di awal dan akhir
|
| 14 |
+
targets = [target.strip() for target in row['Target'].split(', ')] # Menghapus spasi di awal dan akhir dari setiap target
|
| 15 |
+
for target in targets:
|
| 16 |
+
connections.append((source, target))
|
| 17 |
+
|
| 18 |
+
# Membuat graf
|
| 19 |
+
G = nx.DiGraph()
|
| 20 |
+
G.add_edges_from(connections)
|
| 21 |
+
|
| 22 |
+
# Mendeteksi komunitas menggunakan algoritma Louvain
|
| 23 |
+
partition = community_louvain.best_partition(G.to_undirected())
|
| 24 |
+
|
| 25 |
+
# Mendapatkan jumlah komunitas unik
|
| 26 |
+
num_communities = len(set(partition.values()))
|
| 27 |
+
|
| 28 |
+
# Menggunakan colormap 'tab20' dari matplotlib
|
| 29 |
+
cmap = cm.get_cmap('tab20', 20) # Maksimal 20 warna
|
| 30 |
+
colors = [cmap(i) for i in range(20)]
|
| 31 |
+
|
| 32 |
+
# Membuat graf dengan Pyvis
|
| 33 |
+
net = Network(notebook=True, directed=True, cdn_resources='remote')
|
| 34 |
+
|
| 35 |
+
# Menambahkan node dan edge ke graf
|
| 36 |
+
for source, target in connections:
|
| 37 |
+
net.add_node(source, label=source)
|
| 38 |
+
net.add_node(target, label=target)
|
| 39 |
+
net.add_edge(source, target)
|
| 40 |
+
|
| 41 |
+
# Memberi warna pada node berdasarkan komunitas
|
| 42 |
+
community_colors = {comm: colors[i] for i, comm in enumerate(set(partition.values()))}
|
| 43 |
+
for node, comm in partition.items():
|
| 44 |
+
rgba_color = community_colors[comm]
|
| 45 |
+
hex_color = '#%02x%02x%02x' % (int(rgba_color[0]*255), int(rgba_color[1]*255), int(rgba_color[2]*255))
|
| 46 |
+
net.get_node(node)['color'] = hex_color
|
| 47 |
+
|
| 48 |
+
# Menambahkan opsi untuk menampilkan judul
|
| 49 |
+
options = """
|
| 50 |
+
var options = {
|
| 51 |
+
"interaction": {
|
| 52 |
+
"navigationButtons": true,
|
| 53 |
+
"keyboard": true
|
| 54 |
+
},
|
| 55 |
+
"physics": {
|
| 56 |
+
"enabled": true
|
| 57 |
+
}
|
| 58 |
+
}
|
| 59 |
+
"""
|
| 60 |
+
net.set_options(options)
|
| 61 |
+
|
| 62 |
+
# Menambahkan judul ke graf
|
| 63 |
+
net.heading = "Social Network Analysis Anggota INCODE"
|
| 64 |
+
|
| 65 |
+
# Menyimpan grafik ke file HTML
|
| 66 |
+
net.show("index.html")
|
| 67 |
+
|
| 68 |
+
# Membuat bagian legenda
|
| 69 |
+
legend_html = """
|
| 70 |
+
<div id="legend" style="padding: 10px; background: #fff; border: 1px solid #ccc; border-radius: 4px; position: absolute; top: 10px; left: 10px; z-index: 9999;">
|
| 71 |
+
<h3>Legend</h3>
|
| 72 |
+
"""
|
| 73 |
+
for comm, rgba_color in community_colors.items():
|
| 74 |
+
hex_color = '#%02x%02x%02x' % (int(rgba_color[0]*255), int(rgba_color[1]*255), int(rgba_color[2]*255))
|
| 75 |
+
legend_html += f'<div class="legend-item" style="display: flex; align-items: center; margin-bottom: 5px;"><div class="legend-color" style="width: 15px; height: 15px; margin-right: 10px; background: {hex_color}; border: 1px solid #ccc;"></div>Community {comm}</div>'
|
| 76 |
+
legend_html += '</div>'
|
| 77 |
+
|
| 78 |
+
# Menyimpan bagian legenda ke file HTML
|
| 79 |
+
with open('index.html', 'r') as file:
|
| 80 |
+
html_content = file.read()
|
| 81 |
+
|
| 82 |
+
html_content = html_content.replace('<body>', f'<body>{legend_html}', 1)
|
| 83 |
+
|
| 84 |
+
with open('index.html', 'w') as file:
|
| 85 |
+
file.write(html_content)
|
network.js
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
function neighbourhoodHighlight(params) {
|
| 2 |
+
// console.log("in nieghbourhoodhighlight");
|
| 3 |
+
allNodes = nodes.get({ returnType: "Object" });
|
| 4 |
+
// originalNodes = JSON.parse(JSON.stringify(allNodes));
|
| 5 |
+
// if something is selected:
|
| 6 |
+
if (params.nodes.length > 0) {
|
| 7 |
+
highlightActive = true;
|
| 8 |
+
var i, j;
|
| 9 |
+
var selectedNode = params.nodes[0];
|
| 10 |
+
var degrees = 2;
|
| 11 |
+
|
| 12 |
+
// mark all nodes as hard to read.
|
| 13 |
+
for (let nodeId in allNodes) {
|
| 14 |
+
// nodeColors[nodeId] = allNodes[nodeId].color;
|
| 15 |
+
allNodes[nodeId].color = "rgba(200,200,200,0.5)";
|
| 16 |
+
if (allNodes[nodeId].hiddenLabel === undefined) {
|
| 17 |
+
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
|
| 18 |
+
allNodes[nodeId].label = undefined;
|
| 19 |
+
}
|
| 20 |
+
}
|
| 21 |
+
var connectedNodes = network.getConnectedNodes(selectedNode);
|
| 22 |
+
var allConnectedNodes = [];
|
| 23 |
+
|
| 24 |
+
// get the second degree nodes
|
| 25 |
+
for (i = 1; i < degrees; i++) {
|
| 26 |
+
for (j = 0; j < connectedNodes.length; j++) {
|
| 27 |
+
allConnectedNodes = allConnectedNodes.concat(
|
| 28 |
+
network.getConnectedNodes(connectedNodes[j])
|
| 29 |
+
);
|
| 30 |
+
}
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
// all second degree nodes get a different color and their label back
|
| 34 |
+
for (i = 0; i < allConnectedNodes.length; i++) {
|
| 35 |
+
// allNodes[allConnectedNodes[i]].color = "pink";
|
| 36 |
+
allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
|
| 37 |
+
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
|
| 38 |
+
allNodes[allConnectedNodes[i]].label =
|
| 39 |
+
allNodes[allConnectedNodes[i]].hiddenLabel;
|
| 40 |
+
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
// all first degree nodes get their own color and their label back
|
| 45 |
+
for (i = 0; i < connectedNodes.length; i++) {
|
| 46 |
+
// allNodes[connectedNodes[i]].color = undefined;
|
| 47 |
+
allNodes[connectedNodes[i]].color = nodeColors[connectedNodes[i]];
|
| 48 |
+
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
|
| 49 |
+
allNodes[connectedNodes[i]].label =
|
| 50 |
+
allNodes[connectedNodes[i]].hiddenLabel;
|
| 51 |
+
allNodes[connectedNodes[i]].hiddenLabel = undefined;
|
| 52 |
+
}
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
// the main node gets its own color and its label back.
|
| 56 |
+
// allNodes[selectedNode].color = undefined;
|
| 57 |
+
allNodes[selectedNode].color = nodeColors[selectedNode];
|
| 58 |
+
if (allNodes[selectedNode].hiddenLabel !== undefined) {
|
| 59 |
+
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
|
| 60 |
+
allNodes[selectedNode].hiddenLabel = undefined;
|
| 61 |
+
}
|
| 62 |
+
} else if (highlightActive === true) {
|
| 63 |
+
// console.log("highlightActive was true");
|
| 64 |
+
// reset all nodes
|
| 65 |
+
for (let nodeId in allNodes) {
|
| 66 |
+
// allNodes[nodeId].color = "purple";
|
| 67 |
+
allNodes[nodeId].color = nodeColors[nodeId];
|
| 68 |
+
// delete allNodes[nodeId].color;
|
| 69 |
+
if (allNodes[nodeId].hiddenLabel !== undefined) {
|
| 70 |
+
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
|
| 71 |
+
allNodes[nodeId].hiddenLabel = undefined;
|
| 72 |
+
}
|
| 73 |
+
}
|
| 74 |
+
highlightActive = false;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
// transform the object into an array
|
| 78 |
+
var updateArray = [];
|
| 79 |
+
if (params.nodes.length > 0) {
|
| 80 |
+
for (let nodeId in allNodes) {
|
| 81 |
+
if (allNodes.hasOwnProperty(nodeId)) {
|
| 82 |
+
// console.log(allNodes[nodeId]);
|
| 83 |
+
updateArray.push(allNodes[nodeId]);
|
| 84 |
+
}
|
| 85 |
+
}
|
| 86 |
+
nodes.update(updateArray);
|
| 87 |
+
} else {
|
| 88 |
+
// console.log("Nothing was selected");
|
| 89 |
+
for (let nodeId in allNodes) {
|
| 90 |
+
if (allNodes.hasOwnProperty(nodeId)) {
|
| 91 |
+
// console.log(allNodes[nodeId]);
|
| 92 |
+
// allNodes[nodeId].color = {};
|
| 93 |
+
updateArray.push(allNodes[nodeId]);
|
| 94 |
+
}
|
| 95 |
+
}
|
| 96 |
+
nodes.update(updateArray);
|
| 97 |
+
}
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
function filterHighlight(params) {
|
| 101 |
+
allNodes = nodes.get({ returnType: "Object" });
|
| 102 |
+
// if something is selected:
|
| 103 |
+
if (params.nodes.length > 0) {
|
| 104 |
+
filterActive = true;
|
| 105 |
+
let selectedNodes = params.nodes;
|
| 106 |
+
|
| 107 |
+
// hiding all nodes and saving the label
|
| 108 |
+
for (let nodeId in allNodes) {
|
| 109 |
+
allNodes[nodeId].hidden = true;
|
| 110 |
+
if (allNodes[nodeId].savedLabel === undefined) {
|
| 111 |
+
allNodes[nodeId].savedLabel = allNodes[nodeId].label;
|
| 112 |
+
allNodes[nodeId].label = undefined;
|
| 113 |
+
}
|
| 114 |
+
}
|
| 115 |
+
|
| 116 |
+
for (let i = 0; i < selectedNodes.length; i++) {
|
| 117 |
+
allNodes[selectedNodes[i]].hidden = false;
|
| 118 |
+
if (allNodes[selectedNodes[i]].savedLabel !== undefined) {
|
| 119 |
+
allNodes[selectedNodes[i]].label =
|
| 120 |
+
allNodes[selectedNodes[i]].savedLabel;
|
| 121 |
+
allNodes[selectedNodes[i]].savedLabel = undefined;
|
| 122 |
+
}
|
| 123 |
+
}
|
| 124 |
+
} else if (filterActive === true) {
|
| 125 |
+
// reset all nodes
|
| 126 |
+
for (let nodeId in allNodes) {
|
| 127 |
+
allNodes[nodeId].hidden = false;
|
| 128 |
+
if (allNodes[nodeId].savedLabel !== undefined) {
|
| 129 |
+
allNodes[nodeId].label = allNodes[nodeId].savedLabel;
|
| 130 |
+
allNodes[nodeId].savedLabel = undefined;
|
| 131 |
+
}
|
| 132 |
+
}
|
| 133 |
+
filterActive = false;
|
| 134 |
+
}
|
| 135 |
+
|
| 136 |
+
// transform the object into an array
|
| 137 |
+
var updateArray = [];
|
| 138 |
+
if (params.nodes.length > 0) {
|
| 139 |
+
for (let nodeId in allNodes) {
|
| 140 |
+
if (allNodes.hasOwnProperty(nodeId)) {
|
| 141 |
+
updateArray.push(allNodes[nodeId]);
|
| 142 |
+
}
|
| 143 |
+
}
|
| 144 |
+
nodes.update(updateArray);
|
| 145 |
+
} else {
|
| 146 |
+
for (let nodeId in allNodes) {
|
| 147 |
+
if (allNodes.hasOwnProperty(nodeId)) {
|
| 148 |
+
updateArray.push(allNodes[nodeId]);
|
| 149 |
+
}
|
| 150 |
+
}
|
| 151 |
+
nodes.update(updateArray);
|
| 152 |
+
}
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
function selectNode(nodes) {
|
| 156 |
+
network.selectNodes(nodes);
|
| 157 |
+
neighbourhoodHighlight({ nodes: nodes });
|
| 158 |
+
return nodes;
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
function selectNodes(nodes) {
|
| 162 |
+
network.selectNodes(nodes);
|
| 163 |
+
filterHighlight({ nodes: nodes });
|
| 164 |
+
return nodes;
|
| 165 |
+
}
|
| 166 |
+
|
| 167 |
+
function highlightFilter(filter) {
|
| 168 |
+
let selectedNodes = [];
|
| 169 |
+
let selectedProp = filter["property"];
|
| 170 |
+
if (filter["item"] === "node") {
|
| 171 |
+
let allNodes = nodes.get({ returnType: "Object" });
|
| 172 |
+
for (let nodeId in allNodes) {
|
| 173 |
+
if (
|
| 174 |
+
allNodes[nodeId][selectedProp] &&
|
| 175 |
+
filter["value"].includes(
|
| 176 |
+
allNodes[nodeId][selectedProp].toString()
|
| 177 |
+
)
|
| 178 |
+
) {
|
| 179 |
+
selectedNodes.push(nodeId);
|
| 180 |
+
}
|
| 181 |
+
}
|
| 182 |
+
} else if (filter["item"] === "edge") {
|
| 183 |
+
let allEdges = edges.get({ returnType: "object" });
|
| 184 |
+
// check if the selected property exists for selected edge and select the nodes connected to the edge
|
| 185 |
+
for (let edge in allEdges) {
|
| 186 |
+
if (
|
| 187 |
+
allEdges[edge][selectedProp] &&
|
| 188 |
+
filter["value"].includes(allEdges[edge][selectedProp].toString())
|
| 189 |
+
) {
|
| 190 |
+
selectedNodes.push(allEdges[edge]["from"]);
|
| 191 |
+
selectedNodes.push(allEdges[edge]["to"]);
|
| 192 |
+
}
|
| 193 |
+
}
|
| 194 |
+
}
|
| 195 |
+
selectNodes(selectedNodes);
|
| 196 |
+
}
|