Skip to content

Instantly share code, notes, and snippets.

@nicohaemhouts

nicohaemhouts/_.md

Last active Aug 29, 2015
Embed
What would you like to do?
Force Layout NGS
{"description":"Force Layout NGS","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/sYjhZmf.png"}
{
"nodes": [
{
"name" : "EMSEVT Gateway Web",
"number" : 2332,
"load" : 34
},
{
"name" : "EMSEVT Gateway Loader",
"numnber" : 4545,
"load" : 99
},
{
"name" : "CDS API Web",
"number" : 655,
"load" : 23
},
{
"name" : "CDS Batch Web",
"number" : 0,
"load" : 0
},
{
"name" : "Strobe API Web",
"number" : 3655,
"load" : 87
},
{
"name" : "CMS Gateway Web",
"number" : 955,
"load" : 16
}
],
"links": [
{ "source": 0, "target": 1 },
{ "source": 0, "target": 2 },
{ "source": 2, "target": 3 },
{ "source": 2, "target": 5 },
{ "source": 2, "target": 4 },
{ "source": 3, "target": 5 }
]
}
var graph = tributary.data,
height = 500,
width = 750,
svg = d3.select('svg')
.attr('width', width)
.attr('height', height),
force = d3.layout.force()
.size([width, height])
.nodes(graph.nodes)
.links(graph.links);
force.linkDistance(width/1.6)
.linkStrength(0.01)
.gravity(0.5)
.charge(-8304);
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');
force.on('end', function () {
node.attr('r', width/18)
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; });
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; });
});
force.start();
body {
background: #fff;
}
.link {
stroke : rgb(7,49,66);
stroke-width : 2px;
}
.node {
fill : rgb(174,0,52);
stroke : rgb(7,49,66);
stroke-width : 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment