VI7 Matrix View

Insight gained: you can see the state adjacency as well as find the path distance between each node(state).

<html>
<head>
<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<style>
html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}
.background {
  fill: #eee;
}

line {
  stroke: #fff;
}

text.active {
  fill: red;
}
aside {
	text-align: right;
}
</style>
</head>
<body>

<aside style="margin-top:10px;">
<p>Order: <select id="order">
  <option value="name">Alphabetical</option>
  <option value="count">Number of Connections</option>
  <option value="group">Region</option>
</select>
	<script>
		var margin = {
			top : 30,
			right : 0,
			bottom : 5,
			left : 30
		}, width = 400, height = 400;

var x = d3.scale.ordinal().rangeBands([ 0, width ]), z = d3.scale
				.linear().domain([ 0, 4 ]).clamp(true), c = d3.scale
				.category10().domain(d3.range(10));

var svg = d3.select("body").append("svg").attr("width",
				width + margin.left + margin.right).attr("height",
				height + margin.top + margin.bottom).style("margin-left",
				-margin.left + "px").append("g").attr("transform",
				"translate(" + margin.left + "," + margin.top + ")");

d3
				.json(
						"myData.json",
						function(data) {
							var matrix = [], nodes = data.nodes, n = nodes.length;

// Compute index per node.
							nodes.forEach(function(node, i) {
								node.index = i;
								node.count = 0;
								matrix[i] = d3.range(n).map(function(j) {
									return {
										x : j,
										y : i,
										z : 0
									};
								});
							});

// Convert links to matrix; count character occurrences.
							data.links
									.forEach(function(link) {
										matrix[link.source][link.target].z += 10;
										matrix[link.target][link.source].z += 10;
										matrix[link.source][link.source].z += 10;
										matrix[link.target][link.target].z += 10;
										nodes[link.source].count += 1;
										nodes[link.target].count += 1;
									});

// Precompute the orders.
							var orders = {
								name : d3.range(n).sort(
										function(a, b) {
											return d3.ascending(nodes[a].name,
													nodes[b].name);
										}),
								count : d3.range(n).sort(function(a, b) {
									return nodes[b].count - nodes[a].count;
								}),
								group : d3.range(n).sort(function(a, b) {
									return nodes[b].group - nodes[a].group;
								})
							};

// The default sort order.
							x.domain(orders.name);

svg.append("rect").attr("class", "background")
									.attr("width", width)
									.attr("height", height);

var row = svg.selectAll(".row").data(matrix)
									.enter().append("g").attr("class", "row")
									.attr("transform", function(d, i) {
										return "translate(0," + x(i) + ")";
									}).each(row);

row.append("line").attr("x2", width);

row.append("text").attr("x", -6).attr("y",
									x.rangeBand() / 2).attr("dy", ".32em")
									.style("font-size", "8px")
									.attr("text-anchor", "end").text(
											function(d, i) {
												return nodes[i].abb;
											});

var column = svg.selectAll(".column").data(matrix)
									.enter().append("g")
									.attr("class", "column").attr(
											"transform",
											function(d, i) {
												return "translate(" + x(i)
														+ ")rotate(-90)";
											});

column.append("line").attr("x1", -width);

column.append("text").attr("x", 6).attr("y",
									x.rangeBand() / 2).attr("dy", ".32em")
									.style("font-size", "8px")
									.attr("text-anchor", "start").text(
											function(d, i) {
												return nodes[i].abb;
											});

function mouseout() {
								d3.selectAll("text").classed("active", false);
							}

d3.select("#order").on("change", function() {
								clearTimeout(timeout);
								order(this.value);
							});

function order(value) {
								x.domain(orders[value]);

var t = svg.transition().duration(2500);

t.selectAll(".row").delay(function(d, i) {
									return x(i) * 4;
								}).attr("transform", function(d, i) {
									return "translate(0," + x(i) + ")";
								}).selectAll(".cell").delay(function(d) {
									return x(d.x) * 4;
								}).attr("x", function(d) {
									return x(d.x);
								});

t.selectAll(".column").delay(function(d, i) {
									return x(i) * 4;
								}).attr(
										"transform",
										function(d, i) {
											return "translate(" + x(i)
													+ ")rotate(-90)";
										});
							}

var timeout = setTimeout(function() {
								order("group");
								d3.select("#order")
										.property("selectedIndex", 2).node()
										.focus();
							}, 5000);
						});
	</script>
</body>
</html>