just another inlet to tributary

inlet.js

amplitude = 5;
freq = 13;
freq2 = 2;
var data1 = [{x:0,y:0},
             {x:12,y:39},
             {x:333,y:33},
             {x:390,y:-31},
             {x:106,y:-36},
             {x:19,y:97}];

var entirePath = [];
// Modes form Point to Point
	// Left to Right
	// Top to Bottom
	// Or Combi
toogle = 1;
//A,F;G;H;I,L,X,Y,Z
   
function toPath (data){
	var path = 'M0,0'
        
        for(i in data ){
          	var p = data[i];
        	var nextPoint = data[parseInt(i)+1];	
         	
          	path += 'L'+p.x+','+p.y;
					
          if(i < (data.length-1)){
			var two_point_form = (nextPoint.y - p.y) / (nextPoint.x - p.x);
			if(nextPoint.x >= p.x){

                  for(var j = p.x; j < nextPoint.x-1; j++){ 
                    	path = addElements(path, j, p, two_point_form);
	                };   
                  }  
            	
            if(nextPoint.x <= p.x){
              
              
              for(var j = p.x; j >= nextPoint.x-1; j--){
				path = addElements(path, j, p,two_point_form);

              } 
              
               
            }
            	
                  
            	
          }  
        	
        } 
  		//path += 'Z';

	return path; 
}


function addElements(path, j, p,two_point_form){

 var x = j;
 var y = (two_point_form * (j - p.x)) + p.y;
  
  if(j % freq == 0) {
    x+= (8 * toogle)
    y-= (amplitude * toogle)
    toogle *= -1;
    //path += 'Q'+(x)+','+(y+46.23136)+','+x+','+(y)
    createCircle({x:x,y:y},"#CCFF00")
    path += 'L'+x+','+(y)
    
    return path
  }
  
  
  if(j % freq2 == 0) {
	//path += 'Q'+(x)+','+(y)+','+x+','+(y)

  }else{
  	
  }
   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('stroke-linejoin','round')
  	.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',color)
    .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',"#54B9FC")  })
    .attr('transform','translate(200,200)scale(2)')  
}