Draggable force network diagram

forked from jadiehm's block: Draggable force network diagram

<!doctype html>
<html lang='en-GB'>
<head></head>
<style>
	p {
		font-family: sans-serif;
		font-size: 14px;
	}
	/*template styles*/
	.gia-chart-wrapper {
		max-width: 620px;
		margin: 0 auto;
	}
	/*network styles*/
	.links {
	  	stroke: #4bc6df;
	  	stroke-opacity: 0.2;
	}
	.imp-links {
	  	stroke: #005689;
	  	stroke-opacity: 0.5;
	}
	.nodes circle {
	  	stroke: #fff;
	  	stroke-width: 1.5px;
	}
	.thiel-label {
		font-family: sans-serif;
		fill: #ffffff;
		font-weight: 700;
		font-size: 16px;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.big-label {
		font-family: sans-serif;
		fill: #333333;
		font-weight: 700;
		font-size: 14px;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
	.small-label {
		font-family: sans-serif;
		fill: #333333;
		font-size: 12px;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
</style>

var widther = d3.select(".gia-chart").node().clientWidth;

var width = widther - margin.left - margin.right,
		    height = 620 - margin.top - margin.bottom;

//Appends the svg to the chart-container div
		var svg = d3.select(".gia-chart").append("svg")
		  	.attr("width", width + margin.left + margin.right)
		  	.attr("height", height + margin.top + margin.bottom)
		  	.append("g")
		  	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Sets color scale  	
		var color = d3.scaleOrdinal(["#005689", "#4bc6df", "#dcdcdc"]);

//Sets force between bubbles
		var simulation = d3.forceSimulation()
		  	.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100))
		  	.force("charge", d3.forceManyBody().strength(-360))
		  	.force("collide", d3.forceCollide().radius(function(d) { return (d.connections*2) + 30; }).iterations(2))
		  	.force("center", d3.forceCenter(width / 2, height / 2));

//Loads the data
		d3.json("links.json", function(error, graph) {
			if (error) throw error;

//Establishes link  
			var link = svg.append("g")
			    .selectAll("line")
			    .data(graph.links)
			    .enter().append("line")
			    .attr("stroke-width", function(d) { return Math.sqrt(d.value); })
			    .attr("class", function(d) {
			    	if(d.value === 1) {
			        	return "links";
			      	}
			      	else {
			        	return "imp-links";
			      	}
			    });

//Establishes bubble  
			var node = svg.append("g")
			    .attr("class", "nodes")
			    .selectAll("circle")
			    .data(graph.nodes)
			    .enter().append("circle")
			    .attr("r", function(d) { return d.connections * 2; })
			    .attr("fill", function(d) { return color(d.group); })
			    .call(d3.drag()
			    .on("start", dragstarted)
			    .on("drag", dragged)
			    .on("end", dragended));

simulation
			    .nodes(graph.nodes)
			    .on("tick", ticked);

simulation.force("link")
			    .links(graph.links);

//Places and sizes elements    
			function ticked() {
			    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(d.connections, Math.min((width - 20) - d.connections, d.x)); })
			      	.attr("cy", function(d) { return d.y = Math.max(d.connections, Math.min((height - 20) - d.connections, d.y)); });

node_text
			      	.attr("x", function(d) { return d.x + 20; })
			      	.attr("y", function(d) { return d.y - 30; });  
			}
		});

//Drag events
		function dragstarted(d) {
			if (!d3.event.active) simulation.alphaTarget(0.3).restart();
		  	d.fx = d.x;
		  	d.fy = d.y;
		}

function dragged(d) {
		  	d.fx = d3.event.x;
		  	d.fy = d3.event.y;
		}

function dragended(d) {
		  	if (!d3.event.active) simulation.alphaTarget(0);
		  	d.fx = null;
		  	d.fy = null;
		}
	</script>
</body>
</html>

https://d3js.org/d3.v4.min.js