Hugging Face's logo

Spaces:
KGBrain
/
visual-knowledgegraph
Running

App Files Community
KGBrain commited on
Commit
c2bbeda
·
1 Parent(s): 700b1d9

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -928
index.html DELETED
@@ -1,928 +0,0 @@
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
-