Force Layout NGS 2

_.md

[ Launch: Force Layout NGS ] 5d0c397a427a75538639 by nicohaemhouts
[ Launch: Force Layout NGS ] 367e5785f2d4a193c798 by nicohaemhouts

config.json

{"description":"Force Layout NGS 2","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" : 51
      },
      {
        "name" : "CMS Gateway Web",
        "number" : 1955,
        "load" : 72
      }
    ],
	"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 = 750,
    width = 800,
    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.55)
	.charge(-14536);

var link = svg.selectAll('.link')
	.data(graph.links)
	.enter().append('line')
	.attr('class','link');

var gNode = svg.selectAll('.gNode')
	.data(graph.nodes)
	.enter()
	.append('g')
	.classed('gNode', true);

var node = gNode.append('circle')
	.classed('node', true)
	.attr('r', function (d) { return width/12})
	.classed('low', function (d) { return d.load < 5; })
	.classed('warning', function (d) { return d.load >= 50 && d.load < 70; })
	.classed('danger', function (d) { return d.load >= 70;});
	

var loadText = gNode.append('text')
	.text(function (d) { return d.load + '%'})
	.classed('loadText', true)
	.attr('text-anchor', 'middle')
	.classed('low', function (d) { return d.load < 5; })
	.classed('warning', function (d) { return d.load >= 50 && d.load < 70; })
	.classed('danger', function (d) { return d.load >= 70;});


force.on('end', function () {
  
  gNode.attr("transform", function (d) {
    return 'translate(' + [d.x, 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 : 3px;
}


.node {
  fill : rgb(74,166,220);
  stroke : rgb(7,49,66);
  stroke-width : 5px;
}

.node.danger {
   fill : rgb(174,0,52);
}

.node.warning {
  fill : rgb(228,170,20);  
}

.node.low {
  fill : rgb(255,255,255);  
}

.loadText {
  fill: #ffffff; 
  font-size: 22px;
}

.loadText.low, .loadText.warning {
 fill: rgb(0,0,0); 
}