sankey.js

var Sankey = function(opts) {
  this.opts        = opts;
  this.el          = $("#" + this.opts.el);
  this.graphsReady = 0;
  this.graphWidth  = this.el.width();
};

Sankey.prototype.initPaper = function() {
  this.paper = Raphael(document.getElementById(this.opts.el));
};

Raphael.fn.arrowHead = function (x1, y1, x2, y2, width, height, direction) {
  var LDirections = [];
  direction = (direction || "right");
  if (direction === "right") {
    LDirections.push([x2 - width, y2 - height, x2 - width, y2 + height]);
  } else {
    LDirections.push([x2 + width, y2 + height, x2 + width, y2 - height]);
  };
  return this.path([
    "M",
    x2,
    y2,
    "L",
    LDirections[0],
    LDirections[1],
    "L",
    LDirections[2],
    LDirections[3],
    "L",
    x2,
    y2
  ]);
};

Sankey.prototype.qBPath = function(ox, oy, dx, dy, curve_ratio) {
  var curve = ((dx-ox) * curve_ratio);
  var path = [
    "M", 
    ox,
    oy, 
    "Q",
    ox+curve,
    oy,
    (ox+dx)/2,
    (oy+dy)/2,
    "Q",
    dx-curve,
    dy,
    dx,
    dy
  ];
  return path;
};

Sankey.prototype.qBSelfPath = function(ox, oy, dx, dy, curve_ratio, flip) {
  var flip = (flip || 1)
  return ["M", ox, oy, 'A', 5, 10, 0, 1, flip, dx, dy];
};

// fromEl, toEl, lineWidth, color
Sankey.prototype.setLine = function(opts) {
  var NUDGE      = 4
  var lineSet    = this.paper.set();
  var color      = (opts.color || "#000000");
  var lineWidth  = (opts.lineWidth || 1);
  var curveRatio = (opts.curveRatio || "0.25");
  var fromOffset = (opts.fromEl ? opts.fromEl.position().top : opts.fromOffset) + NUDGE;
  var toOffset   = (opts.toEl   ? opts.toEl.position().top   : opts.toOffset) + NUDGE;
  var xOffset    = (opts.xOffset || 0);
  var toId       = (opts.toId || "");
  var fromId     = (opts.fromId || "");
  var paperPath;
  var flip;

  if (opts.selfPath) {
     flip = toOffset < fromOffset ? "0" : "1"
     paperPath = this.qBSelfPath(
        15 + xOffset,
        (fromOffset + (lineWidth / 2)),
        15, // back off 15px from graph start for arrowheads
        (toOffset + (lineWidth / 2)),
        curveRatio, flip
      );
  } else {
     paperPath = this.qBPath(
        0 + xOffset,
        (fromOffset + (lineWidth / 2)),
        (this.graphWidth - 15), //back off 15px for arrowheads
        (toOffset + (lineWidth / 2)),
        curveRatio
      );
  }
  var path = this.paper.path(paperPath).attr({stroke : color, "stroke-width" : lineWidth});
  var arrowHead;
  if (opts.selfPath) {
    arrowHead = this.paper.arrowHead(
        15 + xOffset, (toOffset + (lineWidth / 2)),
        0,  (toOffset + (lineWidth / 2)),
        15, (lineWidth / 2), 'left'
      ).attr({fill : color, stroke: color});
  } else {
    arrowHead = this.paper.arrowHead(
        (this.graphWidth - 15) + xOffset, (toOffset + (lineWidth / 2)), 
        this.graphWidth,      (toOffset + (lineWidth / 2)), 
        15, (lineWidth / 2), 'right').attr({fill : color, stroke: color});        
  }
  // need to add an attribute so we can show/hide lines
  $(path.node).attr("from-id", fromId);
  $(path.node).attr("to-id", toId);
  $(arrowHead.node).attr("from-id", fromId);
  $(arrowHead.node).attr("to-id", toId);
};