###Node-link diagram
1.We can know to how many states a state is connected to.
2.Generally we find states with most links (Missouri)in the center and the ones with less links at the corner(Maine).
3.Coloring based on different regions makes each state easy to differentiate.
xxxxxxxxxx<meta charset="utf-8"><style>.node { stroke: #fff; stroke-width: 1.5px;}.link { stroke: #999; stroke-opacity: .6;}</style><body><script src="//d3js.org/d3.v3.min.js"></script><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("body").append("svg") .attr("width", width) .attr("height", height);d3.json("regions.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", 8) .style("fill", function(d) { return color(d.region); }) .call(force.drag); node.append("title") .text(function(d) { return 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> https://d3js.org/d3.v3.min.js