just another inlet to tributary

inlet.js

var shape_group = g.append('g')
					.attr('transform','translate('+[0,0]+')')

var shape_width = 155;
var shape_height = 15;
var background  = shape_group.append('rect')
    				.attr('width',shape_width)
        			.attr('height',d3.select('svg').attr('height'))
                    .attr('fill',"#96C7B3")

 
var arrow_up = shape_group.append('g')
	but1  = arrow_up.append('rect')
    				.attr('width',shape_width)
        			.attr('height',shape_height)
                    .attr('fill',"#5C746A")
      
   	arrow  = arrow_up.append('path')
                    .attr('fill',"#A8A29E")
      				.attr('d','m 0,0 l10,10 l-20,0Z')
					.attr('transform','translate('+[shape_width/2,2]+')')
       
var arrow_down = shape_group.append('g').attr('transform','translate('+[0,d3.select('svg').attr('height')-15]+')')
	
   	but1  = arrow_down.append('rect')
    				.attr('width',shape_width)
        			.attr('height',shape_height)
                    .attr('fill',"#5C746A")
      
   	arrow  = arrow_down.append('path')
                    .attr('fill',"#A8A29E")
      				.attr('d','m 0,0 l-10,-10 l20,0Z')
					.attr('transform','translate('+[shape_width/2,12]+')')
      
var element  = shape_group.append('g')
    .on('click',function(){
    g.append('rect')
        .attr('width',600)
        .attr('height',200)
        .attr('x',200)
        .attr('y',40+(Math.random(33)*300))
        .attr('fill','#'+Math.floor(Math.random()*16777215).toString(16))   
      
    })
    
    element.append('rect')
    				.attr('width',shape_width)
        			.attr('height',100)
            	    .attr('y',15)
                    .attr('fill',"#EEEEEE")
      				.attr('stroke-width',1)
            		.attr('stroke','black')
      
       element.append('rect')
    				.attr('width',50)
        			.attr('height',50)
            	    .attr('x',50)
         			.attr('y',40)
                    .attr('fill',"#40412E")   
var element  = shape_group.append('g')
    .on('click',function(){
 			g.append('path')
                    .attr('fill','#'+Math.floor(Math.random()*16777215).toString(16))   
      				.attr('d','m 0,0 l0,50 l50,0Z')
                    .attr('transform','translate('+[(Math.random(200)*500+50)+100,Math.random(33)*200]+')')
      
    })      
         
         
        element.append('rect')
    				.attr('width',shape_width)
        			.attr('height',100)
            	    .attr('y',115)
                    .attr('fill',"#EEE")
      				.attr('stroke-width',1)
            		.attr('stroke','black')
          
   	      element  = element.append('path')
                    .attr('fill',"#50270C")
      				.attr('d','m 0,0 l0,50 l50,0Z')
                    .attr('transform','translate('+[50,138]+')')