Spaces:
Sleeping
Sleeping
| <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> | |