VI7 Node-link diagram

Insight gained: You can easily recognize the connected states and how they are divided into regions by encoding colors.

<html>
<head>
<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<style>
.node {
	stroke: #fff;
	stroke-width: 1.5px;
}

.link {
	stroke: #999;
	stroke-opacity: .6;
}
</style>
</head>
<body>
	<div class="chart1"></div>
	<div class="chart2"></div>

var color = d3.scale.category20();

var force = d3.layout.force().charge(-120).linkDistance(30).size(
				[ width, height ]);

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

d3.json("myData.json", function(error, graph) {
			if (error)
				throw error;

force.nodes(graph.nodes).links(graph.links).start();

var link = svg.selectAll(".link").data(graph.links).enter().append(
					"line").attr("class", "link").style("stroke-width",
					function(d) {
						return Math.sqrt(d.value);
					});

var node = svg.selectAll(".node").data(graph.nodes).enter().append(
					"circle").attr("class", "node").attr("r", 5).style("fill",
					function(d) {
						return color(d.group);
					}).call(force.drag);

node.append("title").text(function(d) {
				return d.abb + ": " + d.name;
			});

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;
				}).attr("cy", function(d) {
					return d.y;
				});
			});
		});
	</script>
</body>
</html>