Spaces:

Seetha
/

IMA-pipeline-streamlit

Sleeping

App Files Files Community

gseetha04 commited on Jun 1, 2023

Commit

cde25cc

•

1 Parent(s): b4c999d

visualize

Browse files

Files changed (5) hide show

.DS_Store +0 -0
code.html +540 -0
div.css +32 -0
side.css +21 -0
tree.css +15 -0

.DS_Store CHANGED Viewed

Binary files a/.DS_Store and b/.DS_Store differ

code.html ADDED Viewed

	@@ -0,0 +1,540 @@

+<!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>

div.css ADDED Viewed

	@@ -0,0 +1,32 @@

+path.link {
+    fill: none;
+    stroke: #666;
+    stroke-width: 1.5px;
+}
+path.link:hover {stroke: red;stroke-width: 4px}
+path.link.licensing {
+    stroke: green;
+}
+path.link.resolved {
+    stroke-dasharray: 0,2 1;
+}
+circle {
+    fill: #ccc;
+    stroke: #333;
+    stroke-width: 1.5px;
+}
+text {
+    font: 10px sans-serif;
+    pointer-events: none;
+}
+text.shadow {
+    stroke: #fff;
+    stroke-width: 3px;
+    stroke-opacity: .8;
+}

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: #ccc;
+    stroke-width: 2px;
+}