<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
	<title>My D3 Practice page </title>
<link rel="stylesheet" href="style.css"> 	
</head>
	
<body>
  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<!--<script src="directedGraph.js"></script>-->
<script src="directedGraphWithMovement.js"></script>
</body>
</html>
// Code goes here

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.node {
  cursor: move;
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;
}
.node.fixed {
  fill: #f00;
}

.node text {
    pointer-events: none;
    font: 12px sans-serif;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}


.tftextinput{
	margin: 0;
	#padding: 5px 0px 0px 10px ;
	right:0px;
	font-family: Arial, Helvetica, sans-serif, FontAwesome;
	font-size:14px;
	border:1px solid #0076a3; 
	border-right:1px solid #0076a3;
	border-top-left-radius: 5px 5px;
	border-bottom-left-radius: 5px 5px;
	border-bottom-right-radius: 5px 5px;
	border-top-right-radius: 5px 5px;
	float: right;
	position:fixed;
}

::-webkit-input-placeholder {
   opacity: 0.2 ;
}

:-moz-placeholder { /* Firefox 18- */
   opacity: 0.2 ;
}

::-moz-placeholder {  /* Firefox 19+ */
	opacity: 0.2 ;
}

:-ms-input-placeholder {  
   opacity: 0.2 ;
}

//WINDOW SETUP 
var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
			.attr("width",width)
			.attr("height",height)
			.append("g");

var link = svg.selectAll("path"),
	node = svg.selectAll("g.gnode");
	
var force = d3.layout.force()
    .size([width, height])
    .linkDistance(150)
	.friction(0.01)
    .charge(-1000);
    //.on("tick", tick);
	
//READ JSON FILE	
d3.json("sampleInput.json", function(error, data) {
	if (error) throw error;
	
	var nodes = {};
	var n = data.nodes.length;
	
	force.nodes(data.nodes).links(data.links);
		
	// Initialize the positions deterministically, for better results.
    data.nodes.forEach(function(d, i) { d.x = d.y = width / n * i; });
	
	// Run the layout a fixed number of times.
    // The ideal number of times scales with graph complexity.
    // Of course, don't run too long—you'll hang the page!
    force.start();
    for (var i = n; i > 0; --i) 
		force.tick();
    force.stop();
	
	// Center the nodes in the middle.
    var ox = 0, oy = 0;
    data.nodes.forEach(function(d) { 
							ox += d.x, 
							oy += d.y; 
						});
    ox = ox / n - width / 2, 
	oy = oy / n - height / 2;
    data.nodes.forEach(function(d) { 
							d.x -= ox, 
							d.y -= oy; 
						});
	
	
	// Compute the distinct nodes from the links.
	/*data.links.forEach(function(d){
		d.source = nodes[d.source] || (nodes[d.source] = {name:d.source});
		d.target = nodes[d.target] || (nodes[d.target] = {name:d.target});
	});*/
	
	svg.append("defs").append("marker")
		.attr("id", "arrowhead")
		.attr("refX", 14) /*must be smarter way to calculate shift*/
		.attr("refY", 1)
		.attr("markerWidth", 6)
		.attr("markerHeight", 4)
		.attr("orient", "auto")
		.append("path")
		.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
	

		
	link = link.data(data.links)
			.enter().append("path")
			.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; })
			.attr("d",linkArc)	
			.attr("marker-end", "url(#arrowhead)");
	
	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;
	}
	node = 	node.data(data.nodes)
			.enter().append("g")
			.classed("gnode",true);
			
	
	node.append("circle")
		.attr("class", "node")
		//.attr("cx", function(d) { return d.x; })
        //.attr("cy", function(d) { return d.y; })
		.attr("r",12)
		.call(force.drag);


	node.append("text")
		.attr("x",15)
		.attr("y",".21em")
		.text(function (d) {
			return d.name;
		});
		
	node.append("text")
		.attr("x",15)
		.attr("y","1em")
		
		.text(function (d) {
			return d.details;
		});
		
	node.attr("transform", function(d) { 
        return 'translate(' + [d.x, d.y] + ')'; 
    });  
});

/*	
function tick() {
	link.attr("d",linkArc)	
	node.attr("transform", function(d) { 
        return 'translate(' + [d.x, d.y] + ')'; 
    });  
}

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;
}
*/
{
"nodes": [
    {"name": "Task 1", "details": "A"},
    {"name": "Task 2", "details": "Task Discription here" },
    {"name": "Task 3", "details": "Task Discription here"},
	{"name": "Task 4", "details": "Task Discription here"},
	{"name": "Task 5", "details": "Task Discription here"},
	{"name": "Task 6", "details": "Task Discription here"}
  ],
"links": [
    {"source":  "Task 6", "target": "Task 2","type": 0},
    {"source":  "Task 2", "target": "Task 1","type": 0},
    {"source":  "Task 5", "target": "Task 2","type": 0},
	{"source":  "Task 4", "target": "Task 5","type": 0},
	{"source":	"Task 3", "target": "Task 5","type": 0}
  ]
}
//WINDOW SETUP 
var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
			.attr("width",width)
			.attr("height",height)
			.append("g");

var link = svg.selectAll("path"),
	node = svg.selectAll("g.gnode");
	
var force = d3.layout.force()
    .size([width, height])
    .linkDistance(150)
	.friction(0.01)
    .charge(-1000)
    .on("tick", tick);

var nodes = {};
var links = [];
var pathtype = [];  	


//READ JSON FILE	
d3.json("sampleInput.json", function(error, graph) {
	if (error) throw error;

	links = graph.links;
	
	// Compute the distinct nodes from the links.
	links.forEach(function(d){
		d.source = nodes[d.source] || (nodes[d.source] = {name:d.source});
		d.target = nodes[d.target] || (nodes[d.target] = {name:d.target});
	});
	
	svg.append("defs").append("marker")
		.attr("id", "arrowhead")
		.attr("refX", 14) /*must be smarter way to calculate shift*/
		.attr("refY", 1)
		.attr("markerWidth", 6)
		.attr("markerHeight", 4)
		.attr("orient", "auto")
		.append("path")
		.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
	
	force.nodes(d3.values(nodes))
		.links(links)
		.start();
	
	
	link = link.data(force.links())
			.enter().append("path")
			.attr("class","link")
			.attr("marker-end", "url(#arrowhead)");
	
	node = node.data(force.nodes())
			.enter().append("g")
			.classed("gnode",true);
			
	
	node.append("circle")
		.attr("class", "node")
		.attr("r",12);
		//.call(force.drag);


	node.append("text")
		.attr("x",15)
		.attr("y",".31em")
		.text(function (d) {
			return d.name;
		});
		
	node.append("text")
		.attr("x",15)
		.attr("y",".71em")
		.text(function (d) {
			return d.details;
		});
});
	
function tick() {
/*	  
  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; });
*/
	link.attr("d",linkArc)	
	node.attr("transform", function(d) { 
        return 'translate(' + [d.x, d.y] + ')'; 
    });  
}

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;
}