just another inlet to tributary

inlet.js

var Baushaus = function(){
	this.svg = g;
}
//datatelling.com
Baushaus.prototype.mergeOptions = function(element, options){ for(option in options){ element.attr(option,options[option]); } };     
Baushaus.prototype.circle = function(r,x,y,options){ 
  var elem = this.svg.append('circle').attr('r',r);
  elem.attr('cx',x)
  elem.attr('cy',y)  
  if(options) this.mergeOptions(elem,options);
  return elem;  
};
Baushaus.prototype.rect   = function(w,h,options){ return this.svg.append('rect').attr('width',w).attr('height',h) };
Baushaus.prototype.square = function(s,options){   return this.svg.append('rect').attr('width',s).attr('height',s)};

var b = new Baushaus();

b.circle(54,167,147)
b.circle(113,374,147)  
  
  var fo = g.append("foreignObject")
    .attr("width", 100)
    .attr("height", 14)
   .append("xhtml:body")	
   fo.append('input').attr('id','content')
 
g.append('rect')
  .attr('width',49)
  .attr('height',55)
  .attr('fill','red')
  .on('click', function(){
  var val = $('#content').val()
  parseCommand(val)
  $('#content').val('')  
     
  })
   
  function parseCommand(val){
  	var split = val.split(' ')
    console.log('Split',split)    
    var command = split[0]
    var rect;    
    if(command=='rect'){rect = g.append('rect')
      .attr('width',49)
      .attr('height',55)
      .attr('x',49)
      .attr('y',55)
      .attr('class','drag')
      .data([{x: 0, y: 0}])
    var drag = d3.behavior.drag()
    .on("dragstart", function(){})
    .on("drag", function(d,i){
      	
      	
 		 d.x += d3.event.dx;
		 d.y += d3.event.dy;
		  d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
    })
    .on("dragend", function(){});
   
	rect.call(drag)
      
      }
    if(rect && split[1]) rect.attr('width',split[1]) 
    if(rect && split[2]) rect.attr('height',split[2])         
  
  }