Seetha commited on
Commit
ec83f29
1 Parent(s): e90c3af

Update index.html

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