Hugging Face's logo

Spaces:
KGBrain
/
visual-knowledgegraph
Running

App Files Community
KGBrain commited on
Commit
0103abd
·
1 Parent(s): c2bbeda

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +928 -0
index.html ADDED
@@ -0,0 +1,928 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <!-- <iframe
4
+ src="https://seetha-ima-pipeline-streamlit.hf.space?embed=true"
5
+ frameborder="0"
6
+ width="850"
7
+ height="450"
8
+ ></iframe> -->
9
+
10
+ <!-- <div id="dv" class="six columns">
11
+ <iframe id="myFrame" name="myFrame" src="https://seetha-ima-pipeline-streamlit.hf.space?embed=true"></iframe>
12
+ </div> -->
13
+
14
+ <head>
15
+ <link rel = "stylesheet" href = "tree.css">
16
+ <link rel = "stylesheet" href = "level2.css">
17
+ <link rel = "stylesheet" href = "side.css">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1">
19
+ <style>
20
+
21
+ body {background-color: floralwhite;}
22
+ </style>
23
+ <style>
24
+
25
+
26
+ #d1 {
27
+ display: block;
28
+
29
+ }
30
+ #d2 {
31
+ display: none;
32
+ }
33
+ table {
34
+ border-collapse: collapse;
35
+ table-layout: fixed;
36
+ width: 100%;
37
+
38
+ }
39
+
40
+ th, td {
41
+ border: 1px solid black;
42
+ padding: 5px;
43
+ text-align: center;
44
+
45
+ }
46
+ tr:hover {
47
+ background-color: lightgoldenrodyellow;
48
+
49
+ }
50
+ th{
51
+ position: sticky;
52
+ top: 0;
53
+ background-color: lightsteelblue;
54
+ }
55
+
56
+
57
+
58
+ </style>
59
+ <center>
60
+ <h1 style="color:black;">Causal Text to Knowledge Graph </h1>
61
+ </center>
62
+ </head>
63
+ <body>
64
+
65
+
66
+ <div id = "container">
67
+ <div id = "tree">
68
+ <script src="https://d3js.org/d3.v3.min.js"></script>
69
+ <script>
70
+
71
+ var treeData = [
72
+ {
73
+ "name": "Performance or Not",
74
+ "children": [
75
+ {
76
+ "name": "Performance (P)",
77
+ "children": [
78
+ {
79
+ "name": "Investors (INV)"
80
+ },
81
+ {
82
+ "name": "Customers (CUS)"
83
+ },
84
+ {
85
+ "name": "Employees (EMP)"
86
+
87
+ },
88
+ {
89
+ "name": "Society (SOC)"
90
+ },
91
+ {
92
+ "name": "Unclassified"
93
+ }
94
+ ]
95
+ },
96
+ {
97
+ "name": "Non-performance (NP)",
98
+ }
99
+ ]
100
+ }
101
+ ];
102
+
103
+ var margin = {top: 20, right: 120, bottom: 20, left: 120},
104
+ width = 800 - margin.right - margin.left,
105
+ height = 620 - margin.top - margin.bottom;
106
+
107
+ var i = 0,
108
+ duration = 750,
109
+ root;
110
+
111
+
112
+ var tree = d3.layout.tree()
113
+ .size([height, width]);
114
+
115
+ var diagonal = d3.svg.diagonal()
116
+ .projection(function(d) { return [d.y, d.x]; });
117
+
118
+
119
+ var svg3 = d3.select("#tree").append("svg")
120
+ .attr("width", width + margin.right + margin.left)
121
+ .attr("height", height + margin.top + margin.bottom)
122
+ .append("g")
123
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
124
+
125
+ root = treeData[0];
126
+ root.x0 = height / 2;
127
+ root.y0 = 0;
128
+
129
+ function collapse(d) {
130
+ if (d.children) {
131
+ d._children = d.children;
132
+ d._children.forEach(collapse);
133
+ d.children = null;
134
+ }
135
+ }
136
+
137
+ root.children.forEach(collapse);
138
+ update(root);
139
+
140
+ function update(source) {
141
+
142
+ // Compute the new tree layout.
143
+ var nodes = tree.nodes(root).reverse(),
144
+ links = tree.links(nodes);
145
+
146
+
147
+
148
+
149
+ // Normalize for fixed-depth.
150
+ nodes.forEach(function(d) { d.y = d.depth * 200; });
151
+
152
+ // Update the nodes…
153
+ var node = svg3.selectAll("g.node")
154
+ .data(nodes, function(d) { return d.id || (d.id = ++i); });
155
+
156
+ // Enter any new nodes at the parent's previous position.
157
+ var nodeEnter = node.enter().append("g")
158
+ .attr("class", "node")
159
+ .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
160
+ .on("click", click);
161
+
162
+ nodeEnter.append("circle")
163
+ .attr("r", 1e-6)
164
+ .style("fill", function(d) {
165
+ if(d.name == "Performance or Not") {
166
+ return "white";
167
+ }
168
+ else if (d.name != "Non-performance (NP)") {
169
+ return "blue";
170
+ }
171
+ else {
172
+ return "gray";
173
+ }
174
+ });
175
+
176
+ nodeEnter.append("text")
177
+ .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
178
+ .attr("dy", ".35em")
179
+ .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
180
+ .text(function(d) { return d.name; })
181
+ .style("fill-opacity", 1e-6);
182
+
183
+
184
+ var nodeUpdate = node.transition()
185
+ .duration(duration)
186
+ .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
187
+
188
+ nodeUpdate.select("circle")
189
+ .attr("r", 8)
190
+ .style("fill", function(d) {
191
+ if(d.name == "Performance or Not") {
192
+ return "white";
193
+ }
194
+ else if (d.name != "Non-performance (NP)") {
195
+ return "blue";
196
+ }
197
+ else {
198
+ return "gray";
199
+ }
200
+ });
201
+
202
+
203
+ nodeUpdate.select("text")
204
+ .style("fill-opacity", 1);
205
+
206
+ // Transition exiting nodes to the parent's new position.
207
+ var nodeExit = node.exit().transition()
208
+ .duration(duration)
209
+ .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
210
+ .remove();
211
+
212
+ nodeExit.select("circle")
213
+ .attr("r", 1e-6);
214
+
215
+ nodeExit.select("text")
216
+ .style("fill-opacity", 1e-6);
217
+
218
+ // Update the links…
219
+ var link = svg3.selectAll("path.link")
220
+ .data(links, function(d) { return d.target.id; });
221
+
222
+
223
+ // Enter any new links at the parent's previous position.
224
+ link.enter().insert("path", "g")
225
+ .attr("class", "link")
226
+ .attr("d", function(d) {
227
+ var o = {x: source.x0, y: source.y0};
228
+ return diagonal({source: o, target: o});
229
+ });
230
+ link.style("stroke","gray");
231
+
232
+ // Transition links to their new position.
233
+ link.transition()
234
+ .duration(duration)
235
+ .attr("d", diagonal);
236
+
237
+ // Transition exiting nodes to the parent's new position.
238
+ link.exit().transition()
239
+ .duration(duration)
240
+ .attr("d", function(d) {
241
+ var o = {x: source.x, y: source.y};
242
+ return diagonal({source: o, target: o});
243
+ })
244
+ .remove();
245
+
246
+ // Stash the old positions for transition.
247
+ nodes.forEach(function(d) {
248
+ d.x0 = d.x;
249
+ d.y0 = d.y;
250
+ });
251
+ console.log(nodes.length);
252
+ if(nodes.length ==3){
253
+
254
+ var x = document.getElementById("d1"); // Get the graph for Level1 nodes
255
+ var y = document.getElementById("d2"); // Get the graph for level 2 nodes
256
+ // x.style.display = "block"; // If number of nodes ==3, then you will hide the level 2 graph and display the level 1 graph
257
+ // y.style.display = "none";
258
+ var container = document.querySelector(".container");
259
+ // container.style.display = "none";
260
+
261
+ } else if(nodes.length >=8){
262
+
263
+ var x = document.getElementById("d1");
264
+ var y = document.getElementById("d2");
265
+ x.style.display = "none";
266
+ y.style.display = "block";
267
+ var container = document.querySelector(".container");
268
+ // container.style.display = "none";
269
+
270
+ }else if(nodes.length ==1){
271
+ var x = document.getElementById("d1");
272
+ var y = document.getElementById("d2");
273
+ x.style.display = "none";
274
+ y.style.display = "none";
275
+ var container = document.querySelector(".container");
276
+ // container.style.display = "none";
277
+ }
278
+
279
+ }
280
+
281
+
282
+
283
+
284
+ // Toggle children on click.
285
+ function click(d) {
286
+
287
+ if (d.children) {
288
+ d._children = d.children;
289
+ d.children = null;
290
+ } else {
291
+ d.children = d._children;
292
+ d._children = null;
293
+ }
294
+
295
+
296
+ update(d);
297
+
298
+
299
+
300
+
301
+ }
302
+ svg3.append("text")
303
+ .attr("x", width/2 + 10)
304
+ .attr("y", height - 150)
305
+ .attr("text-anchor", "middle")
306
+ .text("Taxonomy")
307
+ .style("font-weight", "bold")
308
+ .style("font-family", "Times New Roman")
309
+ .style("font-size", "16px")
310
+ .style("opacity", 0)
311
+ .transition()
312
+ .duration(2000)
313
+ .style("opacity", 1);
314
+
315
+ </script>
316
+ </div>
317
+
318
+ <div id="d1">
319
+ <script src="//d3js.org/d3.v3.min.js"></script>
320
+ <script>
321
+ var width = 620,
322
+ height = 570;
323
+ // SVG for Level1 graph
324
+ var svg = d3.select("#d1").append("svg")
325
+ .attr("width", width)
326
+ .attr("height", height)
327
+ .append("g");
328
+
329
+
330
+ var nodes1 = [
331
+ {x: width / 4, y: height / 2, label: "Non-Performance"},
332
+ {x: 3 * width / 4, y: height / 2, label: "Performance"}
333
+ ];
334
+
335
+ var links1 = [
336
+ {source: nodes1[0], target: nodes1[1]}
337
+ ];
338
+
339
+ var simulation1 = d3.layout.force()
340
+ .nodes(d3.values(nodes1))
341
+ .links(links1)
342
+ .size([width, height])
343
+ .linkDistance(400)
344
+ .charge(-3000)
345
+ .start();
346
+
347
+ var text1 = svg.append("g") // Append the node node names
348
+ .attr("class", "labels")
349
+ .selectAll("text")
350
+ .data(nodes1)
351
+ .enter().append("text")
352
+ .text(function(d) { return d.label; })
353
+ .attr("x", function(d) { return d.x+15; })
354
+ .attr("y", function(d) { return d.y+20; });
355
+
356
+ var link1 = svg.selectAll(".link") // Links between the nodes in the graph
357
+ .data(links1)
358
+ .enter()
359
+ .append("line")
360
+ .attr("class", "link")
361
+ .attr("x1", function(d) { return d.source.x; })
362
+ .attr("y1", function(d) { return d.source.y; })
363
+ .attr("x2", function(d) { return d.target.x; })
364
+ .attr("y2", function(d) { return d.target.y; });
365
+
366
+ link1.style("stroke","gray") // Color of the link and stroke width
367
+ .style("stroke-width",1.5+"px");
368
+
369
+
370
+ var node1 = svg.append("g") // Nodes in the graph
371
+ .attr("class", "nodes")
372
+ .selectAll("circle")
373
+ .data(nodes1)
374
+ .enter().append("circle")
375
+ .attr("r", 20)
376
+ .style("fill", function(d){
377
+ if(d.label == "Non-Performance"){
378
+ return "gray";
379
+ }else {
380
+ return "blue";
381
+ }
382
+ })
383
+
384
+ .attr("cx", function(d) { return d.x; })
385
+ .attr("cy", function(d) { return d.y; })
386
+ .on("mousedown",mousedown);
387
+
388
+ //To get the detailed results
389
+ function mousedown(d) {
390
+ var tableContainer = d3.select('.container');
391
+ tableContainer.remove();
392
+ d3.select("table").remove();
393
+
394
+ const nodeName = d.label;
395
+
396
+
397
+ var container = d3.select('body')
398
+ .append('div')
399
+ .attr('class', 'container')
400
+ .style('height', '250px')
401
+ .style('overflow', 'auto');
402
+
403
+ // Create the table element inside the container
404
+ var table = container.append('table')
405
+ .attr('class', 'table')
406
+ .style('table-layout', 'auto')
407
+
408
+
409
+
410
+ // Add a header row
411
+ const headerRow = table.append("tr");
412
+ headerRow.append("th").text("Id");
413
+ headerRow.append("th").text("Full Sentence");
414
+ headerRow.append("th").text("Component");
415
+ headerRow.append("th").text("cause/effect");
416
+ headerRow.append("th").text("Label level1");
417
+ headerRow.append("th").text("Label level2");
418
+
419
+
420
+ // Add a data row for the hovered node
421
+
422
+ d3.json("https://huggingface.co/datasets/Seetha/visual_files/raw/main/detailedResults.json", function(data) {
423
+ var table = d3.select("table"); // select the existing table
424
+ var tbody = table.append("tbody"); // create a tbody element
425
+ console.log(data)
426
+
427
+ // loop through each item in the data array
428
+ for (var i = 0; i < data.length; i++) {
429
+ console.log(nodeName);
430
+ console.log([data[i].Labellevel1])
431
+ if(nodeName == [data[i].Labellevel1]) {
432
+ console.log("yipee")
433
+
434
+ var tr = tbody.append("tr"); // create a table row for each item
435
+
436
+ // append a table cell with the Id property
437
+ tr.append("td").text(data[i].Id);
438
+ tr.append("td").text([data[i].Fullsentence]);
439
+ tr.append("td").text([data[i].Component]);
440
+ tr.append("td").text([data[i].causeOrEffect]);
441
+ tr.append("td").text([data[i].Labellevel1]);
442
+ tr.append("td").text([data[i].Labellevel2]);
443
+
444
+ }
445
+
446
+
447
+ }
448
+ });
449
+ }
450
+
451
+ svg.append("text")
452
+ .attr("x", width/2 + 10)
453
+ .attr("y", height - 150)
454
+ .attr("text-anchor", "middle")
455
+ .text(" Click on a node to get the detailed results")
456
+ .style("font-weight", "bold")
457
+ .style("font-family", "Times New Roman")
458
+ .style("font-size", "16px")
459
+ .style("opacity", 0)
460
+ .transition()
461
+ .duration(2000)
462
+ .style("opacity", 1);
463
+
464
+
465
+
466
+
467
+
468
+ </script>
469
+ </div>
470
+
471
+ <div id="d2">
472
+ <script src="http://d3js.org/d3.v3.min.js"></script>
473
+ <script>
474
+
475
+ // Load the data https://huggingface.co/datasets/Seetha/visual_files/
476
+ d3.json("https://huggingface.co/datasets/KGBrain/visual_files/raw/main/level2.json", function(data) {
477
+ var links = data;
478
+ console.log(links)
479
+
480
+
481
+ // Compute the distinct nodes from the links.
482
+ links.sort(function(a,b) {
483
+ if (a.source > b.source) {return 1;}
484
+ else if (a.source < b.source) {return -1;}
485
+ else {
486
+ if (a.target > b.target) {return 1;}
487
+ if (a.target < b.target) {return -1;}
488
+ else {return 0;}
489
+ }
490
+ });
491
+
492
+ //any links with duplicate source and target get an incremented 'linknum'
493
+ for (var i=0; i<links.length; i++) {
494
+ if (i != 0 &&
495
+ links[i].source == links[i-1].source &&
496
+ links[i].target == links[i-1].target) {
497
+ links[i].linknum = links[i-1].linknum + 1;
498
+ }
499
+ else {links[i].linknum = 1;};
500
+ };
501
+
502
+ var nodes = {};
503
+
504
+ // Compute the distinct nodes from the links.
505
+ links.forEach(function(link) {
506
+ link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
507
+ link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
508
+ });
509
+
510
+
511
+ // width and height of svg
512
+ var width = 650,
513
+ height = 620;
514
+
515
+
516
+ var force = d3.layout.force()
517
+ .nodes(d3.values(nodes))
518
+ .links(links)
519
+ .size([width, height])
520
+ .linkDistance(380)
521
+ .charge(-3000)
522
+ .on("tick", tick)
523
+ .start();
524
+
525
+ var svg2 = d3.select("#d2").append("svg")
526
+ .attr("width", width)
527
+ .attr("height", height)
528
+ .append("g");
529
+
530
+ // Append the arrows
531
+ svg2.append("svg:defs").selectAll("marker")
532
+ .data(["arrow"])
533
+ .enter().append("svg:marker")
534
+ .attr("id", String)
535
+ .attr("viewBox", "0 -5 10 10")
536
+ .attr("refX", 22)
537
+ .attr("refY", -1.8)
538
+ .attr("markerWidth", 6)
539
+ .attr("markerHeight", 6)
540
+ .attr("orient", "auto")
541
+ .append("svg:path")
542
+ .attr("d", "M0,-5L10,0L0,5")
543
+
544
+ // Per-type markers, as they don't inherit styles.
545
+ var path = svg2.append("svg:g").selectAll("path")
546
+ .data(force.links())
547
+ .enter().append("svg:path")
548
+ .attr("class", "link")
549
+ .attr("id",function(d,i) { return "linkId_" + i; })
550
+ .attr("marker-end", function(d) {
551
+ if (d.source.name != d.target.name) {
552
+ console.log("arrow"+ "url(#arrow)");
553
+ return "url(#arrow)";
554
+ } else {
555
+ return "";
556
+ }
557
+ })
558
+ .on("click", function(d) {
559
+
560
+ console.log("Source: " + d.source.name);
561
+ console.log("Target: " + d.target.name);
562
+
563
+ path.style("stroke-width", 2+"px");
564
+ d3.select(this)
565
+ .transition()
566
+ .duration(1000) // Animation duration in milliseconds
567
+ .style("stroke-width", "3px");
568
+
569
+
570
+ var nodeTable = document.querySelector(".container");
571
+ nodeTable.style.display = "none";
572
+
573
+ d3.select("table").remove();
574
+ var tableContainer = d3.select('.container');
575
+ tableContainer.remove();
576
+ var tableheader = d3.select('.headerRow');
577
+ tableheader.remove();
578
+
579
+ const nodeName = d.name;
580
+ console.log("Hovering over node:", nodeName);
581
+
582
+
583
+ var container = d3.select('body')
584
+ .append('div')
585
+ .attr('class', 'container')
586
+ .style('height', '250px')
587
+ .style('overflow', 'auto');
588
+
589
+ var table = container.append('table')
590
+ .attr('class', 'table')
591
+ .style('table-layout', 'auto')
592
+
593
+ d3.selectAll('.table td')
594
+ .style('font-size', '12px');
595
+
596
+
597
+ const headerRow = table.append("tr");
598
+ headerRow.append("th").text("Id");
599
+ headerRow.append("th").text("Full Sentence");
600
+ headerRow.append("th").text("Component");
601
+ headerRow.append("th").text("cause/effect");
602
+ headerRow.append("th").text("Label level1");
603
+ headerRow.append("th").text("Label level2");
604
+
605
+ d3.json("https://huggingface.co/datasets/KGBrain/visual_files/raw/main/detailedResults.json", function(data) {
606
+ var table = d3.select("table"); // select the existing table
607
+ var tbody = table.append("tbody"); // create a tbody element
608
+
609
+ // loop through each item in the data array
610
+ for (var i = 0; i < data.length; i++) {
611
+ var lableName = data[i].Labellevel2;
612
+ var causeOrEffect = data[i].causeOrEffect;
613
+ var id = data[i].Id;
614
+ if(lableName == d.source.name && (causeOrEffect == "cause")){
615
+
616
+ // for (var j = 0; j < data.length; j++) {
617
+ // if(id == data[j].Id){
618
+ // var lableName = data[j].Labellevel2;
619
+ // var causeOrEffect = data[j].causeOrEffect;
620
+ // if(lableName == d.target.name && (causeOrEffect == "effect")) {
621
+
622
+ // var tr = tbody.append("tr"); // create a table row for each item
623
+
624
+ // tr.append("td").text(data[i].Id);
625
+ // tr.append("td").text([data[i].Fullsentence]);
626
+ // tr.append("td").text([data[i].Component]);
627
+ // tr.append("td").text([data[i].causeOrEffect]);
628
+ // tr.append("td").text([data[i].Labellevel1]);
629
+ // tr.append("td").text([data[i].Labellevel2]);
630
+
631
+ // tr = tbody.append("tr")
632
+ // // append a table cell with the Id property
633
+ // tr.append("td").text(data[j].Id);
634
+ // tr.append("td").text([data[j].Fullsentence]);
635
+ // tr.append("td").text([data[j].Component]);
636
+ // tr.append("td").text([data[j].causeOrEffect]);
637
+ // tr.append("td").text([data[j].Labellevel1]);
638
+ // tr.append("td").text([data[j].Labellevel2]);
639
+ // }
640
+
641
+ // }
642
+ // }
643
+
644
+ for (var j=0; j<data.length; j++){
645
+ if (id == data[j].Id){
646
+ var labelName = data[j].Labellevel2;
647
+ var causeOrEffect = data[j].causeOrEffect;
648
+
649
+ //if(labelName == "Non-performance"&& causeOrEffect == "effect"){
650
+ if(causeOrEffect == "effect"){
651
+ var tr = tbody.append("tr");
652
+ tr.append("td").text(data[j].Id);
653
+ tr.append("td").text([data[j].Fullsentence]);
654
+ tr.append("td").text([data[j].Component]);
655
+ tr.append("td").text([data[j].causeOrEffect]);
656
+ tr.append("td").text([data[j].Labellevel1]);
657
+ tr.append("td").text([data[j].Labellevel2]); }
658
+ }
659
+ }
660
+
661
+
662
+ }
663
+ }
664
+
665
+
666
+ });
667
+
668
+
669
+ });
670
+
671
+
672
+ path.style("stroke-width",function() { // width of the link
673
+ return 2 + "px";
674
+
675
+ })
676
+
677
+ var node = svg2.selectAll(".node") //nodes in the graph
678
+ .data(force.nodes())
679
+ .enter().append("g")
680
+ .attr("class", "node")
681
+ .on("mousedown", mousedown)
682
+ .call(force.drag);
683
+
684
+
685
+ var colorScale = d3.scale.linear()
686
+ .domain([0, 60]) // Set the domain of the scale to the minimum and maximum possible values of d.value
687
+ .range(["#C0C0C0", "black"]); // Set the range of the scale to the minimum and maximum desired colors
688
+
689
+ path.style("stroke", function(d) {
690
+ console.log(d.value+colorScale(d.value))
691
+ return colorScale(d.value); // Use the scale to map the value of d.value to a color
692
+ });
693
+
694
+
695
+
696
+ // create a map in order to compute the size of the node
697
+ const map1 = new Map();
698
+ for (var nodeName in nodes) {
699
+ var sum = 0;
700
+ console.log("sum"+nodeName)
701
+ links.forEach(function (link) {
702
+ if(nodeName == link.source.name || nodeName == link.target.name) {
703
+ sum = sum + link.value
704
+ }
705
+ map1.set(nodeName, sum);
706
+ });
707
+
708
+ }
709
+
710
+ const min = Math.min(...map1.values());
711
+ console.log(min); // 👉️ 3
712
+
713
+ const max = Math.max(...map1.values());
714
+ console.log(max);
715
+
716
+ var myScale = d3.scale.linear()
717
+ .domain([min, max])
718
+ .range([10, 20]);
719
+
720
+ node.append("circle")
721
+ .attr("r", function(d) {
722
+ console.log("radius"+myScale(map1.get(d.name)))
723
+ return myScale(map1.get(d.name));
724
+ })
725
+ .style("fill", function(d){
726
+ if(d.name == "Non-performance"){
727
+ return "gray";
728
+ }else{
729
+ return "blue";
730
+ }
731
+ })
732
+ .style("stroke", "black")
733
+
734
+
735
+
736
+ var text = svg2.append("g").selectAll("text") // Lable of the node
737
+ .data(force.nodes())
738
+ .enter().append("text")
739
+ .attr("x", 8)
740
+ .attr("y", ".31em")
741
+ .text(function(d) { return d.name; });
742
+ var linktext = svg2.append("svg:g").selectAll("g.linklabelholder").data(force.links());
743
+
744
+ linktext.enter().append("g").attr("class", "linklabelholder")
745
+ .append("text")
746
+ .attr("class", "linklabel")
747
+ .style("font-size", "13px")
748
+ .attr("x", "50")
749
+ .attr("y", "-20")
750
+ .attr("text-anchor", "start")
751
+ .style("fill","#000")
752
+ .append("textPath")
753
+ .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
754
+ .text(function(d) {
755
+ return d.value;
756
+ });
757
+
758
+
759
+ // Use elliptical arc path segments to doubly-encode directionality.
760
+ function tick() {
761
+ path.attr("d", linkArc);
762
+ // node.attr("transform", transform);
763
+ text.attr("transform", transform);
764
+ node
765
+ .attr("transform", function(d) {
766
+ return "translate(" + d.x + "," + d.y + ")"; })
767
+
768
+
769
+ path.attr("d", function(d) {
770
+ // if(d.value !=0 ) {
771
+ var x1 = d.source.x,
772
+ y1 = d.source.y,
773
+ x2 = d.target.x,
774
+ y2 = d.target.y,
775
+
776
+ dx = x2 - x1,
777
+ dy = y2 - y1,
778
+ dr = Math.sqrt(dx * dx + dy * dy),
779
+
780
+ // Defaults for normal edge.
781
+ drx = dr,
782
+ dry = dr,
783
+ xRotation = 5, // degrees
784
+ largeArc = 0, // 1 or 0
785
+ sweep = 1; // 1 or 0
786
+
787
+ // Self edge.
788
+ if (x1 === x2 && y1 === y2) {
789
+ // Fiddle with this angle to get loop oriented.
790
+ xRotation = -70;
791
+
792
+ // Needs to be 1.
793
+ largeArc = 1;
794
+
795
+ // Change sweep to change orientation of loop.
796
+ sweep = 1;
797
+
798
+ // Make drx and dry different to get an ellipse
799
+ // instead of a circle.
800
+ drx = 30;
801
+ dry = 15;
802
+
803
+ // For whatever reason the arc collapses to a point if the beginning
804
+ // and ending points of the arc are the same, so kludge it.
805
+
806
+ x2 = x2 + 1;
807
+ y2 = y2 + 1;
808
+ }
809
+
810
+ return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2;
811
+ //}
812
+ });
813
+
814
+ }
815
+
816
+ function linkArc(d) {
817
+ var dx = d.target.x - d.source.x,
818
+ dy = d.target.y - d.source.y,
819
+ dr = Math.sqrt(dx * dx + dy * dy);
820
+ return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
821
+ }
822
+
823
+ function transform(d) {
824
+ return "translate(" + d.x + "," + d.y + ")";
825
+ }
826
+
827
+ function mousedown(d) {
828
+ path.style("stroke-width", 2+"px");
829
+ d3.event.stopPropagation();
830
+ // Removes the table first cleans all the div container area in order to append the new table
831
+ d3.select("table").remove();
832
+ var tableContainer = d3.select('.container');
833
+ tableContainer.remove();
834
+ var tableheader = d3.select('.headerRow');
835
+ tableheader.remove();
836
+
837
+ const nodeName = d.name;
838
+ console.log("Hovering over node:", nodeName);
839
+
840
+ // Create the container to append the table elements both header and body
841
+ var container = d3.select('body')
842
+ .append('div')
843
+ .attr('class', 'container')
844
+ .style('height', '250px')
845
+ .style('overflow', 'auto');
846
+ // Create the table element inside the container
847
+ var table = container.append('table')
848
+ .attr('class', 'table')
849
+ .style('table-layout', 'auto')
850
+
851
+ d3.selectAll('.table td')
852
+ .style('font-size', '12px');
853
+
854
+ // Add a header row
855
+ const headerRow = table.append("tr");
856
+ headerRow.append("th").text("Id");
857
+ headerRow.append("th").text("Full Sentence");
858
+ headerRow.append("th").text("Component");
859
+ headerRow.append("th").text("cause/effect");
860
+ headerRow.append("th").text("Label level1");
861
+ headerRow.append("th").text("Label level2");
862
+
863
+
864
+ // Add a data row for the hovered node
865
+
866
+ d3.json("https://huggingface.co/datasets/KGBrain/visual_files/raw/main/detailedResults.json", function(data) {
867
+ var table = d3.select("table"); // select the existing table
868
+ var tbody = table.append("tbody"); // create a tbody element
869
+
870
+ // loop through each item in the data array
871
+ for (var i = 0; i < data.length; i++) {
872
+ if(nodeName == [data[i].Labellevel2]) { // Check for if the nodename that is cliked matches the name in the csv file
873
+ var cid = data[i].Id;
874
+ console.log("Current ID"+cid);
875
+ for (var j=0; j<data.length; j++){
876
+ if(data[j].Id<=cid){
877
+ if(data[j].Id==cid){
878
+ var tr = tbody.append("tr"); // create a table row for each item
879
+
880
+ // append a table cell with the Id property
881
+ tr.append("td").text(data[j].Id);
882
+ tr.append("td").text([data[j].Fullsentence]);
883
+ tr.append("td").text([data[j].Component]);
884
+ tr.append("td").text([data[j].causeOrEffect]);
885
+ tr.append("td").text([data[j].Labellevel1]);
886
+ tr.append("td").text([data[j].Labellevel2]);
887
+ }
888
+
889
+ }
890
+ }
891
+
892
+
893
+ }
894
+
895
+ }
896
+ });
897
+
898
+ }
899
+
900
+
901
+ // The text that appears below the 5 node graph
902
+ svg2.append("text")
903
+ .attr("x", width/2 + 10)
904
+ .attr("y", height - 30)
905
+ .attr("text-anchor", "middle")
906
+ .text(" Click on a node to get the detailed results")
907
+ .style("font-weight", "bold")
908
+ .style("font-family", "Times New Roman")
909
+ .style("font-size", "16px")
910
+ .style("opacity", 0)
911
+ .transition()
912
+ .duration(2000)
913
+ .style("opacity", 1);
914
+
915
+
916
+ });
917
+
918
+
919
+
920
+
921
+ </script>
922
+ </div>
923
+ </div>
924
+ </body>
925
+ </html>
926
+
927
+
928
+