Skip to content

Instantly share code, notes, and snippets.

@abhishekpolavarapu

abhishekpolavarapu/README.md

Last active March 16, 2016 03:13
Show Gist options
  • Save abhishekpolavarapu/13c5ec70f7840df9ce5c to your computer and use it in GitHub Desktop.
Save abhishekpolavarapu/13c5ec70f7840df9ce5c to your computer and use it in GitHub Desktop.
Download ZIP
VI7 Node- link diagram
Raw
README.md

The states are divided into various groups and each group is assigned with a particular color. The nodes which has less number of connections are moving more freely when compared which has links. There are more number of states that belong to south atlantic region.

My implementation is more similar to the Mike bostocks and I took the json dataset from Mr.Hung Do

Raw
data.json
{
"nodes":[
{"abb":"AL","name":"AL","region":"East South Central","group":6},
{"abb":"AR","name":"AR","region":"West South Central","group":7},
{"abb":"AZ","name":"AZ","region":"Mountain","group":8},
{"abb":"CA","name":"CA","region":"Pacific","group":9},
{"abb":"CO","name":"CO","region":"Mountain","group":8},
{"abb":"CT","name":"CT","region":"New England","group":1},
{"abb":"DC","name":"DC","region":"South Atlantic","group":5},
{"abb":"DE","name":"DE","region":"South Atlantic","group":5},
{"abb":"FL","name":"FL","region":"South Atlantic","group":5},
{"abb":"GA","name":"GA","region":"South Atlantic","group":5},
{"abb":"IA","name":"IA","region":"West North Central","group":4},
{"abb":"ID","name":"ID","region":"Mountain","group":8},
{"abb":"IL","name":"IL","region":"East North Central","group":3},
{"abb":"IN","name":"IN","region":"East North Central","group":3},
{"abb":"KS","name":"KS","region":"West North Central","group":4},
{"abb":"KY","name":"KY","region":"East South Central","group":6},
{"abb":"LA","name":"LA","region":"West South Central","group":7},
{"abb":"MA","name":"MA","region":"New England","group":1},
{"abb":"MD","name":"MD","region":"South Atlantic","group":5},
{"abb":"ME","name":"ME","region":"New England","group":1},
{"abb":"MI","name":"MI","region":"East North Central","group":3},
{"abb":"MN","name":"MN","region":"West North Central","group":4},
{"abb":"MO","name":"MO","region":"West North Central","group":7},
{"abb":"MS","name":"MS","region":"East South Central","group":6},
{"abb":"MT","name":"MT","region":"Mountain","group":8},
{"abb":"NC","name":"NC","region":"South Atlantic","group":5},
{"abb":"ND","name":"ND","region":"West North Central","group":4},
{"abb":"NE","name":"NE","region":"West North Central","group":4},
{"abb":"NH","name":"NH","region":"New England","group":1},
{"abb":"NJ","name":"NJ","region":"Middle Atlantic","group":2},
{"abb":"NM","name":"NM","region":"Mountain","group":8},
{"abb":"NV","name":"NV","region":"Mountain","group":8},
{"abb":"NY","name":"NY","region":"Middle Atlantic","group":2},
{"abb":"OH","name":"OH","region":"East North Central","group":3},
{"abb":"OK","name":"OK","region":"West South Central","group":7},
{"abb":"OR","name":"OR","region":"Pacific","group":9},
{"abb":"PA","name":"PA","region":"Middle Atlantic","group":2},
{"abb":"RI","name":"RI","region":"New England","group":1},
{"abb":"SC","name":"SC","region":"South Atlantic","group":5},
{"abb":"SD","name":"SD","region":"West North Central","group":4},
{"abb":"TN","name":"TN","region":"East South Central","group":6},
{"abb":"TX","name":"TX","region":"West South Central","group":7},
{"abb":"UT","name":"UT","region":"Mountain","group":8},
{"abb":"VA","name":"VA","region":"South Atlantic","group":5},
{"abb":"VT","name":"VT","region":"New England","group":1},
{"abb":"WA","name":"WA","region":"Pacific","group":9},
{"abb":"WI","name":"WI","region":"East North Central","group":3},
{"abb":"WV","name":"WV","region":"South Atlantic","group":5},
{"abb":"WY","name":"WY","region":"Mountain","group":8}
],
"links":[
{"source":0,"target":8},
{"source":0,"target":9},
{"source":0,"target":23},
{"source":0,"target":40},
{"source":1,"target":16},
{"source":1,"target":22},
{"source":1,"target":23},
{"source":1,"target":34},
{"source":1,"target":40},
{"source":1,"target":41},
{"source":2,"target":3},
{"source":2,"target":30},
{"source":2,"target":31},
{"source":2,"target":42},
{"source":3,"target":31},
{"source":3,"target":35},
{"source":4,"target":14},
{"source":4,"target":27},
{"source":4,"target":30},
{"source":4,"target":34},
{"source":4,"target":42},
{"source":4,"target":48},
{"source":5,"target":17},
{"source":5,"target":32},
{"source":5,"target":37},
{"source":6,"target":18},
{"source":6,"target":43},
{"source":7,"target":18},
{"source":7,"target":29},
{"source":7,"target":36},
{"source":8,"target":9},
{"source":9,"target":25},
{"source":9,"target":38},
{"source":9,"target":40},
{"source":10,"target":12},
{"source":10,"target":21},
{"source":10,"target":22},
{"source":10,"target":27},
{"source":10,"target":39},
{"source":10,"target":46},
{"source":11,"target":24},
{"source":11,"target":31},
{"source":11,"target":35},
{"source":11,"target":42},
{"source":11,"target":45},
{"source":11,"target":48},
{"source":12,"target":13},
{"source":12,"target":15},
{"source":12,"target":22},
{"source":12,"target":46},
{"source":13,"target":15},
{"source":13,"target":20},
{"source":13,"target":33},
{"source":14,"target":22},
{"source":14,"target":27},
{"source":14,"target":34},
{"source":15,"target":22},
{"source":15,"target":33},
{"source":15,"target":40},
{"source":15,"target":43},
{"source":15,"target":47},
{"source":16,"target":23},
{"source":16,"target":41},
{"source":17,"target":28},
{"source":17,"target":32},
{"source":17,"target":37},
{"source":17,"target":44},
{"source":18,"target":36},
{"source":18,"target":43},
{"source":18,"target":47},
{"source":19,"target":28},
{"source":20,"target":33},
{"source":20,"target":46},
{"source":21,"target":26},
{"source":21,"target":39},
{"source":21,"target":46},
{"source":22,"target":27},
{"source":22,"target":34},
{"source":22,"target":40},
{"source":23,"target":40},
{"source":24,"target":26},
{"source":24,"target":39},
{"source":24,"target":48},
{"source":25,"target":38},
{"source":25,"target":40},
{"source":25,"target":43},
{"source":26,"target":39},
{"source":27,"target":39},
{"source":27,"target":48},
{"source":28,"target":44},
{"source":29,"target":32},
{"source":29,"target":36},
{"source":30,"target":34},
{"source":30,"target":41},
{"source":31,"target":35},
{"source":31,"target":42},
{"source":32,"target":36},
{"source":32,"target":44},
{"source":33,"target":36},
{"source":33,"target":47},
{"source":34,"target":41},
{"source":35,"target":45},
{"source":36,"target":47},
{"source":39,"target":48},
{"source":40,"target":43},
{"source":42,"target":48},
{"source":43,"target":47}
]
}
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("data.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.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment