Skip to content

Instantly share code, notes, and snippets.

@PaladhiDinesh

PaladhiDinesh/Readme.md

Last active March 16, 2016 06:59
Show Gist options
  • Save PaladhiDinesh/f306f1f1d2d48ba1b042 to your computer and use it in GitHub Desktop.
Save PaladhiDinesh/f306f1f1d2d48ba1b042 to your computer and use it in GitHub Desktop.
Download ZIP
Node- Link Diagram Visualization Implementation 7
Raw
Readme.md

###Insight gained:

  • The state that is connected to many states can be seen at the center of the graph whereas the least connected ones are at the corners. Example :- Maine is connected to only one state and so it is in the corner.
  • Connections between the states can be easily found out and number of hops between them can be easily calculated.
  • All the states from the same regions are with the same color.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #799;
stroke-width: 2.1px;
}
.link {
stroke: #999;
stroke-opacity: 1.6;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 900,
height = 400;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-100)
.linkDistance(10)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("my_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")
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 7)
.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>
<svg width="1510" height="530" style="margin-left: -680px;">
<g transform="translate(880,250)" class="legend"><g class="legendCells" transform="translate(0,0)"><rect height="18" width="25" style="fill: rgb(31, 119, 180); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Different Region</text></g><g class="legendCells" transform="translate(0,23)"><rect height="18" width="25" style="fill: rgb(255, 127, 14); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">New England</text></g><g class="legendCells" transform="translate(0,46)"><rect height="18" width="25" style="fill: rgb(44, 160, 44); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Middle Atlantic</text></g><g class="legendCells" transform="translate(0,69)"><rect height="18" width="25" style="fill: rgb(214, 39, 40); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">East North Central</text></g><g class="legendCells" transform="translate(0,92)"><rect height="18" width="25" style="fill: rgb(148, 103, 189); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">West North Central</text></g><g class="legendCells" transform="translate(0,115)"><rect height="18" width="25" style="fill: rgb(140, 86, 75); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">South Atlantic</text></g><g class="legendCells" transform="translate(0,138)"><rect height="18" width="25" style="fill: rgb(227, 119, 194); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">East South Central</text></g><g class="legendCells" transform="translate(0,161)"><rect height="18" width="25" style="fill: rgb(127, 127, 127); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">West South Central</text></g><g class="legendCells" transform="translate(0,184)"><rect height="18" width="25" style="fill: rgb(188, 189, 34); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Mountain</text></g><g class="legendCells" transform="translate(0,207)"><rect height="18" width="25" style="fill: rgb(23, 190, 207); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Pacific</text></g><text y="-10" style="font-size: 15px;">Region by Color</text></g>
Raw
my_data.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},
{"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}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment