just another inlet to tributary

inlet.js

var r = 153
var i = 0;
var draw = false
var element;
var element2;
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)*800;
          
          })
        
      }
      if(keyChar == 53){  

		d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("fill",function(){
          	var r = Math.floor(Math.random(2)*22)
            var g = Math.floor(Math.random(2)*200)
            var b = Math.floor(Math.random(2)*400)
            console.log(r,g,b,"rgb("+r+","+g+","+b+")")    
            return "rgb("+r+","+g+","+b+")"
          
          })
        
      }
  
      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 == 100){
          charD()
  	  }
      if(keyChar == 99){
          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);

g.append('text').text('The Drawing Piano')
  .attr('y',50).attr('x',500).attr('font-size',50)

g.append('text').text('Use your keyboard to paint your viz')
  .attr('y',91).attr('x',503).attr('font-size',23)
  

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