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 with Radial Progress
{"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"}
{
"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 }
]
}
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();
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment