just another inlet to tributary

inlet.js

var amplitude = 2;
var data1 = [{x:0,y:0},
             {x:33,y:21},
             {x:285,y:33},
             {x:390,y:-31},
             {x:106,y:-36},
             {x:-65,y:97}];


//A,F;G;H;I,L,X,Y,Z
   
function toPath (data){
	var path = 'M0,0'
        
        for(i in data ){
          	var p = data[i];
        	path += 'L'+p.x+','+p.y;
          	var temp = parseInt(i)+1;
          if(i < (data.length-1)){
            	var nextPoint = data[temp];
				
            	
                  
            	if(nextPoint.x >= p.x){
                	var two_point_form = (nextPoint.y - p.y) / (nextPoint.x - p.x);

                  
            	  //console.log('Steigung',two_point_form)
                  var toogle = 1;
                  for(var j = p.x; j < nextPoint.x-1; j++){ 
                     var x = j;
                     var y = (two_point_form * (j - p.x)) + p.y;
                    	
                    if(j % 3 == 0) {
                    	  y-= (amplitude * toogle)
                          toogle *= -1;
                    }
					
                     //y = Math.sin(y)  
                     
                     if(j % 7 == 0) 
	                     //createCircle({x:x,y:y},'red')
                     //console.log(p.y)  
                     path += 'L'+x+','+(y)	
                  	
	                };  
                  }  
            	
            if(nextPoint.x <= p.x){
              var two_point_form = (nextPoint.y - p.y) / (nextPoint.x - p.x);
              for(var j = p.x; j >= nextPoint.x-1; j--){
				 console.log('P',j)
                 var x = j;
                 var y = (two_point_form * (j - p.x)) + p.y;
                
                	
                    if(j % 3 == 0) {
                    	  y-= (amplitude * toogle)
                          toogle *= -1;
                    }
                 if(j % 7 == 0) 
	                //createCircle({x:x,y:y},'red')  
              path += 'L'+x+','+(y)	
              } 
              
               
            }
            	
                  
            	
          }  
        	
        } 
  		//path += 'Z';
    //console.log('Path',path)
	return path; 
}

g.selectAll("path")
    .data([data1])
  	.enter()
  	.append("svg:path")
    .attr("d", toPath(data1))
  	.attr('fill',"none")
    .attr('stroke',"#1949C5")
  	.attr('stroke-width',4) 
  	.attr('transform','translate(200,200)scale(2)')
  
 for (i in data1){
	createCircle(data1[i],'red')
}
  
  function createCircle(pointD,color){
    if(!color){
      color = "#B40505";
    } 
  var circleHandler = g.append('circle')
    .attr('r',1)
    .attr('stroke',color)
    .attr('stroke-width',1)
    .attr('fill',"#C940C9")
    .attr('cx',pointD.x)
    .attr('cy',pointD.y)
    .attr('class','circleHandle')  
    .on('mouseover',function(){  d3.select(this).attr('fill',"#B6B623")})
    .on('mouseout',function(){ d3.select(this).attr('fill',"#FFFFFF")  })
    .attr('transform','translate(200,200)scale(2)')  
}