Mess Around 2

.block

license: mit

README.md

Built with blockbuilder.org

d3.sankey1.js

var units = "Widgets";

var margin = {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
  },
  width = 600 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var formatNumber = d3.format(",.0f"), // zero decimal places
  format = function(d) {
    return formatNumber(d) + " " + units;
  },
  color = d3.scale.category20();

// append the svg canvas to the page
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

var defs = svg.append("defs");

// Set the sankey diagram properties
var sankey = d3sankey()
  .nodeWidth(25)
  .nodePadding(15)
  .size([width, height]);

var path = sankey.link();

// load the data
var graph = getData();

sankey.nodes(graph.nodes)
  .links(graph.links)
  .layout(32);

// define utility functions
function getGradID(d) {
  return "linkGrad-" + d.source.name + "-" + d.target.name;
}

function nodeColor(d) {
  return d.color = color(d.name.replace(/ .*/, ""));
}

// create gradients for the links

var grads = defs.selectAll("linearGradient")
  .data(graph.links, getGradID);

grads.enter().append("linearGradient")
  .attr("id", getGradID)
  .attr("gradientUnits", "userSpaceOnUse");

function positionGrads() {
  grads.attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });
}
positionGrads();

grads.html("") //erase any existing <stop> elements on update
  .append("stop")
  .attr("offset", "0%")
  .attr("stop-color", function(d) {
    return nodeColor((+d.source.x <= +d.target.x) ?
      d.source : d.target);
  });

grads.append("stop")
  .attr("offset", "100%")
  .attr("stop-color", function(d) {
    return nodeColor((+d.source.x > +d.target.x) ?
      d.source : d.target)
  });

// add in the links
var link = svg.append("g").selectAll(".link")
  .data(graph.links)
  .enter().append("path")
  .attr("class", "link")
  .attr("d", path)
  .style("fill", "none")
  .style("stroke", function(d) {
    return "url(#" + getGradID(d) + ")";
  })
  .style("stroke-opacity", "0.4")
  .on("mouseover", function() {
    d3.select(this).style("stroke-opacity", "0.7")
  })
  .on("mouseout", function() {
    d3.select(this).style("stroke-opacity", "0.4")
  })
  .style("stroke-width", function(d) {
    return Math.max(1, d.dy);
  })
  .sort(function(a, b) {
    return b.dy - a.dy;
  });

// add the link titles
link.append("title")
  .text(function(d) {
    return d.source.name + " → " + d.target.name + "\n" + format(d.value);
  });

// add in the nodes
var node = svg.append("g").selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })
  .call(d3.behavior.drag()
    .origin(function(d) {
      return d;
    })
    .on("dragstart", function() {
      this.parentNode.appendChild(this);
    })
    .on("drag", dragmove));

// add the rectangles for the nodes
node.append("rect")
  .attr("height", function(d) {
    return d.dy;
  })
  .attr("width", sankey.nodeWidth())
  .style("fill", function(d) {
    return d.color = color(d.name.replace(/ .*/, ""));
  })
  .style("fill-opacity", ".9")
  .style("shape-rendering", "crispEdges")
  .style("stroke", function(d) {
    //return d3.rgb(d.color).darker(2);
  })
  .append("title")
  .text(function(d) {
    return d.name + "\n" + format(d.value);
  });

// add in the title for the nodes
node.append("text")
  .attr("x", -6)
  .attr("y", function(d) {
    return d.dy / 2;
  })
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .attr("text-shadow", "0 1px 0 #fff")
  .attr("transform", null)
  .text(function(d) {
    return d.name;
  })
  .filter(function(d) {
    return d.x < width / 2;
  })
  .attr("x", 6 + sankey.nodeWidth())
  .attr("text-anchor", "start");

// the function for moving the nodes
function dragmove(d) {
  d3.select(this).attr("transform",
    "translate(" + (
      d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))) + "," + (
      d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
  sankey.relayout();
  link.attr("d", path);
  positionGrads();
};

function getData() {
  return {
        "nodes":[{"name":"AIS"},
            {"name":"BI_METADATA"},
            {"name":"BRM"},
            {"name":"CDI"},
            {"name":"CPE"},
            {"name":"KMIDW"},
            {"name":"KMIDW_CORE"},
            {"name":"RPTNC"},
            {"name":"DIM_ACCOUNT"},
            {"name":"DIM_ACCOUNT_BA"},
            {"name":"DIM_ADDRESS"},
            {"name":"DIM_ADDRESS_SUBCLASS"},
            {"name":"DIM_ADJUSTMENT_REASON"},
            {"name":"DIM_AREA_GROUP"},
            {"name":"DIM_CUSTOMER"},
            {"name":"DIM_DEVICE"},
            {"name":"DIM_DEVICE_MODEL"},
            {"name":"DIM_DROP"},
            {"name":"DIM_OFFERING"},
            {"name":"DIM_PRODUCT"},
            {"name":"DIM_PRODUCT_CATALOG"},
            {"name":"DIM_PROMOTION"}
        ],
        "links":[
            {"source":0,"target":10,"value":29},
            {"source":0,"target":11,"value":4},
            {"source":3,"target":8,"value":9},
            {"source":7,"target":8,"value":1},
            {"source":5,"target":8,"value":3},
            {"source":2,"target":8,"value":7},
            {"source":0,"target":17,"value":12},
            {"source":1,"target":17,"value":1},
            {"source":0,"target":13,"value":12},
            {"source":5,"target":13,"value":1},
            {"source":1,"target":13,"value":10},
            {"source":3,"target":14,"value":12},
            {"source":2,"target":12,"value":4},
            {"source":4,"target":16,"value":6},
            {"source":4,"target":15,"value":14},
            {"source":5,"target":15,"value":1},
            {"source":7,"target":18,"value":7},
            {"source":7,"target":20,"value":10},
            {"source":7,"target":19,"value":15},
            {"source":1,"target":19,"value":1},
            {"source":7,"target":21,"value":7},
            {"source":6,"target":9,"value":3},
            {"source":2,"target":9,"value":7} ]}
}

function d3sankey() {
  var sankey = {},
    nodeWidth = 20,
    nodePadding = 8,
    size = [1, 1],
    nodes = [],
    links = [];

  sankey.nodeWidth = function(_) {
    if (!arguments.length) return nodeWidth;
    nodeWidth = +_;
    return sankey;
  };

  sankey.nodePadding = function(_) {
    if (!arguments.length) return nodePadding;
    nodePadding = +_;
    return sankey;
  };

  sankey.nodes = function(_) {
    if (!arguments.length) return nodes;
    nodes = _;
    return sankey;
  };

  sankey.links = function(_) {
    if (!arguments.length) return links;
    links = _;
    return sankey;
  };

  sankey.size = function(_) {
    if (!arguments.length) return size;
    size = _;
    return sankey;
  };

  sankey.layout = function(iterations) {
    computeNodeLinks();
    computeNodeValues();
    computeNodeBreadths();
    computeNodeDepths(iterations);
    computeLinkDepths();
    return sankey;
  };

  sankey.relayout = function() {
    computeLinkDepths();
    return sankey;
  };

  sankey.link = function() {
    var curvature = .5;

    function link(d) {
      var x0 = d.source.x + d.source.dx,
        x1 = d.target.x,
        xi = d3.interpolateNumber(x0, x1),
        x2 = xi(curvature),
        x3 = xi(1 - curvature),
        y0 = d.source.y + d.sy + d.dy / 2,
        y1 = d.target.y + d.ty + d.dy / 2;
      return "M" + x0 + "," + y0 + "C" + x2 + "," + y0 + " " + x3 + "," + y1 + " " + x1 + "," + y1;
    }

    link.curvature = function(_) {
      if (!arguments.length) return curvature;
      curvature = +_;
      return link;
    };

    return link;
  };

  // Populate the sourceLinks and targetLinks for each node.
  // Also, if the source and target are not objects, assume they are indices.
  function computeNodeLinks() {
    nodes.forEach(function(node) {
      node.sourceLinks = [];
      node.targetLinks = [];
    });
    links.forEach(function(link) {
      var source = link.source,
        target = link.target;
      if (typeof source === "number") source = link.source = nodes[link.source];
      if (typeof target === "number") target = link.target = nodes[link.target];
      source.sourceLinks.push(link);
      target.targetLinks.push(link);
    });
  }

  // Compute the value (size) of each node by summing the associated links.
  function computeNodeValues() {
    nodes.forEach(function(node) {
      node.value = Math.max(
        d3.sum(node.sourceLinks, value),
        d3.sum(node.targetLinks, value));
    });
  }

  // Iteratively assign the breadth (x-position) for each node.
  // Nodes are assigned the maximum breadth of incoming neighbors plus one;
  // nodes with no incoming links are assigned breadth zero, while
  // nodes with no outgoing links are assigned the maximum breadth.
  function computeNodeBreadths() {
    var remainingNodes = nodes,
      nextNodes,
      x = 0;

    while (remainingNodes.length) {
      nextNodes = [];
      remainingNodes.forEach(function(node) {
        node.x = x;
        node.dx = nodeWidth;
        node.sourceLinks.forEach(function(link) {
          nextNodes.push(link.target);
        });
      });
      remainingNodes = nextNodes;
      ++x;
    }

    //
    moveSinksRight(x);
    scaleNodeBreadths((size[0] - nodeWidth) / (x - 1));
  }

  function moveSourcesRight() {
    nodes.forEach(function(node) {
      if (!node.targetLinks.length) {
        node.x = d3.min(node.sourceLinks, function(d) {
          return d.target.x;
        }) - 1;
      }
    });
  }

  function moveSinksRight(x) {
    nodes.forEach(function(node) {
      if (!node.sourceLinks.length) {
        node.x = x - 1;
      }
    });
  }

  function scaleNodeBreadths(kx) {
    nodes.forEach(function(node) {
      node.x *= kx;
    });
  }

  function computeNodeDepths(iterations) {
    var nodesByBreadth = d3.nest()
      .key(function(d) {
        return d.x;
      })
      .sortKeys(d3.ascending)
      .entries(nodes)
      .map(function(d) {
        return d.values;
      });

    //
    initializeNodeDepth();
    resolveCollisions();
    for (var alpha = 1; iterations > 0; --iterations) {
      relaxRightToLeft(alpha *= 0.99);
      resolveCollisions();
      relaxLeftToRight(alpha);
      resolveCollisions();
    }

    function initializeNodeDepth() {
      var ky = d3.min(nodesByBreadth, function(nodes) {
        return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value);
      });

      nodesByBreadth.forEach(function(nodes) {
        nodes.forEach(function(node, i) {
          node.y = i;
          node.dy = node.value * ky;
        });
      });

      links.forEach(function(link) {
        link.dy = link.value * ky;
      });
    }

    function relaxLeftToRight(alpha) {
      nodesByBreadth.forEach(function(nodes, breadth) {
        nodes.forEach(function(node) {
          if (node.targetLinks.length) {
            var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
            node.y += (y - center(node)) * alpha;
          }
        });
      });

      function weightedSource(link) {
        return center(link.source) * link.value;
      }
    }

    function relaxRightToLeft(alpha) {
      nodesByBreadth.slice().reverse().forEach(function(nodes) {
        nodes.forEach(function(node) {
          if (node.sourceLinks.length) {
            var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
            node.y += (y - center(node)) * alpha;
          }
        });
      });

      function weightedTarget(link) {
        return center(link.target) * link.value;
      }
    }

    function resolveCollisions() {
      nodesByBreadth.forEach(function(nodes) {
        var node,
          dy,
          y0 = 0,
          n = nodes.length,
          i;

        // Push any overlapping nodes down.
        nodes.sort(ascendingDepth);
        for (i = 0; i < n; ++i) {
          node = nodes[i];
          dy = y0 - node.y;
          if (dy > 0) node.y += dy;
          y0 = node.y + node.dy + nodePadding;
        }

        // If the bottommost node goes outside the bounds, push it back up.
        dy = y0 - nodePadding - size[1];
        if (dy > 0) {
          y0 = node.y -= dy;

          // Push any overlapping nodes back up.
          for (i = n - 2; i >= 0; --i) {
            node = nodes[i];
            dy = node.y + node.dy + nodePadding - y0;
            if (dy > 0) node.y -= dy;
            y0 = node.y;
          }
        }
      });
    }

    function ascendingDepth(a, b) {
      return a.y - b.y;
    }
  }

  function computeLinkDepths() {
    nodes.forEach(function(node) {
      node.sourceLinks.sort(ascendingTargetDepth);
      node.targetLinks.sort(ascendingSourceDepth);
    });
    nodes.forEach(function(node) {
      var sy = 0,
        ty = 0;
      node.sourceLinks.forEach(function(link) {
        link.sy = sy;
        sy += link.dy;
      });
      node.targetLinks.forEach(function(link) {
        link.ty = ty;
        ty += link.dy;
      });
    });

    function ascendingSourceDepth(a, b) {
      return a.source.y - b.source.y;
    }

    function ascendingTargetDepth(a, b) {
      return a.target.y - b.target.y;
    }
  }

  function center(node) {
    return node.y + node.dy / 2;
  }

  function value(link) {
    return link.value;
  }

  return sankey;
};

index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Data Warehouse Sankey</title>
<style>
html {
    background-color: whitesmoke;
}
body {
    position: relative;
    font-family: 'Roboto', sans-serif;
    margin: 1em auto 4em auto;
}
.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}

.node text {
  pointer-events: none;
  text-shadow: 0 0px, 2, #fff;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .1;
}

.link:hover {
  stroke-opacity: .85;
}

svg {
    font: 14px Roboto;
    font-stretch: condensed;
    font-weight:600;
    position: absolute;
}

canvas {
  position: absolute;
}
</style>
<h3>Data Warehouse - Tables by source system<small>
</h3>
</head>
<body>
<small>
<canvas width="1000" height="1000" ></canvas>
<svg width="300" height="800" ></svg>

<script src="http://d3js.org/d3.v3.js" charset="utf-8" type="text/javascript"></script>
<script src="d3.sankey1.js" charset="utf-8" type="text/javascript"></script>

    <script type="text/javascript">

var units = "Widgets";

var margin = {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
    },
    width = 300 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

var formatNumber = d3.format(",.0f"), // zero decimal places
    format = function (d) {
        return formatNumber(d) + " " + units;
    },
    color = d3.scale.category20();

// append the svg canvas to the page
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

var defs = svg.append("defs");

// Set the sankey diagram properties
var sankey = d3sankey()
    .nodeWidth(18)
    .nodePadding(20)
    .size([width, height]);

var path = sankey.link();

// load the data
var graph = getData();

var graph.links.forEach(function (d){
    d.o_value=d.value;
    d.value=5
}   )

sankey.nodes(graph.nodes)
    .links(graph.links)
    .layout(32);

// define utility functions
function getLinkID(d){
    return "link-" + d.source.name + "-" + d.target.name;
}
function nodeColor(d) {
    return d.color = color(d.name.replace(/ .*/, ""));
}

// create gradients for the links

var grads = defs.selectAll("linearGradient")
        .data(graph.links, getLinkID);

grads.enter().append("linearGradient")
        .attr("id", getLinkID)
        .attr("gradientUnits", "objectBoundingBox");
                //stretch to fit

grads.html("") //erase any existing <stop> elements on update
    .append("stop")
    .attr("offset", "0%")
    .attr("stop-color", function(d){
        return nodeColor( (+d.source.x <= +d.target.x)?
                         d.source: d.target) ;
    });

grads.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", function(d){
        return nodeColor( (+d.source.x > +d.target.x)?
                         d.source: d.target)
    });

// add in the links
var link = svg.append("g").selectAll(".link")
    .data(graph.links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", path)
    .style("fill", "none")
    .style("stroke", function(d){
        return "url(#" + getLinkID(d) + ")";
    })
    .style("stroke-opacity", "0.4")
    .on("mouseover", function() { d3.select(this).style("stroke-opacity", "0.7") } )
    .on("mouseout", function() { d3.select(this).style("stroke-opacity", "0.6") } )
    .style("stroke-width", function (d) {
        return Math.max(1, d.dy);
    })
    .sort(function (a, b) {
        return b.dy - a.dy;
    });

// add the link titles
link.append("title")
    .text(function (d) {
        return d.source.name + " → " + d.target.name + "\n" + format(d.value);
    });

// add in the nodes
var node = svg.append("g").selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    })
    .call(d3.behavior.drag()
    .origin(function (d) {
        return d;
    })
    .on("dragstart", function () {
        this.parentNode.appendChild(this);
    })
    .on("drag", dragmove));

// add the rectangles for the nodes
node.append("rect")
    .attr("height", function (d) {
        return d.dy;
    })
    .attr("width", sankey.nodeWidth())
    .style("fill", function (d) {
        return d.color = color(d.name.replace(/ .*/, ""));
    })
    .style("fill-opacity", ".9")
    .style("shape-rendering", "crispEdges")
    .style("stroke", function (d) {
        return d3.rgb(d.color).darker(2);
    })
    .append("title")
    .text(function (d) {
        return d.name + "\n" + format(d.value);
    });

// add in the title for the nodes
node.append("text")
    .attr("x", -6)
    .attr("y", function (d) {
        return d.dy / 2;
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .attr("text-shadow", "0 1px 0 #fff")
    .attr("transform", null)
    .text(function (d) {
        return d.name;
    })
    .filter(function (d) {
        return d.x < width / 2;
    })
    .attr("x", 6 + sankey.nodeWidth())
    .attr("text-anchor", "start");

// the function for moving the nodes
function dragmove(d) {
    d3.select(this).attr("transform",
        "translate(" + (
    d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))) + "," + (
    d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
    sankey.relayout();
    link.attr("d", path);
};



function getData() {
    return {
        "nodes":[{"name":"AIS"},
            {"name":"BI_METADATA"},
            {"name":"BRM"},
            {"name":"CDI"},
            {"name":"CPE"},
            {"name":"KMIDW"},
            {"name":"KMIDW_CORE"},
            {"name":"RPTNC"},
            {"name":"DIM_ACCOUNT"},
            {"name":"DIM_ACCOUNT_BA"},
            {"name":"DIM_ADDRESS"},
            {"name":"DIM_ADDRESS_SUBCLASS"},
            {"name":"DIM_ADJUSTMENT_REASON"},
            {"name":"DIM_AREA_GROUP"},
            {"name":"DIM_CUSTOMER"},
            {"name":"DIM_DEVICE"},
            {"name":"DIM_DEVICE_MODEL"},
            {"name":"DIM_DROP"},
            {"name":"DIM_OFFERING"},
            {"name":"DIM_PRODUCT"},
            {"name":"DIM_PRODUCT_CATALOG"},
            {"name":"DIM_PROMOTION"}
        ],
        "links":[
            {"source":0,"target":10,"value":29},
            {"source":0,"target":11,"value":4},
            {"source":3,"target":8,"value":9},
            {"source":7,"target":8,"value":1},
            {"source":5,"target":8,"value":3},
            {"source":2,"target":8,"value":7},
            {"source":0,"target":17,"value":12},
            {"source":1,"target":17,"value":1},
            {"source":0,"target":13,"value":12},
            {"source":5,"target":13,"value":1},
            {"source":1,"target":13,"value":10},
            {"source":3,"target":14,"value":12},
            {"source":2,"target":12,"value":4},
            {"source":4,"target":16,"value":6},
            {"source":4,"target":15,"value":14},
            {"source":5,"target":15,"value":1},
            {"source":7,"target":18,"value":7},
            {"source":7,"target":20,"value":10},
            {"source":7,"target":19,"value":15},
            {"source":1,"target":19,"value":1},
            {"source":7,"target":21,"value":7},
            {"source":6,"target":9,"value":3},
            {"source":2,"target":9,"value":7} ]}
}


function d3sankey() {
    var sankey = {},
        nodeWidth = 10,
        nodePadding = 8,
        size = [1, 1],
        nodes = [],
        links = [];

    sankey.nodeWidth = function (_) {
        if (!arguments.length) return nodeWidth;
        nodeWidth = +_;
        return sankey;
    };

    sankey.nodePadding = function (_) {
        if (!arguments.length) return nodePadding;
        nodePadding = +_;
        return sankey;
    };

    sankey.nodes = function (_) {
        if (!arguments.length) return nodes;
        nodes = _;
        return sankey;
    };

    sankey.links = function (_) {
        if (!arguments.length) return links;
        links = _;
        return sankey;
    };

    sankey.size = function (_) {
        if (!arguments.length) return size;
        size = _;
        return sankey;
    };

    sankey.layout = function (iterations) {
        computeNodeLinks();
        computeNodeValues();
        computeNodeBreadths();
        computeNodeDepths(iterations);
        computeLinkDepths();
        return sankey;
    };

    sankey.relayout = function () {
        computeLinkDepths();
        return sankey;
    };

    sankey.link = function () {
        var curvature = .5;

        function link(d) {
            var x0 = d.source.x + d.source.dx,
                x1 = d.target.x,
                xi = d3.interpolateNumber(x0, x1),
                x2 = xi(curvature),
                x3 = xi(1 - curvature),
                y0 = d.source.y + d.sy + d.dy / 2,
                y1 = d.target.y + d.ty + d.dy / 2;
            return "M" + x0 + "," + y0 + "C" + x2 + "," + y0 + " " + x3 + "," + y1 + " " + x1 + "," + y1;
        }

        link.curvature = function (_) {
            if (!arguments.length) return curvature;
            curvature = +_;
            return link;
        };

        return link;
    };

    // Populate the sourceLinks and targetLinks for each node.
    // Also, if the source and target are not objects, assume they are indices.
    function computeNodeLinks() {
        nodes.forEach(function (node) {
            node.sourceLinks = [];
            node.targetLinks = [];
        });
        links.forEach(function (link) {
            var source = link.source,
                target = link.target;
            if (typeof source === "number") source = link.source = nodes[link.source];
            if (typeof target === "number") target = link.target = nodes[link.target];
            source.sourceLinks.push(link);
            target.targetLinks.push(link);
        });
    }

    // Compute the value (size) of each node by summing the associated links.
    function computeNodeValues() {
        nodes.forEach(function (node) {
            node.value = Math.max(
            d3.sum(node.sourceLinks, value),
            d3.sum(node.targetLinks, value));
        });
    }

    // Iteratively assign the breadth (x-position) for each node.
    // Nodes are assigned the maximum breadth of incoming neighbors plus one;
    // nodes with no incoming links are assigned breadth zero, while
    // nodes with no outgoing links are assigned the maximum breadth.
    function computeNodeBreadths() {
        var remainingNodes = nodes,
            nextNodes,
            x = 0;

        while (remainingNodes.length) {
            nextNodes = [];
            remainingNodes.forEach(function (node) {
                node.x = x;
                node.dx = nodeWidth;
                node.sourceLinks.forEach(function (link) {
                    nextNodes.push(link.target);
                });
            });
            remainingNodes = nextNodes;
            ++x;
        }

        //
        moveSinksRight(x);
        scaleNodeBreadths((size[0] - nodeWidth) / (x - 1));
    }

    function moveSourcesRight() {
        nodes.forEach(function (node) {
            if (!node.targetLinks.length) {
                node.x = d3.min(node.sourceLinks, function (d) {
                    return d.target.x;
                }) - 1;
            }
        });
    }

    function moveSinksRight(x) {
        nodes.forEach(function (node) {
            if (!node.sourceLinks.length) {
                node.x = x - 1;
            }
        });
    }

    function scaleNodeBreadths(kx) {
        nodes.forEach(function (node) {
            node.x *= kx;
        });
    }

    function computeNodeDepths(iterations) {
        var nodesByBreadth = d3.nest()
            .key(function (d) {
            return d.x;
        })
            .sortKeys(d3.ascending)
            .entries(nodes)
            .map(function (d) {
            return d.values;
        });

        //
        initializeNodeDepth();
        resolveCollisions();
        for (var alpha = 1; iterations > 0; --iterations) {
            relaxRightToLeft(alpha *= 0.99);
            resolveCollisions();
            relaxLeftToRight(alpha);
            resolveCollisions();
        }

        function initializeNodeDepth() {
            var ky = d3.min(nodesByBreadth, function (nodes) {
                return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value);
            });

            nodesByBreadth.forEach(function (nodes) {
                nodes.forEach(function (node, i) {
                    node.y = i;
                    node.dy = node.value * ky;
                });
            });

            links.forEach(function (link) {
                link.dy = link.value * ky;
            });
        }

        function relaxLeftToRight(alpha) {
            nodesByBreadth.forEach(function (nodes, breadth) {
                nodes.forEach(function (node) {
                    if (node.targetLinks.length) {
                        var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
                        node.y += (y - center(node)) * alpha;
                    }
                });
            });

            function weightedSource(link) {
                return center(link.source) * link.value;
            }
        }

        function relaxRightToLeft(alpha) {
            nodesByBreadth.slice().reverse().forEach(function (nodes) {
                nodes.forEach(function (node) {
                    if (node.sourceLinks.length) {
                        var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
                        node.y += (y - center(node)) * alpha;
                    }
                });
            });

            function weightedTarget(link) {
                return center(link.target) * link.value;
            }
        }

        function resolveCollisions() {
            nodesByBreadth.forEach(function (nodes) {
                var node,
                dy,
                y0 = 0,
                    n = nodes.length,
                    i;

                // Push any overlapping nodes down.
                nodes.sort(ascendingDepth);
                for (i = 0; i < n; ++i) {
                    node = nodes[i];
                    dy = y0 - node.y;
                    if (dy > 0) node.y += dy;
                    y0 = node.y + node.dy + nodePadding;
                }

                // If the bottommost node goes outside the bounds, push it back up.
                dy = y0 - nodePadding - size[5];
                if (dy > 0) {
                    y0 = node.y -= dy;

                    // Push any overlapping nodes back up.
                    for (i = n - 2; i >= 0; --i) {
                        node = nodes[i];
                        dy = node.y + node.dy + nodePadding - y0;
                        if (dy > 0) node.y -= dy;
                        y0 = node.y;
                    }
                }
            });
        }

        function ascendingDepth(a, b) {
            return a.y - b.y;
        }
    }

    function computeLinkDepths() {
        nodes.forEach(function (node) {
            node.sourceLinks.sort(ascendingTargetDepth);
            node.targetLinks.sort(ascendingSourceDepth);
        });
        nodes.forEach(function (node) {
            var sy = 0,
                ty = 0;
            node.sourceLinks.forEach(function (link) {
                link.sy = sy;
                sy += link.dy;
            });
            node.targetLinks.forEach(function (link) {
                link.ty = ty;
                ty += link.dy;
            });
        });

        function ascendingSourceDepth(a, b) {
            return a.source.y - b.source.y;
        }

        function ascendingTargetDepth(a, b) {
            return a.target.y - b.target.y;
        }
    }

    function center(node) {
        return node.y + node.dy / 2;
    }

    function value(link) {
        return link.value;
    }
    var linkExtent = d3.extent(graph.links, function (d) {return d.o_value});
    var frequencyScale = d3.scale.linear().domain(linkExtent).range([.05,1]);
    var particleSize = d3.scale.linear().domain(linkExtent).range([1,5]);

    graph.links.forEach(function (link) {
        link.freq = frequencyScale(link.o_value);
        link.particleSize = 1.5;
        link.particleColor = d3.scale.linear().domain([1,1])
            .range([link.source.color, link.target.color]);
    })
    var t = d3.timer(tick, 1000);
    var particles = [];

    function tick(elapsed, time) {

        particles = particles.filter(function (d) {return d.current < d.path.getTotalLength()});

        d3.selectAll("graph.link")
            .each(
                function (d) {
//        if (d.freq < 1) {
                    for (var x = 0;x<2;x++) {
                        var offset = (Math.random() - .5) * (d.dy - 4);
                        if (Math.random() < d.freq) {
                            var length = this.getTotalLength();
                            particles.push({link: d, time: elapsed, offset: offset, path: this, length: length, animateTime: length, speed: 1 + (Math.random())})
                        }
                    }

//        }
                    /*        else {
                              for (var x = 0; x<d.freq; x++) {
                                var offset = (Math.random() - .5) * d.dy;
                                particles.push({link: d, time: elapsed, offset: offset, path: this})
                              }
                            } */
                });

        particleEdgeCanvasPath(elapsed);
    }

    function particleEdgeCanvasPath(elapsed) {
        var context = d3.select("canvas").node().getContext("2d")

        context.clearRect(0,0,1000,1000);

        context.fillStyle = "black";
        context.lineWidth = "1px";
        for (var x in particles) {
            var currentTime = elapsed - particles[x].time;
//        var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
            particles[x].current = currentTime * .05 * particles[x].speed;
            var currentPos = particles[x].path.getPointAtLength(particles[x].current);
            context.beginPath();
            context.fillStyle = particles[x].link.particleColor(0);
            context.arc(currentPos.x,currentPos.y + particles[x].offset,particles[x].link.particleSize,1,2*Math.PI);
            context.fill();
        }
    }

    d3.html("foo", function(fragment) {
        parentElement.node().appendChild(fragment);
    });
});

    return sankey;
};