Force Layout NGS

_.md

[ Launch: Force Layout NGS ] 367e5785f2d4a193c798 by nicohaemhouts

config.json

{"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"}

data.json

{
	"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 }
    ]
} 

inlet.js

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();

style.css

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;
}