Skip to content

Instantly share code, notes, and snippets.

@manojchandrak

manojchandrak/Readme.md

Last active March 16, 2016 07:44
Show Gist options
  • Save manojchandrak/b62a842b19203eafe46d to your computer and use it in GitHub Desktop.
Save manojchandrak/b62a842b19203eafe46d to your computer and use it in GitHub Desktop.
Download ZIP
Visualization 7. Node-link diagram(Force graph)
Raw
Readme.md

###Node-link diagram

Insights

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.

Raw
index.html
<!DOCTYPE html>
<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>
Raw
regions.json
{
"nodes":[
{"abb":"AL","name":"Alabama","region":"East South Central","group":6},
{"abb":"AR","name":"Arkansas","region":"West South Central","group":7},
{"abb":"AZ","name":"Arizona","region":"Mountain","group":8},
{"abb":"CA","name":"California","region":"Pacific","group":9},
{"abb":"CO","name":"Colorado","region":"Mountain","group":8},
{"abb":"CT","name":"Connecticut","region":"New England","group":1},
{"abb":"DC","name":"DC","region":"South Atlantic","group":5},
{"abb":"DE","name":"Delaware","region":"South Atlantic","group":5},
{"abb":"FL","name":"Florida","region":"South Atlantic","group":5},
{"abb":"GA","name":"Georgia","region":"South Atlantic","group":5},
{"abb":"IA","name":"Iowa","region":"West North Central","group":4},
{"abb":"ID","name":"Idaho","region":"Mountain","group":8},
{"abb":"IL","name":"Illinois","region":"East North Central","group":3},
{"abb":"IN","name":"Indiana","region":"East North Central","group":3},
{"abb":"KS","name":"Kansas","region":"West North Central","group":4},
{"abb":"KY","name":"Kentucky","region":"East South Central","group":6},
{"abb":"LA","name":"Louisiana","region":"West South Central","group":7},
{"abb":"MA","name":"Massachusetts","region":"New England","group":1},
{"abb":"MD","name":"Maryland","region":"South Atlantic","group":5},
{"abb":"ME","name":"Maine","region":"New England","group":1},
{"abb":"MI","name":"Michigan","region":"East North Central","group":3},
{"abb":"MN","name":"Minnesota","region":"West North Central","group":4},
{"abb":"MO","name":"Missouri","region":"West North Central","group":7},
{"abb":"MS","name":"Mississippi","region":"East South Central","group":6},
{"abb":"MT","name":"Montana","region":"Mountain","group":8},
{"abb":"NC","name":"North Carolina","region":"South Atlantic","group":5},
{"abb":"ND","name":"North Dakota","region":"West North Central","group":4},
{"abb":"NE","name":"Nebraska","region":"West North Central","group":4},
{"abb":"NH","name":"New Hampshire","region":"New England","group":1},
{"abb":"NJ","name":"New Jersey","region":"Middle Atlantic","group":2},
{"abb":"NM","name":"New Mexico","region":"Mountain","group":8},
{"abb":"NV","name":"Nevada","region":"Mountain","group":8},
{"abb":"NY","name":"New York","region":"Middle Atlantic","group":2},
{"abb":"OH","name":"Ohio","region":"East North Central","group":3},
{"abb":"OK","name":"Oklahoma","region":"West South Central","group":7},
{"abb":"OR","name":"Oregon","region":"Pacific","group":9},
{"abb":"PA","name":"Pennsylvania","region":"Middle Atlantic","group":2},
{"abb":"RI","name":"Rhode Island","region":"New England","group":1},
{"abb":"SC","name":"South Carolina","region":"South Atlantic","group":5},
{"abb":"SD","name":"South Dakota","region":"West North Central","group":4},
{"abb":"TN","name":"Tennessee","region":"East South Central","group":6},
{"abb":"TX","name":"Texas","region":"West South Central","group":7},
{"abb":"UT","name":"Utah","region":"Mountain","group":8},
{"abb":"VA","name":"Virginia","region":"South Atlantic","group":5},
{"abb":"VT","name":"Vermont","region":"New England","group":1},
{"abb":"WA","name":"Washington","region":"Pacific","group":9},
{"abb":"WI","name":"Wisconsin","region":"East North Central","group":3},
{"abb":"WV","name":"West Virginia","region":"South Atlantic","group":5},
{"abb":"WY","name":"Wyoming","region":"Mountain","group":8}
],
"links":[
{"source":0,"target":8,"value":1},
{"source":0,"target":9,"value":1},
{"source":0,"target":23,"value":1},
{"source":0,"target":40,"value":1},
{"source":1,"target":16,"value":1},
{"source":1,"target":22,"value":1},
{"source":1,"target":23,"value":1},
{"source":1,"target":34,"value":1},
{"source":1,"target":40,"value":1},
{"source":1,"target":41,"value":1},
{"source":2,"target":3,"value":1},
{"source":2,"target":30,"value":1},
{"source":2,"target":31,"value":1},
{"source":2,"target":42,"value":1},
{"source":3,"target":31,"value":1},
{"source":3,"target":35,"value":1},
{"source":4,"target":14,"value":1},
{"source":4,"target":27,"value":1},
{"source":4,"target":30,"value":1},
{"source":4,"target":34,"value":1},
{"source":4,"target":42,"value":1},
{"source":4,"target":48,"value":1},
{"source":5,"target":17,"value":1},
{"source":5,"target":32,"value":1},
{"source":5,"target":37,"value":1},
{"source":6,"target":18,"value":1},
{"source":6,"target":43,"value":1},
{"source":7,"target":18,"value":1},
{"source":7,"target":29,"value":1},
{"source":7,"target":36,"value":1},
{"source":8,"target":9,"value":1},
{"source":9,"target":25,"value":1},
{"source":9,"target":38,"value":1},
{"source":9,"target":40,"value":1},
{"source":10,"target":12,"value":1},
{"source":10,"target":21,"value":1},
{"source":10,"target":22,"value":1},
{"source":10,"target":27,"value":1},
{"source":10,"target":39,"value":1},
{"source":10,"target":46,"value":1},
{"source":11,"target":24,"value":1},
{"source":11,"target":31,"value":1},
{"source":11,"target":35,"value":1},
{"source":11,"target":42,"value":1},
{"source":11,"target":45,"value":1},
{"source":11,"target":48,"value":1},
{"source":12,"target":13,"value":1},
{"source":12,"target":15,"value":1},
{"source":12,"target":22,"value":1},
{"source":12,"target":46,"value":1},
{"source":13,"target":15,"value":1},
{"source":13,"target":20,"value":1},
{"source":13,"target":33,"value":1},
{"source":14,"target":22,"value":1},
{"source":14,"target":27,"value":1},
{"source":14,"target":34,"value":1},
{"source":15,"target":22,"value":1},
{"source":15,"target":33,"value":1},
{"source":15,"target":40,"value":1},
{"source":15,"target":43,"value":1},
{"source":15,"target":47,"value":1},
{"source":16,"target":23,"value":1},
{"source":16,"target":41,"value":1},
{"source":17,"target":28,"value":1},
{"source":17,"target":32,"value":1},
{"source":17,"target":37,"value":1},
{"source":17,"target":44,"value":1},
{"source":18,"target":36,"value":1},
{"source":18,"target":43,"value":1},
{"source":18,"target":47,"value":1},
{"source":19,"target":28,"value":1},
{"source":20,"target":33,"value":1},
{"source":20,"target":46,"value":1},
{"source":21,"target":26,"value":1},
{"source":21,"target":39,"value":1},
{"source":21,"target":46,"value":1},
{"source":22,"target":27,"value":1},
{"source":22,"target":34,"value":1},
{"source":22,"target":40,"value":1},
{"source":23,"target":40,"value":1},
{"source":24,"target":26,"value":1},
{"source":24,"target":39,"value":1},
{"source":24,"target":48,"value":1},
{"source":25,"target":38,"value":1},
{"source":25,"target":40,"value":1},
{"source":25,"target":43,"value":1},
{"source":26,"target":39,"value":1},
{"source":27,"target":39,"value":1},
{"source":27,"target":48,"value":1},
{"source":28,"target":44,"value":1},
{"source":29,"target":32,"value":1},
{"source":29,"target":36,"value":1},
{"source":30,"target":34,"value":1},
{"source":30,"target":41,"value":1},
{"source":31,"target":35,"value":1},
{"source":31,"target":42,"value":1},
{"source":32,"target":36,"value":1},
{"source":32,"target":44,"value":1},
{"source":33,"target":36,"value":1},
{"source":33,"target":47,"value":1},
{"source":34,"target":41,"value":1},
{"source":35,"target":45,"value":1},
{"source":36,"target":47,"value":1},
{"source":39,"target":48,"value":1},
{"source":40,"target":43,"value":1},
{"source":42,"target":48,"value":1},
{"source":43,"target":47,"value":1}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment