Spaces:

Seetha
/

IMA-pipeline-streamlit

Sleeping

App Files Files Community

Seetha commited on Jun 1, 2023

Commit

0e73338

1 Parent(s): 51cb4ac

Update index.html

Browse files

Files changed (1) hide show

index.html +967 -470

index.html CHANGED Viewed

@@ -1,540 +1,1037 @@
 <!DOCTYPE html>
-<meta charset="UTF-8">
 <head>
-    <link rel = "stylesheet" href = "/app/ima-pipeline/assets/css/tree.css">
-    <link rel = "stylesheet" href = "/app/ima-pipeline/assets/css/div.css">
-    <link rel = "stylesheet" href = "/app/ima-pipeline/assets/css/side.css">
     <style>
-        body {background-color:mintcream;}
     </style>
-</head>
-<body>
-<center>
-    <h1 style="color:black;">Causal text to Knowledge graph Taxonomy</h1>
-</center>
-<div class = "container">
-<!-- load the d3.js library -->
-<div class = "tree">
-<script src="https://d3js.org/d3.v4.min.js"></script>
-<script>
-    var treeData =
-        {"name": "Performance or Not", "children": [{"name": "Performance (P)", "children": [{"name": "Investors (INV)", "children": [{"name": "Accounting-based performance (INV1)"}, {"name": "Stock market-based performance (INV2)"}, {"name": "Survey-based performance (INV3)"}, {"name": "Growth-based performance (INV4)"}]}, {"name": "Customers (CUS)", "children": [{"name": "Customer commitment (CUS1)"}, {"name": "Customer satisfaction (CUS2)"}, {"name": "Brand recognition and reputation (CUS3)"}, {"name": "Product & service quality (CUS4)"}]}, {"name": "Employees (EMP)", "children": [{"name": "Employee commitment (EMP1)"}, {"name": "Employee satisfaction (EMP2)"}, {"name": "Employee compensation, protection and benefits (EMP3)"}, {"name": "Employee health (EMP4)"}]}, {"name": "Society (SOC)", "children": [{"name": "Symbolic socially responsible efforts (SOC1)"}, {"name": "Substantive social impact and performance (SOC2)"}, {"name": "Symbolic environmentally responsible efforts (SOC3)"}, {"name": "Substantive environmental impact and performance (SOC4)"}, {"name": "Uncategorized or combined (SOC5)"}]}, {"name": "Unclassified", "children":""}]}, {"name": "Non-performance", }]};
-    // Set the dimensions and margins of the diagram
-    var margin = {top: 20, right: 90, bottom: 30, left: 116},
-        width = 850- margin.left - margin.right,
-        height = 800 - margin.top - margin.bottom;
-    // append the svg object to the body of the page
-    // appends a 'group' element to 'svg'
-    // moves the 'group' element to the top left margin
-    var svg2 = d3.select("body").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 + ")");
-    var i = 0,
-        duration = 750,
-        root;
-    // declares a tree layout and assigns the size
-    var treemap = d3.tree().size([height, width]);
-    // Assigns parent, children, height, depth
-    root = d3.hierarchy(treeData, function(d) { return d.children; });
-    root.x0 = height / 2;
-    root.y0 = 0;
-    // Collapse after the second level
-    root.children.forEach(collapse);
-    update(root);
-    // Collapse the node and all it's children
-    function collapse(d) {
-        if(d.children) {
-            d._children = d.children
-            d._children.forEach(collapse)
-            d.children = null
         }
-    }
-    function update(source) {
-        // Assigns the x and y position for the nodes
-        var treeData = treemap(root);
-        // Compute the new tree layout.
-        var nodes = treeData.descendants(),
-            links = treeData.descendants().slice(1);
-        // Normalize for fixed-depth.
-        nodes.forEach(function(d){ d.y = d.depth * 130});
-        // ****************** Nodes section ***************************
-        // Update the nodes...
-        var node = svg2.selectAll('g.node')
-            .data(nodes, function(d) {return d.id || (d.id = ++i); });
-        // Enter any new modes 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);
-        // Add Circle for the nodes
-        nodeEnter.append('circle')
-            .attr('class', 'node')
-            .attr('r', 1e-6)
-            .style("fill", function(d) {
-                if(d.name == "Non-performance"){
-                    return d._children ? "red" : "#fff";
-                }else{
-                    return d._children ? "blue" : "#fff";
                 }
-            });
-        // Add labels for the nodes
-        nodeEnter.append('text')
-            .attr("dy", ".40em")
-            .attr("x", function(d) {
-                return d.children || d._children ? -13 : 13;
-            })
-            .attr("text-anchor", function(d) {
-                return d.children || d._children ? "end" : "start";
-            })
-            .text(function(d) { return d.data.name; });
-        // UPDATE
-        var nodeUpdate = nodeEnter.merge(node);
-        // Transition to the proper position for the node
-        nodeUpdate.transition()
-            .duration(duration)
-            .attr("transform", function(d) {
-                return "translate(" + d.y + "," + d.x + ")";
             });
-        // Update the node attributes and style
-        nodeUpdate.select('circle.node')
-            .attr('r', 8)
-            .style("fill", function(d) {
-                if(d.name == "Non-performance"){
-                    return d._children ? "red" : "#fff";
                 }else{
-                    return d._children ? "blue" : "#fff";
                 }
             })
-            .attr('cursor', 'pointer');
-        // Remove any exiting nodes
-        var nodeExit = node.exit().transition()
-            .duration(duration)
-            .attr("transform", function(d) {
-                return "translate(" + source.y + "," + source.x + ")";
-            })
-            .remove();
-        // On exit reduce the node circles size to 0
-        nodeExit.select('circle')
-            .attr('r', 1e-6);
-        // On exit reduce the opacity of text labels
-        nodeExit.select('text')
-            .style('fill-opacity', 1e-6);
-        // ****************** links section ***************************
-        // Update the links...
-        var link = svg2.selectAll('path.link')
-            .data(links, function(d) { return d.id; });
-        // Enter any new links at the parent's previous position.
-        var linkEnter = link.enter().insert('path', "g")
-            .attr("class", "link")
-            .attr('d', function(d){
-                var o = {x: source.x0, y: source.y0}
-                return diagonal(o, o)
-            });
-        // UPDATE
-        var linkUpdate = linkEnter.merge(link);
-        // Transition back to the parent element position
-        linkUpdate.transition()
-            .duration(duration)
-            .attr('d', function(d){ return diagonal(d, d.parent) });
-        // Remove any exiting links
-        var linkExit = link.exit().transition()
-            .duration(duration)
-            .attr('d', function(d) {
-                var o = {x: source.x, y: source.y}
-                return diagonal(o, o)
-            })
-            .remove();
-        // Store the old positions for transition.
-        nodes.forEach(function(d){
-            d.x0 = d.x;
-            d.y0 = d.y;
-        });
-        // Creates a curved (diagonal) path from parent to the child nodes
-        function diagonal(s, d) {
-            path = `M ${s.y} ${s.x}
-            C ${(s.y + d.y) / 2} ${s.x},
-              ${(s.y + d.y) / 2} ${d.x},
-              ${d.y} ${d.x}`
-            return path
-        }
-        // 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 class = "graph">
-<script src="//d3js.org/d3.v3.min.js"></script>
-<script src="http://d3js.org/d3-selection-multi.v1.js"></script>
-<script>
-    var links = [
-        {source: "Non Performance", target: "Customers", type: "49"},
-        {source: "Non Performance", target: "Investors", type: "54"},
-        {source: "Non Performance", target: "Society", type: "49"},
-        {source: "Non Performance", target: "Employee", type: "51"},
-        {source: "Employee", target: "Investors", type: "5"},
-        {source: "Employee", target: "Non Performance", type: "167"},
-        {source: "Employee", target: "Society", type: "0"},
-        {source: "Employee", target: "Customers", type: "0"},
-       // {source: "Employee", target: "Employee", type: "2"},
-        {source: "Investors", target: "Employee", type: "3"},
-        {source: "Investors", target: "Society", type: "1"},
-        {source: "Investors", target: "Customers", type: "1"},
-        {source: "Investors", target: "Non Performance", type: "168"},
-        {source: "Society", target: "Investors", type: "5"},
-        {source: "Society", target: "Employee", type: "2"},
-        {source: "Society", target: "Customers", type: "0"},
-        {source: "Society", target: "Non Performance", type: "167"},
-        {source: "Customers", target: "Investors", type: "0"},
-        {source: "Customers", target: "Employee", type: "2"},
-        {source: "Customers", target: "Society", type: "0"},
-        {source: "Customers", target: "Non Performance", type: "167"},
-        //{source: "Investors", target: "Investors", type: "6"},
-        // {source: "Customers", target: "Customers", type: "0"},
-        //{source: "Society", target: "Society", type: "0"},
-        //{source: "Non Performance", target: "Non Performance", type: "216"}
-    ];
-    // 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});
-    });
-    var width = 550,
-        height = 850;
-    var force = d3.layout.force()
-        .nodes(d3.values(nodes))
-        .links(links)
-        .size([width, height])
-        .linkDistance(400)
-        .charge(-3000)
-        .on("tick", tick)
-        .start();
-    var svg = d3.select("body").append("svg")
-        .attr("width", width)
-        .attr("height", height)
-        .call(d3.behavior.zoom().on("zoom", function () {
-            svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
-        }))
-        .append("g");
-    svg.append("svg:defs").selectAll("marker")
-        .data(["49", "54", "49","51","5","167", "0", "0", "2","3","1","1","168","5","2","0","167","0","2","0","167","2","6","0","0","216"])
-        .enter().append("svg:marker")
-        .attr("id", String)
-        .attr("viewBox", "0 -5 10 10")
-        .attr("refX", 24)
-        .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 = svg.append("svg:g").selectAll("path")
-        .data(force.links())
-        .enter().append("svg:path")
-        .attr("class", function(d) { return "link " + d.type; })
-        .attr("id",function(d,i) { return "linkId_" + i; })
-        .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
-    // var node = svg.append("g").selectAll("node")
-    // .data(force.nodes())
-    // .enter().append("circle")
-    // .attr("r", 10)
-    // .call(force.drag);
-    var selflink = svg.append("svg:g").selectAll(".selflink")
-        .data(force.links())
-        .enter().append("path")
-        .attr("class","link")
-        .attr("class", function(d) { return "link " + d.type; })
-        .attr("id",function(d,i) { return "linkId_" + i; })
-        .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
-    var node = svg.selectAll(".node")
-        .data(force.nodes())
-        .enter().append("g")
-        .attr("class", "node")
-        .on("click", click)
-        .on("dblclick", dblclick)
-        .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");
-        })
-        .call(force.drag);
-    // add the nodes
-    node.append("circle")
-        .attr("r", 13)
-        .style("fill", function(d){
-            if(d.name == "Non Performance"){
-                return "red";
-            }else{
-                return "blue";
             }
-        })
-        .style("stroke", "black")
-    var text = svg.append("g").selectAll("text")
-        .data(force.nodes())
-        .enter().append("text")
-        .attr("x", 8)
-        .attr("y", ".31em")
-        .text(function(d) { return d.name; });
-    var linktext = svg.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.type;
-        });
-    // 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 + ")"; })
-        selflink.attr("d", function(d) {
-            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 = 0;
-                // 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 click() {
-        d3.select(this).select("text").transition()
-            .duration(750)
-            .attr("x", 22)
-            .style("fill", "steelblue")
-            .style("stroke", "lightsteelblue")
-            .style("stroke-width", ".5px")
-            .style("font", "20px sans-serif");
-        d3.select(this).select("circle").transition()
-            .duration(750)
-            .attr("r", 16)
-            .style("fill", "lightsteelblue");
-    }
-    // action to take on mouse double click
-    function dblclick() {
-        d3.select(this).select("circle").transition()
-            .duration(750)
-            .attr("r", 6)
-            .style("fill", "#ccc");
-        d3.select(this).select("text").transition()
-            .duration(750)
-            .attr("x", 12)
-            .style("stroke", "none")
-            .style("fill", "black")
-            .style("stroke", "none")
-            .style("font", "10px sans-serif");
-    }
-    function mouseover() {
-        d3.select(this).select("circle").transition()
-            .duration(750)
-            .attr("r", 25)
-            .style("stroke-opacity", 1.0);
-    }
-    function mouseout() {
-        d3.select(this).select("circle").transition()
-            .duration(750)
-            .attr("r", 15);
-    }
-    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;
-    }
-</script>
-</div>
 </div>
 </body>

 <!DOCTYPE html>
+<html>
 <head>
+    <link rel = "stylesheet" href = "css1/tree.css">
+    <link rel = "stylesheet" href = "css1/div.css">
+    <link rel = "stylesheet" href = "css1/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>