Spaces:

KGBrain
/

visual-knowledgegraph

Running

App Files Files Community

KGBrain commited on Dec 1, 2023

Commit

e6c0aaf

1 Parent(s): 9c34edb

Upload 4 files

Browse files

Files changed (4) hide show

index.html +918 -0
level2.css +18 -0
side.css +21 -0
tree.css +15 -0

index.html ADDED Viewed

	@@ -0,0 +1,918 @@

+<!DOCTYPE html>
+<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]);
+                                    //         }
+                                    //     }
+                                    // }
+                                  for (var j=0; j<data.length; j++){
+                                    if (id == data[j].Id){
+                                      var labelName = data[j].Labellevel2;
+                                      var causeOrEffect = data[j].causeOrEffect;
+                                          if(labelName == "Non-performance"&& causeOrEffect == "effect"){
+                                            var tr = tbody.append("tr");
+                                            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>

level2.css ADDED Viewed

	@@ -0,0 +1,18 @@

+path.link {
+    fill: none;
+    stroke-width: 1.5px;
+}
+circle {
+    fill: #ccc;
+    stroke: #333;
+    stroke-width: 1.5px;
+}
+text {
+    font: 10px sans-serif;
+    pointer-events: none;
+}

side.css ADDED Viewed

	@@ -0,0 +1,21 @@

+/*.tree*/
+/*{*/
+/*    position: absolute;*/
+/*    top: 50%;*/
+/*    left: 50%;*/
+/*    transform: translate(-50%, -50%);*/
+/*    background-color : #4444aa;*/
+/*}*/
+/*.graph*/
+/*{*/
+/*    position: absolute;*/
+/*    top: 50%;*/
+/*    right: 50%;*/
+/*    transform: translate(50%, 50%);*/
+/*}*/
+#container{
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+}

tree.css ADDED Viewed

	@@ -0,0 +1,15 @@

+.node circle {
+    fill: #fff;
+    stroke: black;
+    stroke-width: 2px;
+}
+.node text {
+    font: 12px sans-serif;
+}
+.link {
+    fill: none;
+    stroke-width: 2px;
+}