var w = 1000,
    h = 1000;
var M = 50;
var vis = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("basis");
//Example usage function
var d = draw_curve(100, 0 , 400, 200, 100);

var lineGraph = vis.append("path")
                .attr("d", d)
                .attr("stroke", "red")
                .attr("stroke-width", 10)
                .attr("fill", "none");

console.log(d);


/**
 * @params x1, y1, x2, y2 -  coordinates
 * @return attribute D for an SVG PATH
 */
function draw_curve(Ax, Ay, Bx, By, M) {
    var theta = Math.atan((By - Ay) / (Bx - Ax));
    var costheta = ((Bx - Ax) < 0 ? -1 : 1) * Math.cos(theta);
    var sintheta = ((Bx - Ax) < 0 ? -1 : 1) * Math.sin(theta);
    var c = M * sintheta;
    var d = M * costheta;
    var Kx = (Ax + (Bx - Ax) / 2) - c;
    var Ky = (Ay + (By - Ay) / 2) + d;
    return ["M" + Ax, Ay, "Q" + Kx, Ky, " " + Bx, By];
}