Skip to content

Instantly share code, notes, and snippets.

@seliopou
Last active Aug 29, 2015
Embed
What would you like to do?
Tributary inlet
{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"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/rUdomDS.png"}
var svg = d3.select('svg');
var margin = { top : 100, left : 50 };
var boxes = [
{ x : 0 , y : -55 , width : 400.0, height : 50, type : 'app', text : 'Application' },
{ x : 0 , y : 150 , width : 400.0, height : 50, type : 'openflow', text : 'OpenFlow' },
{ x : 0 , y : 0 , width : 400.0, height : 145, type : 'controller', text: 'Frenetic Controller' },
{ x : 5 , y : 47.5, width : 192.5, height : 40, type : 'inner', text : 'Semantics' },
{ x : 202.5, y : 47.5, width : 192.5, height : 40, type : 'inner', text : 'Compiler' },
{ x : 5 , y : 95 , width : 192.5, height : 40, type : 'inner', text : 'Packet Handler' },
{ x : 202.5, y : 95 , width : 192.5, height : 40, type : 'inner', text : 'Flow Manager' }
];
var types = {
'app' : '#2980b9',
'openflow' : '#34495e',
'controller' : '#7f8c8d',
'inner' : '#bdc3c7'
}
var box = svg.selectAll('rect')
.data(boxes);
box.enter()
.append('rect')
.attr('x', function(d) { return d.x + margin.left; })
.attr('y', function(d) { return d.y + margin.top; })
.attr('width', function(d) { return d.width; })
.attr('height', function(d) { return d.height; })
.style('fill', function(d) { return types[d.type]; })
.attr('rx', 2)
.attr('ry', 2)
var text = svg.selectAll('text')
.data(boxes.filter(function(d) { return d.text; }));
text
.enter().append('text')
.text(function(d) { return d.text; })
.style('fill', 'white')
.attr('x', function(d) {
return margin.left + d.x + ((d.width - this.getBBox().width) / 2);
})
.attr('y', function(d) {
return margin.top + d.y + ((80 - this.getBBox().height) / 2);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment