Spaces:

Seetha
/

IMA-pipeline-streamlit

Sleeping

App Files Files Community

Seetha commited on Jul 5, 2023

Commit

9e70742

1 Parent(s): c03bccd

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -1037

index.html DELETED Viewed

@@ -1,1037 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <link rel = "stylesheet" href = "tree.css">
-    <link rel = "stylesheet" href = "div.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");
-                    var y = document.getElementById("d2");
-                    x.style.display = "block";
-                    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);
-            }
-        </script>
-    </div>
-    <div id="d1">
-        <script src="https://d3js.org/d3.v3.min.js"></script>
-        <script>
-            var width = 620,
-                height = 570;
-            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")
-                .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")
-                .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")
-                .style("stroke-width",1.5+"px");
-            var node1 = svg.append("g")
-                .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);
-            function mousedown(d) {
-                var tableContainer = d3.select('.container');
-                tableContainer.remove();
-                d3.select("table").remove();
-                const nodeName = d.label;
-                console.log("Hovering over node:", nodeName);
-                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', 'fixed')
-                // 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("ch.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++) {
-                        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);
-            // Add the path using this helper function
-        </script>
-    </div>
-    <div id="d2">
-        <script src="https://d3js.org/d3.v3.min.js"></script>
-        <script>
-            d3.json("smalljson.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 = {};
-                //links = links.filter(function(link) {
-                // return link.value !== 0;
-               //});
-            // 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});
-            });
-            console.log("hello")
-                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) {
-                            console.log("sum"+link.source.name)
-                            sum = sum + link.value
-                        }
-                        map1.set(nodeName, sum);
-                    });
-            }
-                console.log(map1.get('Customers'));
-                const mapSort2 = new Map([...map1.entries()].sort((a, b) => a[1] - b[1]));
-                console.log(mapSort2);
-            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)
-                //.call(d3.behavior.zoom().on("zoom", function () {
-                //   svg2.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
-                // }))
-                .append("g");
-            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")
-                var selflink = svg2.append("svg:g").selectAll(".selflink")
-                    .data(force.links())
-                    .enter().append("path")
-                    .attr("class","link");
-                selflink.style("stroke","lightgray")
-            // 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 "";
-                    }
-                });
-            path.style("stroke-width",function(d) {
-                if(d.value > 50) {
-                    return 2 + "px";
-                }else{
-                    return 2 + "px";
-                }
-            })
-                function clickLink(d) {
-                var linkClicked = d.name
-                }
-                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
-                });
-                /*function handleMouseOver(d, i) {
-                    // select all the paths attached to the node and highlight them
-                    d3.selectAll('.link')
-                        .filter(function(l) { return l.source === d || l.target === d; })
-                        .style('stroke', 'black')
-                        .style('stroke-width', '2');
-                    // reduce the opacity of all other links
-                    d3.selectAll('.link')
-                        .filter(function(l) { return l.source !== d && l.target !== d; })
-                        .style('opacity', 0.1);
-                }
-                function handleMouseOut(d, i) {
-                    // select all the paths attached to the node and reset their styles
-                    d3.selectAll('.link')
-                        .filter(function(l) { return l.source === d || l.target === d; })
-                        .style('stroke', null)
-                        .style('stroke-width', null);
-                    path.style("stroke-width",function(d){
-                        if(d.type > 167){
-                            return "6px"
-                        }else if(d.type > 160){
-                            return "5px"
-                        }else if(d.type > 50){
-                            return "4px"
-                        }else if(d.type > 40){
-                            return "3px"
-                        }else if(d.type > 4){
-                            return "2px"
-                        }else if(d.type > 1){
-                            return "1px"
-                        }
-                        else if(d.type >0){
-                            return "0px"
-                        }else if(d.type ==0){
-                            return "0.5px"
-                        }
-                    });
-                    path.style("stroke",function(d){
-                        if(d.type > 167) {
-                            return "black"
-                        }
-                    });
-                    // reset the opacity of all other links
-                    d3.selectAll('.link')
-                        .filter(function(l) { return l.source !== d && l.target !== d; })
-                        .style('opacity', 1);
-                }*/
-            // var node = svg.append("g").selectAll("node")
-            // .data(force.nodes())
-            // .enter().append("circle")
-            // .attr("r", 10)
-            // .call(force.drag);
-               /* var selflinktext = svg2.append("svg:g").selectAll(".selflinktext")
-                    .data(force.links())
-                    .enter().append("text")
-                selflinktext.filter(function(d) { return d.source === d.target; })
-                    .attr("x", function(d) { return d.source.x; })
-                    .attr("y", function(d) { return d.source.y; })
-                    .text(function(d) { console.log("ji"+d.value);
-                        return d.value; });*/
-                //.attr("class", function(d) { return "link " + d.value; })
-                //.attr("id",function(d,i) { return "linkId_" + i; })
-               // .attr("marker-end", function(d) { console.log("value"+d.value)
-                  //  return "url(#" + d.value + ")"; });
-            var node = svg2.selectAll(".node")
-                .data(force.nodes())
-                .enter().append("g")
-                .attr("class", "node")
-                //.on("mouseover", mouseover)
-                //.on("mouseout", mouseout)
-                .on("mouseenter", (evt, d) => {
-                    path
-                        .attr("display", "none")
-                        .filter(l => l.source.type === d.type || l.target.type === d.type)
-                        .attr("display", "block");
-                })
-                .on("mouseleave", evt => {
-                    path.attr("display", "block");
-                })
-                .on("mousedown", mousedown)
-                //.on('mouseover', handleMouseOver)
-                //.on('mouseout', handleMouseOut)
-                .call(force.drag);
-                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]);
-                console.log(myScale(400)); // Output: 250
-               // var myColorScale = d3.scale.log()
-                   // .domain([min, max])
-                   // .range([ 'skyblue', 'blue', 'darkblue']);
-               /* console.log(myColorScale(87));
-                console.log(myColorScale(91));
-                console.log(myColorScale(91));
-                console.log(myColorScale(95));
-                console.log(myColorScale(419));*/
-                // add the nodes
-            node.append("circle")
-                .attr("r", function(d) {
-                    console.log(d.name);
-                    // Use the count of links for this node to get a scaled radius
-                    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")
-                .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 mouseover() {
-                 const nodeName = d3.select(this).datum().name;
-                 console.log("Hovering over node:", nodeName);
-                 const table = d3.select("body").append("table");
-                 // 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("ch.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]) {
-                             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]);
-                         }
-                     }
-                 });
-             }
-             function mouseout() {
-                 d3.select("table").remove();
-             }*/
-                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);
-                function dragstarted(d) {
-                if (!d3.event.active) simulation.alphaTarget(0.8).restart()
-                d.fx = d.x;
-                d.fy = d.y;
-            }
-            function dragged(d) {
-                d.fx = d3.event.x;
-                d.fy = d3.event.y;
-            }
-            node.on("dblclick", function() {
-                // Code to execute when circle is double-clicked
-                console.log("Circle was double-clicked!");
-            });
-            function mousedown(d) {
-                d3.event.stopPropagation();
-                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');
-// Create the table element inside the container
-                var table = container.append('table')
-                    .attr('class', 'table')
-                    .style('table-layout', 'fixed')
-                d3.selectAll('.table td')
-                    .style('font-size', '12px');
-// Add rows and cells to the ta
-                // 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("ch.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]) {
-                            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]);
-                        }
-                    }
-                });
-            }
-            });
-        </script>
-    </div>
-</div>
-</body>
-</html>