Insight gained: You can easily recognize the connected states and how they are divided into regions by encoding colors.
xxxxxxxxxx
<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>
<script>
var width = 960, height = 500;
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>