just another inlet to tributary

inlet.js

var type = ["linear",        "step-before",
            "step-after",    "basis",
            "basis-open",    "basis-closed",
			"bundle",        "cardinal",
            "cardinal-open", "cardinal-closed",
			"monotone"];

var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })

var data1 = [{x:0,y:0},
             {x:262,y:-54},
             {x:333,y:-55.8},
             {x:409,y:57}];


//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];
				var rangeX = Math.abs(data[i].x - data[temp].x);
            	var rangeY = Math.abs(data[i].y - data[temp].y);
            	
            	var two_point_form = (data[temp].y - data[i].y) /
                    		(data[temp].x - data[i].x);
            
 				var max = Math.max(nextPoint.x,p.x) 
                var min = Math.min(nextPoint.x,p.x)
                console.log('max',max,'min',min,'------------------------') 
                 
            	for(var j = min; j <= max; j++){ 
                  var x = Math.sin(j/32)*61;
                  var y = Math.cos((j*two_point_form));
                  console.log('Iterate',j)  
                  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',4)
    .attr('stroke',color)
    .attr('stroke-width',2)
    .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)')  
}