Spaces:
Running
Running
| <html> | |
| <!-- <iframe | |
| src="https://seetha-ima-pipeline-streamlit.hf.space?embed=true" | |
| frameborder="0" | |
| width="850" | |
| height="450" | |
| ></iframe> --> | |
| <!-- <div id="dv" class="six columns"> | |
| <iframe id="myFrame" name="myFrame" src="https://seetha-ima-pipeline-streamlit.hf.space?embed=true"></iframe> | |
| </div> --> | |
| <head> | |
| <link rel = "stylesheet" href = "tree.css"> | |
| <link rel = "stylesheet" href = "level2.css"> | |
| <link rel = "stylesheet" href = "side.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body {background-color: floralwhite;} | |
| </style> | |
| <style> | |
| #d1 { | |
| display: block; | |
| } | |
| #d2 { | |
| display: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| width: 100%; | |
| } | |
| th, td { | |
| border: 1px solid black; | |
| padding: 5px; | |
| text-align: center; | |
| } | |
| tr:hover { | |
| background-color: lightgoldenrodyellow; | |
| } | |
| th{ | |
| position: sticky; | |
| top: 0; | |
| background-color: lightsteelblue; | |
| } | |
| </style> | |
| <center> | |
| <h1 style="color:black;">Causal Text to Knowledge Graph </h1> | |
| </center> | |
| </head> | |
| <body> | |
| <div id = "container"> | |
| <div id = "tree"> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var treeData = [ | |
| { | |
| "name": "Performance or Not", | |
| "children": [ | |
| { | |
| "name": "Performance (P)", | |
| "children": [ | |
| { | |
| "name": "Investors (INV)" | |
| }, | |
| { | |
| "name": "Customers (CUS)" | |
| }, | |
| { | |
| "name": "Employees (EMP)" | |
| }, | |
| { | |
| "name": "Society (SOC)" | |
| }, | |
| { | |
| "name": "Unclassified" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Non-performance (NP)", | |
| } | |
| ] | |
| } | |
| ]; | |
| var margin = {top: 20, right: 120, bottom: 20, left: 120}, | |
| width = 800 - margin.right - margin.left, | |
| height = 620 - margin.top - margin.bottom; | |
| var i = 0, | |
| duration = 750, | |
| root; | |
| var tree = d3.layout.tree() | |
| .size([height, width]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function(d) { return [d.y, d.x]; }); | |
| var svg3 = d3.select("#tree").append("svg") | |
| .attr("width", width + margin.right + margin.left) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| root = treeData[0]; | |
| root.x0 = height / 2; | |
| root.y0 = 0; | |
| function collapse(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d._children.forEach(collapse); | |
| d.children = null; | |
| } | |
| } | |
| root.children.forEach(collapse); | |
| update(root); | |
| function update(source) { | |
| // Compute the new tree layout. | |
| var nodes = tree.nodes(root).reverse(), | |
| links = tree.links(nodes); | |
| // Normalize for fixed-depth. | |
| nodes.forEach(function(d) { d.y = d.depth * 200; }); | |
| // Update the nodes… | |
| var node = svg3.selectAll("g.node") | |
| .data(nodes, function(d) { return d.id || (d.id = ++i); }); | |
| // Enter any new nodes at the parent's previous position. | |
| var nodeEnter = node.enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) | |
| .on("click", click); | |
| nodeEnter.append("circle") | |
| .attr("r", 1e-6) | |
| .style("fill", function(d) { | |
| if(d.name == "Performance or Not") { | |
| return "white"; | |
| } | |
| else if (d.name != "Non-performance (NP)") { | |
| return "blue"; | |
| } | |
| else { | |
| return "gray"; | |
| } | |
| }); | |
| nodeEnter.append("text") | |
| .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) | |
| .text(function(d) { return d.name; }) | |
| .style("fill-opacity", 1e-6); | |
| var nodeUpdate = node.transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); | |
| nodeUpdate.select("circle") | |
| .attr("r", 8) | |
| .style("fill", function(d) { | |
| if(d.name == "Performance or Not") { | |
| return "white"; | |
| } | |
| else if (d.name != "Non-performance (NP)") { | |
| return "blue"; | |
| } | |
| else { | |
| return "gray"; | |
| } | |
| }); | |
| nodeUpdate.select("text") | |
| .style("fill-opacity", 1); | |
| // Transition exiting nodes to the parent's new position. | |
| var nodeExit = node.exit().transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) | |
| .remove(); | |
| nodeExit.select("circle") | |
| .attr("r", 1e-6); | |
| nodeExit.select("text") | |
| .style("fill-opacity", 1e-6); | |
| // Update the links… | |
| var link = svg3.selectAll("path.link") | |
| .data(links, function(d) { return d.target.id; }); | |
| // Enter any new links at the parent's previous position. | |
| link.enter().insert("path", "g") | |
| .attr("class", "link") | |
| .attr("d", function(d) { | |
| var o = {x: source.x0, y: source.y0}; | |
| return diagonal({source: o, target: o}); | |
| }); | |
| link.style("stroke","gray"); | |
| // Transition links to their new position. | |
| link.transition() | |
| .duration(duration) | |
| .attr("d", diagonal); | |
| // Transition exiting nodes to the parent's new position. | |
| link.exit().transition() | |
| .duration(duration) | |
| .attr("d", function(d) { | |
| var o = {x: source.x, y: source.y}; | |
| return diagonal({source: o, target: o}); | |
| }) | |
| .remove(); | |
| // Stash the old positions for transition. | |
| nodes.forEach(function(d) { | |
| d.x0 = d.x; | |
| d.y0 = d.y; | |
| }); | |
| console.log(nodes.length); | |
| if(nodes.length ==3){ | |
| var x = document.getElementById("d1"); // Get the graph for Level1 nodes | |
| var y = document.getElementById("d2"); // Get the graph for level 2 nodes | |
| // x.style.display = "block"; // If number of nodes ==3, then you will hide the level 2 graph and display the level 1 graph | |
| // y.style.display = "none"; | |
| var container = document.querySelector(".container"); | |
| // container.style.display = "none"; | |
| } else if(nodes.length >=8){ | |
| var x = document.getElementById("d1"); | |
| var y = document.getElementById("d2"); | |
| x.style.display = "none"; | |
| y.style.display = "block"; | |
| var container = document.querySelector(".container"); | |
| // container.style.display = "none"; | |
| }else if(nodes.length ==1){ | |
| var x = document.getElementById("d1"); | |
| var y = document.getElementById("d2"); | |
| x.style.display = "none"; | |
| y.style.display = "none"; | |
| var container = document.querySelector(".container"); | |
| // container.style.display = "none"; | |
| } | |
| } | |
| // Toggle children on click. | |
| function click(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d.children = null; | |
| } else { | |
| d.children = d._children; | |
| d._children = null; | |
| } | |
| update(d); | |
| } | |
| svg3.append("text") | |
| .attr("x", width/2 + 10) | |
| .attr("y", height - 150) | |
| .attr("text-anchor", "middle") | |
| .text("Taxonomy") | |
| .style("font-weight", "bold") | |
| .style("font-family", "Times New Roman") | |
| .style("font-size", "16px") | |
| .style("opacity", 0) | |
| .transition() | |
| .duration(2000) | |
| .style("opacity", 1); | |
| </script> | |
| </div> | |
| <div id="d1"> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 620, | |
| height = 570; | |
| // SVG for Level1 graph | |
| var svg = d3.select("#d1").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g"); | |
| var nodes1 = [ | |
| {x: width / 4, y: height / 2, label: "Non-Performance"}, | |
| {x: 3 * width / 4, y: height / 2, label: "Performance"} | |
| ]; | |
| var links1 = [ | |
| {source: nodes1[0], target: nodes1[1]} | |
| ]; | |
| var simulation1 = d3.layout.force() | |
| .nodes(d3.values(nodes1)) | |
| .links(links1) | |
| .size([width, height]) | |
| .linkDistance(400) | |
| .charge(-3000) | |
| .start(); | |
| var text1 = svg.append("g") // Append the node node names | |
| .attr("class", "labels") | |
| .selectAll("text") | |
| .data(nodes1) | |
| .enter().append("text") | |
| .text(function(d) { return d.label; }) | |
| .attr("x", function(d) { return d.x+15; }) | |
| .attr("y", function(d) { return d.y+20; }); | |
| var link1 = svg.selectAll(".link") // Links between the nodes in the graph | |
| .data(links1) | |
| .enter() | |
| .append("line") | |
| .attr("class", "link") | |
| .attr("x1", function(d) { return d.source.x; }) | |
| .attr("y1", function(d) { return d.source.y; }) | |
| .attr("x2", function(d) { return d.target.x; }) | |
| .attr("y2", function(d) { return d.target.y; }); | |
| link1.style("stroke","gray") // Color of the link and stroke width | |
| .style("stroke-width",1.5+"px"); | |
| var node1 = svg.append("g") // Nodes in the graph | |
| .attr("class", "nodes") | |
| .selectAll("circle") | |
| .data(nodes1) | |
| .enter().append("circle") | |
| .attr("r", 20) | |
| .style("fill", function(d){ | |
| if(d.label == "Non-Performance"){ | |
| return "gray"; | |
| }else { | |
| return "blue"; | |
| } | |
| }) | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .on("mousedown",mousedown); | |
| //To get the detailed results | |
| function mousedown(d) { | |
| var tableContainer = d3.select('.container'); | |
| tableContainer.remove(); | |
| d3.select("table").remove(); | |
| const nodeName = d.label; | |
| var container = d3.select('body') | |
| .append('div') | |
| .attr('class', 'container') | |
| .style('height', '250px') | |
| .style('overflow', 'auto'); | |
| // Create the table element inside the container | |
| var table = container.append('table') | |
| .attr('class', 'table') | |
| .style('table-layout', 'auto') | |
| // Add a header row | |
| const headerRow = table.append("tr"); | |
| headerRow.append("th").text("Id"); | |
| headerRow.append("th").text("Full Sentence"); | |
| headerRow.append("th").text("Component"); | |
| headerRow.append("th").text("cause/effect"); | |
| headerRow.append("th").text("Label level1"); | |
| headerRow.append("th").text("Label level2"); | |
| // Add a data row for the hovered node | |
| d3.json("https://huggingface.co/datasets/Seetha/visual_files/raw/main/detailedResults.json", function(data) { | |
| var table = d3.select("table"); // select the existing table | |
| var tbody = table.append("tbody"); // create a tbody element | |
| console.log(data) | |
| // loop through each item in the data array | |
| for (var i = 0; i < data.length; i++) { | |
| console.log(nodeName); | |
| console.log([data[i].Labellevel1]) | |
| if(nodeName == [data[i].Labellevel1]) { | |
| console.log("yipee") | |
| var tr = tbody.append("tr"); // create a table row for each item | |
| // append a table cell with the Id property | |
| tr.append("td").text(data[i].Id); | |
| tr.append("td").text([data[i].Fullsentence]); | |
| tr.append("td").text([data[i].Component]); | |
| tr.append("td").text([data[i].causeOrEffect]); | |
| tr.append("td").text([data[i].Labellevel1]); | |
| tr.append("td").text([data[i].Labellevel2]); | |
| } | |
| } | |
| }); | |
| } | |
| svg.append("text") | |
| .attr("x", width/2 + 10) | |
| .attr("y", height - 150) | |
| .attr("text-anchor", "middle") | |
| .text(" Click on a node to get the detailed results") | |
| .style("font-weight", "bold") | |
| .style("font-family", "Times New Roman") | |
| .style("font-size", "16px") | |
| .style("opacity", 0) | |
| .transition() | |
| .duration(2000) | |
| .style("opacity", 1); | |
| </script> | |
| </div> | |
| <div id="d2"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| // Load the data https://huggingface.co/datasets/Seetha/visual_files/ | |
| d3.json("https://huggingface.co/datasets/Seetha/visual_files/raw/main/level2.json", function(data) { | |
| var links = data; | |
| console.log(links) | |
| // Compute the distinct nodes from the links. | |
| links.sort(function(a,b) { | |
| if (a.source > b.source) {return 1;} | |
| else if (a.source < b.source) {return -1;} | |
| else { | |
| if (a.target > b.target) {return 1;} | |
| if (a.target < b.target) {return -1;} | |
| else {return 0;} | |
| } | |
| }); | |
| //any links with duplicate source and target get an incremented 'linknum' | |
| for (var i=0; i<links.length; i++) { | |
| if (i != 0 && | |
| links[i].source == links[i-1].source && | |
| links[i].target == links[i-1].target) { | |
| links[i].linknum = links[i-1].linknum + 1; | |
| } | |
| else {links[i].linknum = 1;}; | |
| }; | |
| var nodes = {}; | |
| // Compute the distinct nodes from the links. | |
| links.forEach(function(link) { | |
| link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); | |
| link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); | |
| }); | |
| // width and height of svg | |
| var width = 650, | |
| height = 620; | |
| var force = d3.layout.force() | |
| .nodes(d3.values(nodes)) | |
| .links(links) | |
| .size([width, height]) | |
| .linkDistance(380) | |
| .charge(-3000) | |
| .on("tick", tick) | |
| .start(); | |
| var svg2 = d3.select("#d2").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g"); | |
| // Append the arrows | |
| svg2.append("svg:defs").selectAll("marker") | |
| .data(["arrow"]) | |
| .enter().append("svg:marker") | |
| .attr("id", String) | |
| .attr("viewBox", "0 -5 10 10") | |
| .attr("refX", 22) | |
| .attr("refY", -1.8) | |
| .attr("markerWidth", 6) | |
| .attr("markerHeight", 6) | |
| .attr("orient", "auto") | |
| .append("svg:path") | |
| .attr("d", "M0,-5L10,0L0,5") | |
| // Per-type markers, as they don't inherit styles. | |
| var path = svg2.append("svg:g").selectAll("path") | |
| .data(force.links()) | |
| .enter().append("svg:path") | |
| .attr("class", "link") | |
| .attr("id",function(d,i) { return "linkId_" + i; }) | |
| .attr("marker-end", function(d) { | |
| if (d.source.name != d.target.name) { | |
| console.log("arrow"+ "url(#arrow)"); | |
| return "url(#arrow)"; | |
| } else { | |
| return ""; | |
| } | |
| }) | |
| .on("click", function(d) { | |
| console.log("Source: " + d.source.name); | |
| console.log("Target: " + d.target.name); | |
| path.style("stroke-width", 2+"px"); | |
| d3.select(this) | |
| .transition() | |
| .duration(1000) // Animation duration in milliseconds | |
| .style("stroke-width", "3px"); | |
| var nodeTable = document.querySelector(".container"); | |
| nodeTable.style.display = "none"; | |
| d3.select("table").remove(); | |
| var tableContainer = d3.select('.container'); | |
| tableContainer.remove(); | |
| var tableheader = d3.select('.headerRow'); | |
| tableheader.remove(); | |
| const nodeName = d.name; | |
| console.log("Hovering over node:", nodeName); | |
| var container = d3.select('body') | |
| .append('div') | |
| .attr('class', 'container') | |
| .style('height', '250px') | |
| .style('overflow', 'auto'); | |
| var table = container.append('table') | |
| .attr('class', 'table') | |
| .style('table-layout', 'auto') | |
| d3.selectAll('.table td') | |
| .style('font-size', '12px'); | |
| const headerRow = table.append("tr"); | |
| headerRow.append("th").text("Id"); | |
| headerRow.append("th").text("Full Sentence"); | |
| headerRow.append("th").text("Component"); | |
| headerRow.append("th").text("cause/effect"); | |
| headerRow.append("th").text("Label level1"); | |
| headerRow.append("th").text("Label level2"); | |
| d3.json("https://huggingface.co/datasets/Seetha/visual_files/raw/main/detailedResults.json", function(data) { | |
| var table = d3.select("table"); // select the existing table | |
| var tbody = table.append("tbody"); // create a tbody element | |
| // loop through each item in the data array | |
| for (var i = 0; i < data.length; i++) { | |
| var lableName = data[i].Labellevel2; | |
| var causeOrEffect = data[i].causeOrEffect; | |
| var id = data[i].Id; | |
| if(lableName == d.source.name && (causeOrEffect == "cause")){ | |
| for (var j = 0; j < data.length; j++) { | |
| if(id == data[j].Id){ | |
| var lableName = data[j].Labellevel2; | |
| var causeOrEffect = data[j].causeOrEffect; | |
| if(lableName == d.target.name && (causeOrEffect == "effect")) { | |
| var tr = tbody.append("tr"); // create a table row for each item | |
| tr.append("td").text(data[i].Id); | |
| tr.append("td").text([data[i].Fullsentence]); | |
| tr.append("td").text([data[i].Component]); | |
| tr.append("td").text([data[i].causeOrEffect]); | |
| tr.append("td").text([data[i].Labellevel1]); | |
| tr.append("td").text([data[i].Labellevel2]); | |
| tr = tbody.append("tr") | |
| // append a table cell with the Id property | |
| tr.append("td").text(data[j].Id); | |
| tr.append("td").text([data[j].Fullsentence]); | |
| tr.append("td").text([data[j].Component]); | |
| tr.append("td").text([data[j].causeOrEffect]); | |
| tr.append("td").text([data[j].Labellevel1]); | |
| tr.append("td").text([data[j].Labellevel2]); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| path.style("stroke-width",function() { // width of the link | |
| return 2 + "px"; | |
| }) | |
| var node = svg2.selectAll(".node") //nodes in the graph | |
| .data(force.nodes()) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .on("mousedown", mousedown) | |
| .call(force.drag); | |
| var colorScale = d3.scale.linear() | |
| .domain([0, 60]) // Set the domain of the scale to the minimum and maximum possible values of d.value | |
| .range(["#C0C0C0", "black"]); // Set the range of the scale to the minimum and maximum desired colors | |
| path.style("stroke", function(d) { | |
| console.log(d.value+colorScale(d.value)) | |
| return colorScale(d.value); // Use the scale to map the value of d.value to a color | |
| }); | |
| // create a map in order to compute the size of the node | |
| const map1 = new Map(); | |
| for (var nodeName in nodes) { | |
| var sum = 0; | |
| console.log("sum"+nodeName) | |
| links.forEach(function (link) { | |
| if(nodeName == link.source.name || nodeName == link.target.name) { | |
| sum = sum + link.value | |
| } | |
| map1.set(nodeName, sum); | |
| }); | |
| } | |
| const min = Math.min(...map1.values()); | |
| console.log(min); // 👉️ 3 | |
| const max = Math.max(...map1.values()); | |
| console.log(max); | |
| var myScale = d3.scale.linear() | |
| .domain([min, max]) | |
| .range([10, 20]); | |
| node.append("circle") | |
| .attr("r", function(d) { | |
| console.log("radius"+myScale(map1.get(d.name))) | |
| return myScale(map1.get(d.name)); | |
| }) | |
| .style("fill", function(d){ | |
| if(d.name == "Non-performance"){ | |
| return "gray"; | |
| }else{ | |
| return "blue"; | |
| } | |
| }) | |
| .style("stroke", "black") | |
| var text = svg2.append("g").selectAll("text") // Lable of the node | |
| .data(force.nodes()) | |
| .enter().append("text") | |
| .attr("x", 8) | |
| .attr("y", ".31em") | |
| .text(function(d) { return d.name; }); | |
| var linktext = svg2.append("svg:g").selectAll("g.linklabelholder").data(force.links()); | |
| linktext.enter().append("g").attr("class", "linklabelholder") | |
| .append("text") | |
| .attr("class", "linklabel") | |
| .style("font-size", "13px") | |
| .attr("x", "50") | |
| .attr("y", "-20") | |
| .attr("text-anchor", "start") | |
| .style("fill","#000") | |
| .append("textPath") | |
| .attr("xlink:href",function(d,i) { return "#linkId_" + i;}) | |
| .text(function(d) { | |
| return d.value; | |
| }); | |
| // Use elliptical arc path segments to doubly-encode directionality. | |
| function tick() { | |
| path.attr("d", linkArc); | |
| // node.attr("transform", transform); | |
| text.attr("transform", transform); | |
| node | |
| .attr("transform", function(d) { | |
| return "translate(" + d.x + "," + d.y + ")"; }) | |
| path.attr("d", function(d) { | |
| // if(d.value !=0 ) { | |
| var x1 = d.source.x, | |
| y1 = d.source.y, | |
| x2 = d.target.x, | |
| y2 = d.target.y, | |
| dx = x2 - x1, | |
| dy = y2 - y1, | |
| dr = Math.sqrt(dx * dx + dy * dy), | |
| // Defaults for normal edge. | |
| drx = dr, | |
| dry = dr, | |
| xRotation = 5, // degrees | |
| largeArc = 0, // 1 or 0 | |
| sweep = 1; // 1 or 0 | |
| // Self edge. | |
| if (x1 === x2 && y1 === y2) { | |
| // Fiddle with this angle to get loop oriented. | |
| xRotation = -70; | |
| // Needs to be 1. | |
| largeArc = 1; | |
| // Change sweep to change orientation of loop. | |
| sweep = 1; | |
| // Make drx and dry different to get an ellipse | |
| // instead of a circle. | |
| drx = 30; | |
| dry = 15; | |
| // For whatever reason the arc collapses to a point if the beginning | |
| // and ending points of the arc are the same, so kludge it. | |
| x2 = x2 + 1; | |
| y2 = y2 + 1; | |
| } | |
| return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2; | |
| //} | |
| }); | |
| } | |
| function linkArc(d) { | |
| var dx = d.target.x - d.source.x, | |
| dy = d.target.y - d.source.y, | |
| dr = Math.sqrt(dx * dx + dy * dy); | |
| return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; | |
| } | |
| function transform(d) { | |
| return "translate(" + d.x + "," + d.y + ")"; | |
| } | |
| function mousedown(d) { | |
| path.style("stroke-width", 2+"px"); | |
| d3.event.stopPropagation(); | |
| // Removes the table first cleans all the div container area in order to append the new table | |
| d3.select("table").remove(); | |
| var tableContainer = d3.select('.container'); | |
| tableContainer.remove(); | |
| var tableheader = d3.select('.headerRow'); | |
| tableheader.remove(); | |
| const nodeName = d.name; | |
| console.log("Hovering over node:", nodeName); | |
| // Create the container to append the table elements both header and body | |
| var container = d3.select('body') | |
| .append('div') | |
| .attr('class', 'container') | |
| .style('height', '250px') | |
| .style('overflow', 'auto'); | |
| // Create the table element inside the container | |
| var table = container.append('table') | |
| .attr('class', 'table') | |
| .style('table-layout', 'auto') | |
| d3.selectAll('.table td') | |
| .style('font-size', '12px'); | |
| // Add a header row | |
| const headerRow = table.append("tr"); | |
| headerRow.append("th").text("Id"); | |
| headerRow.append("th").text("Full Sentence"); | |
| headerRow.append("th").text("Component"); | |
| headerRow.append("th").text("cause/effect"); | |
| headerRow.append("th").text("Label level1"); | |
| headerRow.append("th").text("Label level2"); | |
| // Add a data row for the hovered node | |
| d3.json("https://huggingface.co/datasets/Seetha/visual_files/raw/main/detailedResults.json", function(data) { | |
| var table = d3.select("table"); // select the existing table | |
| var tbody = table.append("tbody"); // create a tbody element | |
| // loop through each item in the data array | |
| for (var i = 0; i < data.length; i++) { | |
| if(nodeName == [data[i].Labellevel2]) { // Check for if the nodename that is cliked matches the name in the csv file | |
| var tr = tbody.append("tr"); // create a table row for each item | |
| // append a table cell with the Id property | |
| tr.append("td").text(data[i].Id); | |
| tr.append("td").text([data[i].Fullsentence]); | |
| tr.append("td").text([data[i].Component]); | |
| tr.append("td").text([data[i].causeOrEffect]); | |
| tr.append("td").text([data[i].Labellevel1]); | |
| tr.append("td").text([data[i].Labellevel2]); | |
| } | |
| } | |
| }); | |
| } | |
| // The text that appears below the 5 node graph | |
| svg2.append("text") | |
| .attr("x", width/2 + 10) | |
| .attr("y", height - 30) | |
| .attr("text-anchor", "middle") | |
| .text(" Click on a node to get the detailed results") | |
| .style("font-weight", "bold") | |
| .style("font-family", "Times New Roman") | |
| .style("font-size", "16px") | |
| .style("opacity", 0) | |
| .transition() | |
| .duration(2000) | |
| .style("opacity", 1); | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |