Cacher is the code snippet organizer for pro developers

<link href="https://www.cs.mun.ca/~h65ped/Public/country%20data%20for%20force%20directed%20graph/flags.css" rel="stylesheet" />

body {
	background-color: blue;
}

h1 {
	text-align: center;
}

.flag {
	position: absolute;
}

.flagbox {
	position: absolute;
}

#tooltip {
	display: none;
	padding: 3px;
	border-radius: 2px;
	box-shadow: -2px 2px 10px black;
	z-index: 1;
	position: absolute;
	background-color: white;
}

.graph {
	width: 1000px;
	height: 800px;
	margin: auto;
	box-shadow: -3px 3px 20px black;
	background-color: black;
}

.link {
	stroke-width: 1px;
	stroke: #CCC;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>

const animationStep = 200;
const nodeRadius = 4;
const forceCharge = -100;
const linkDistance = 50;

var graph = d3.select('.graph')

let width = parseInt(graph.style("width"));
let height = parseInt(graph.style("height"));

var svg = graph.append('svg')
	.attr("width", width)
	.attr("height", height);

var tooltip = d3.select("#tooltip")

let request = new XMLHttpRequest();
request.addEventListener("load", loaded);

function loaded() {
	const data = JSON.parse(request.responseText);

	var force = d3.layout.force()
		.size([width, height])
		.nodes(data.nodes)
		.links(data.links)
		.linkDistance(linkDistance)
		.charge(forceCharge);

	var link = svg.selectAll('.link')
		.data(data.links)
		.enter()
		.append('line')
		.attr('class', 'link');

	var node = graph.select('.flagbox').selectAll('.node')
		.data(data.nodes)
		.enter()
		.append('img')
		.attr('class', d => 'flag flag-' + d.code)
		.on("mouseover", (d) => {
			tooltip.style("display", "block");
			tooltip.html(d.country)
				.style("left", d3.event.pageX + "px")
				.style("top", (d3.event.pageY - 28) + "px");
		})
		.on("mouseout", (d) => {
			tooltip.style("display", "none");
		})
		.call(force.drag);
	force.on('tick', function() {
	//	node.transition().ease('linear').duration(animationStep)
		node.style('left', d => (d.x - 8) + "px")
			.style('top', d => (d.y - 5) + "px");
		/*
		node.attr('r', nodeRadius)
			.attr('cx', d => d.x)
			.attr('cy', d => d.y);*/

		//link.transition().ease('linear').duration(animationStep)
			link.attr('x1', d => d.source.x)
			.attr('x2', d => d.target.x)
			.attr('y1', d => d.source.y)
			.attr('y2', d => d.target.y);

	//	force.stop();

	//	setTimeout( () => force.start(),
	//					 animationStep);
	});

	force.start();
};
/*).error( function(err) {
	console.log("Couldn't load country list: error " + err);
})*/

request.open('GET', "https://www.cs.mun.ca/~h65ped/Public/country%20data%20for%20force%20directed%20graph/countries.json", true);
request.send(null);

body
	h1 Force Directed Graph of State Contiguity
	.graph
		.flagbox
	#tooltip