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.2;  
          })
        
      }
   	  if(keyChar == 51){  

		d3.selectAll("circle")
          .transition()
          .duration(400)
          .attr("cx",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 dreams')
  .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')