Force Layout with Radial Progress

_.md

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

config.json

{"description":"Force Layout with Radial Progress","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,
        "label" : "operations / s",
        "load" : 34
      },
      { 
        "name" : "EMSEVT Gateway Loader",
        "number" : 4545,
        "label" : "items",
        "load" : 99
      },
      { 
        "name" : "CDS API Web",
        "number" : 655,
        "label" : "events",
        "load" : 23
      },
      { 
        "name" : "CDS Batch Web",
        "number" : 0,
        "label" : "things",
        "load" : 0
      },
      { 
        "name" : "Strobe API Web",
        "number" : 3655,
        "label" : "events",
        "load" : 51
      },
      {
        "name" : "CMS Gateway Web",
        "number" : 1955,
        "label" : "interchanges",
        "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,
    t = 2 * Math.PI,
    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(-16741);

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)
	.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 circle = gNode.append('circle')
	.classed('circle', true)
	.attr('r', function (d) { return width/12});

var arc = d3.svg.arc()
    .innerRadius(width/12)
    .outerRadius(width/12 + 20)
    .startAngle(0);

var progressBack = gNode.append("path")
	.classed('progressBack', true)
    .datum({endAngle: t})
    .style("fill", "#ddd")
    .attr("d", arc);

var progressFront = gNode.append("path")
	.classed('progressFront', true)
	.datum(function (d) {
      return {endAngle: (d.load / 100) * t }
	})
	.attr("d", arc);


var loadText = gNode.append('text')
	.text(function (d) { return d.number})
	.classed('loadText', true)
	.attr('text-anchor', 'middle')	
	.attr('y',-10);

var loadLabel = gNode.append('text')
	.text(function (d) { return d.label})
	.classed('loadLabel', true)
	.attr('text-anchor', 'middle')	
	.attr('y',-35);

var nameText = gNode.append("foreignObject")
    .attr("width", width / 6)
    .attr("height", width / 12)
	.attr('x', -1 * width/12)
    .append("xhtml:body")
	.style('background', 'transparent')
    .html(function (d) { return '<div class="nameText">' + d.name + '</div>'});


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 : 2px;
}


.circle {
  fill : rgb(255,255,255);
  stroke : rgb(7,49,66);
  stroke-width : 5px;
}

.progressFront {
  fill : rgb(74,166,220);
}

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

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

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


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

.loadText {
  fill: rgb(74,166,220);
  font-size: 22px;
}

.nameText {
  fill: rgb(123,131,140);
  font-size: 16px;
  line-height: 1.2em;
  text-align: center;
  padding: 0 7px;
  font-variant: small-caps;
  text-transform: lowercase;
  font-weight: bold;
}

.loadLabel {
  font-size: 12px;
  fill: rgb(123,131,140);
}