Tributary inlet

_.md

[ Launch: Tributary inlet ] 1dff67684274d7fd68d0 by seliopou

config.json

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

inlet.js

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