Hugging Face's logo

Spaces:
Seetha
/
visual-knowledgegraph
Running

App Files Community
Seetha commited on
Commit
f1f68a9
·
1 Parent(s): 47eb2ca

Delete index.html

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