just another inlet to tributary

inlet.js

var r = 153
var i = 0;
var draw = false
var element;
var element2;

function randomXToY(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}


	for(var i = 0; i < 200; i++){
	console.log("this","");
	g.append("circle")
	.attr("r",50)
	.attr("cx",i%12)
	.attr("cy",i*200)
    .attr("class",i*200)
	.attr("fill","#ff00ff");

	}

  


keyup = function(){element = undefined;element2 = undefined};
keydown = function(){};
keypress = function(){
      console.log('Hello',this,d3.event)
      var keyChar = d3.event.keyCode
      console.log(keyChar)
      if(keyChar == 49){   
        d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("r",function(d,i){
            return d3.select(this).attr("r")*2;  
          })
        
      }
  	  if(keyChar == 50){   
        d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("r",function(d,i){
            return d3.select(this).attr("r")*0.5;  
          })
        
      }
   	  if(keyChar == 51){  

		d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("cx",200)
        
      }
      if(keyChar == 52){  

		d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("cx",function(){
            return Math.random(11)*1000;
          })
	      .attr("cy",function(){
            return Math.random(11)*800;
          })  
        
      }
      if(keyChar == 53){  

		d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("fill",function(){
               return '#'+Math.floor(Math.random()*16777215).toString(16);
          
          })
        
      }
  
      if(keyChar == 54){  

		d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("cx",200)
          .attr("cy",200) 
  
        
      }  
  

  
  
     if(keyChar == 55){  

		d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr('cx',function(d,i){
          	return (i * 55);})
          .attr('cy',function(d,i){
          	return (40*Math.sin(i*20))+200 })
      }  
  
  
        if(keyChar == 56){  

			d3.selectAll('circle')
               .transition()
                .ease('bounce')
                .duration(400)
                .attr('opacity',function(){
                  return randomXToY(0,1);
                }) 
          
      } 
  
  
         if(keyChar == 57){  

		d3.selectAll("circle")
          .transition()
          .ease('bounce')
          .duration(400)
          .attr('cy',function(){
          	return Math.random(22)*800;
          })
	
      }  
  
  
           if(keyChar == 58){  

		d3.selectAll("circle")
          .transition()
          .ease('bounce')
          .duration(400)
          
	
      }  
  
  
     if(keyChar == 115){  

		d3.selectAll("circle")
          .attr("cx",0)
		   .attr("cy",0)
		  .attr('transform',function(d,i){
          		console.log('S',i)
            var x = (i % 5) * 100;
            var y = parseInt(i / 5) * 100;
            return 'translate('+[x,y]+')';
            
          })
          
	
      }   
  
  
       if(keyChar == 114){  

		d3.selectAll("circle")
          .transition()
          .duration(2000)
          .attr('stroke','#'+Math.floor(Math.random()*16777215).toString(16))
          .attr('stroke-width',20)
          
          
	
      }
  
    
       if(keyChar == 115){  

		d3.selectAll("circle")
          .transition()
          .duration(1000)
          .attr('stroke','#'+Math.floor(Math.random()*16777215).toString(16))
          .attr('stroke-width',0)
          
      }
  
      if(keyChar == 118){  

		d3.selectAll("circle")
          .transition()
          .duration(1000)
          .attr('stroke','#'+Math.floor(Math.random()*16777215).toString(16))
          .attr('stroke-width',0)
          
      }
  
  
  
      if(keyChar == 100){
          charD()
  	  }
      if(keyChar == 99){
          charC()
  	  }
      if(keyChar == 101){
        for(var v=0;v <=100;v++){
        	charC()
        }
  	  }
  
	i++;
      
}
  function charD(){
  
  if(element2){
              console.log(element)
              if(i % 10 == 0)
                  element2.attr('r',Math.random(2)*40)
                  element2.attr('transform','translate('+[Math.random(2)*800,Math.random(2)*80]+')')
                  
          }else{
              element2 = g.append('rect')
                .attr('width',Math.random(2)*40)
                .attr('height',Math.random(2)*40)  
                .attr('x',Math.random(2)*900)
                .attr('y',Math.random(2)*400)
                .attr('id','element')  
    }
  
  
  }   
  function charC(){
  
  if(element){
              console.log(element)
              if(i % 10 == 0)
                  element.attr('r',Math.random(2)*40)
                  element.attr('transform','translate('+[Math.random(2)*800,Math.random(2)*80]+')')
                  
          }else{
              element = g.append('circle')
                g.append('circle').attr('r',Math.random(2)*40)
                .attr('cx',Math.random(2)*900)
                .attr('cy',Math.random(2)*400)
                .attr('id','element')  
    }
  
  
  }  
  
d3.select(window).on("keypress", keypress);
d3.select(window).on("keyup", keyup);
d3.select(window).on("keydown", keydown);

var i = 0;
var moousi = function(){
console.log('hello')
  if(i % 10 == 0){
                element = 
                g.append('circle').attr('r',Math.random(2)*40)
                .attr('cx',Math.random(2)*900)
                .attr('cy',Math.random(2)*900)
                .attr('id','element')
                  
                  
               element = 
                g.append('rect')
                .attr('x',Math.random(2)*900)
                .attr('y',Math.random(2)*900)
                .attr('width','50')      
                .attr('height','50')  
  }	
  
  i++;
}

d3.select(window).on("mousemove", moousi);



g.append('path')
  .attr('d','M100,100')
  .attr('stroke-width',11.56)
  .attr('stroke','black')
  .attr('fill','none')