Seetha's picture
Update index.html
d361bd3
raw
history blame
34.9 kB
<!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>