Force directed graph using tabletop.js and shortestpath v2

D3 force directed graph which incorporates the following:

tabletop.js (https://github.com/jsoma/tabletop) to pull the node and link data from Google Sheets.
ShortestPathCalculator.js (https://github.com/julianbrowne/dijkstra) to calculate shortest path between the selected node and the others, for highlighting purposes.
d3.legend.js (/zjonsson/3918369).

[legend test 6]

<!DOCTYPE html>

<html>
<meta charset="utf-8">
<title>FSD life events</title>
<style>

body {
  font-family: sans-serif;
}

.link {
  stroke: #000;
  stroke-opacity: 1;
}

.label-shadow {
  pointer-events: none;
  stroke: White;
    stroke-width: 2px;
	stroke-opacity: 0.9;
  font: 10px sans-serif;
}

.label-text {
  pointer-events: none;
  fill: Black;
  font: 10px sans-serif;
}

.label-hidden {
	pointer-events: none;
  stroke-opacity: 0;
  fill-opacity: 0;
  font: 10px sans-serif;
}

.label-selected {
	pointer-events: none;
}

.label-shadow-selected {
  pointer-events: none;
  stroke: White;
}

.legend rect {
  fill:white;
  stroke:black;
  opacity:0.8;}

</style>
<body>
<h1>FSD life events v2</h1>

</body>

//visualisation variables
var width = 1800,
    height = 900,
	radius = 7,
	centreX = width/2,
	centreY = height/2
	newCentreNode = "",
	graph = {"nodes" : [], "links" : [] }
	var color = d3.scale.category20();
	
//data source variables
var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1W-4VOXz4VBYIthILhiMmVm21fvkb3I03cfhdfyiPQIY/pubhtml',
	linksData,
	nodesData;
	loadedLinks = false;
	loadedNodes = false;

//create the SVG for the force graph
var svg = d3.select("#viz").append("svg")
    .attr("width", width)
    .attr("height", height);
	
svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .style("stroke", "gray")
	.style("fill", "#fff");
	
//set up force variables	
var force = d3.layout.force()
	.charge(-150)
    .gravity(0)
	.alpha(.5)
    .size([width, height])
	.linkDistance(30)
	.linkStrength(0.5);
	
//load data using Tabletop
function getNodeData() {
	nodesData = Tabletop.init( 	{ 	key: public_spreadsheet_url,
						wanted: ["nodes"],
						callback: processNodesData,
						simpleSheet: true
                    } );					
}

function getLinkData() {
    linksData = Tabletop.init( 	{ 	key: public_spreadsheet_url,
						wanted: ["links"],
						callback: processLinksData,
						simpleSheet: true
                    } );
}

//process the data from Google Sheets into format for D3 graphs
function processNodesData(data) {	
	var i;
	for(i = 0; i < data.length; i++) {
		if (data[i]["weight"] == 0 ) {
			
			//do nothing
		} else {
			graph.nodes.push({ "name": data[i]["name"], "group": data[i]["group"], "distancetocentre": 1, "centre": false, "fixed": false });
		};
	};
	loadedNodes = true;
	drawGraphIfComplete();
}

loadedLinks = true;
	drawGraphIfComplete();
}

function drawGraphIfComplete() {
	console.log(loadedNodes + " " + loadedLinks);
	if (loadedNodes && loadedLinks) {
		console.log("complete");
		drawGraph();
	};
}

// draw force directed graph
function drawGraph() {
	
	force.nodes(graph.nodes);
	force.links(graph.links);
	force.start();
	
	//https://stackoverflow.com/questions/12924227/how-to-check-d3-js-force-graph-for-nodes-with-no-links-and-remove-them?rq=1
	//force.nodes().filter(function(d){d.weight==0}).exit().remove();
	
	
	
	var sp = new ShortestPathCalculator(graph.nodes, graph.links);
	
	//fill the drop down menu with names, in alphabetical order
	var select = d3.select("select");
	var selectValues = [];
	graph.nodes.forEach(function (d) { selectValues.push(d.name) ;} ) ;
	selectValues.sort();
	
	select.selectAll("option")
		.data(selectValues)
      .enter()
        .append("option")
        .attr("value", function (d) { return d; })
        .text(function (d) { return d; });
	
	
	// change the centre node when a new value is selected from the menu
    select.on("change", function(d) {
		var selectedNode = d3.select(this).property("value");
        //alert(selectedNode);
		changeCentreNode(selectedNode);
    });
	//////drop down menu
	
	
	var link = svg.selectAll(".link")
		.data(graph.links)
     .enter().append("line")
		.attr("class", "link")
		.style("stroke-width", 3)
		.style("stroke-opacity", 0.3)
		.style("stroke", "Gray");
	  
	  
	var drag = force.drag()
		.on("dragstart", dragstart); 
	  
	var node = svg.selectAll(".node")
		.data(graph.nodes)
    .enter().append("g")
		.attr("class", "node")
		.call(drag);

var selectedNode;	
	var clickCount = 0;
	var singleClickTimer;
	var mouseClick = function(d) {
		
		if (d3.event.defaultPrevented) {  //if dragging then assume single click and set fixed to be true 
			return;
		} else {
			clickCount++;
			
			if (clickCount === 2) { //double click
				clearTimeout(singleClickTimer);
				clickCount = 0;
				
				if (selectedNode === d.name) { 
				
					selectedNode = "";
					revertStyles();
					
				} else {
				
					selectedNode = d.name;
					console.log("double click: " + selectedNode);
					changeCentreNode(selectedNode);
				};
			
			} else if (clickCount === 1) { //single click
				singleClickTimer = setTimeout(function() {
					clickCount = 0;
					
					if (d.fixed == 1) {
						d.fixed = 0;
					} else {
						//d3.select(this).classed("fixed", true);
						d.fixed = 1;
					};
				
				}, 250);
			} ; 
		};
	};
	  
  var circles = node.append("circle")
		.attr("class", "circles")
		.attr("r", function (d) {   //size the circles based on the number of links
			var noOfLinks = 5;
			link.each( function (e) {
				if (e.source.name === d.name) {
					noOfLinks += 0.5;
				};
				if (e.target.name === d.name) {
					noOfLinks += 0.5;
				};
			});
			return noOfLinks;
			})
		.style("fill", function(d) { return color(d.group); })
		.attr("data-legend",function(d) { return d.group})
		.style("opacity", 0.8)
		.on("click", mouseClick);
	
	/*var labelShadows = node.append("text")
			.attr("class", "label-shadow")
		  .attr("text-anchor", "middle")
		  .attr("dy", ".35em")
		  .text(function(d) { return d.name });*/
		  
	var labels = node.append("text")
		.attr("class", function (d) {
     
      			return (d.group === "Life Events") ? "label-text" : "label-hidden";
    			    
    		})
		  .attr("text-anchor", "middle")
		  .attr("dy", ".35em")
		  .style("fill", "Black")
		  .text(function(d) { return d.name });
		  
	legend = svg.append("g")
		.attr("class","legend")
		.attr("transform","translate(50,30)")
		.style("font-size","12px")
		.call(d3.legend);
		
	svg.selectAll(".legend-items").selectAll("text")
		//.append("a");
		.on("click", function() { console.log("hello");} );

var legendClick = function (d) {
		console.log("clicked legend");
		console.log(d.value);
	};

force.on("tick", function() {
    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; });

node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
			.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
			
					node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });

};
	
	
	function dragstart(d) {
	  d3.select(this).classed("fixed", d.fixed = true);
	};
	
			
}

getNodeData();
getLinkData();

</script>