fresh block

.block

license: mit

README.md

Built with blockbuilder.org

d3.sankey.js

d3.sankey = function() {
    var sankey = {},
        nodeWidth = 5,
        nodePadding = 25,
        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) {
                    if (nextNodes.indexOf(link.target) < 0) {
                        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 *= .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;
};

energy.json

{"nodes":[{"name":"AIS","color":"#00FFFF"},{"name":"BI_METADATA","color":"#AF50FF"},{"name":"BRM","color":"#8C73FF"},{"name":"CDI","color":"#23DCFF"},{"name":"CPE","color":"#D22DFF"},{"name":"KMIDW","color":"#6996FF"},{"name":"KMIDW_CORE","color":"#22DEE6"},{"name":"RPTNC","color":"#46B9FF"},{"name":"DIM_ACCOUNT","color":"#F8FC98"},{"name":"DIM_ACCOUNT_BA","color":"#C684FD"},{"name":"DIM_ADDRESS","color":"#D0FCB5"},{"name":"DIM_ADDRESS_SUBCLASS","color":"#7BE8FD"},{"name":"DIM_ADJUSTMENT_REASON","color":"#80FCEF"},{"name":"DIM_AREA_GROUP","color":"#A8FCD2"},{"name":"DIM_CUSTOMER","color":"#94FCE0"},{"name":"DIM_DEVICE","color":"#E4FCA6"},{"name":"DIM_DEVICE_MODEL","color":"#6CFCFD"},{"name":"DIM_DROP","color":"#8AD4FD"},{"name":"DIM_OFFERING","color":"#BCFCC3"},{"name":"DIM_PRODUCT","color":"#A8ACFD"},{"name":"DIM_PRODUCT_CATALOG","color":"#99C0FD"},{"name":"DIM_PROMOTION","color":"#B798FD"} ],"links":[{"source":0,"target":10,"value":29,"color":"#D0FCB5"},{"source":0,"target":11,"value":4,"color":"#7BE8FD"},{"source":3,"target":8,"value":9,"color":"#F8FC98"},{"source":7,"target":8,"value":1,"color":"#F8FC98"},{"source":5,"target":8,"value":3,"color":"#F8FC98"},{"source":2,"target":8,"value":7,"color":"#F8FC98"},{"source":0,"target":17,"value":12,"color":"#8AD4FD"},{"source":1,"target":17,"value":1,"color":"#8AD4FD"},{"source":0,"target":13,"value":12,"color":"#A8FCD2"},{"source":5,"target":13,"value":1,"color":"#A8FCD2"},{"source":1,"target":13,"value":10,"color":"#A8FCD2"},{"source":3,"target":14,"value":12,"color":"#94FCE0"},{"source":2,"target":12,"value":4,"color":"#80FCEF"},{"source":4,"target":16,"value":6,"color":"#6CFCFD"},{"source":4,"target":15,"value":14,"color":"#E4FCA6"},{"source":5,"target":15,"value":1,"color":"#E4FCA6"},{"source":7,"target":18,"value":7,"color":"#BCFCC3"},{"source":7,"target":20,"value":10,"color":"#99C0FD"},{"source":7,"target":19,"value":15,"color":"#A8ACFD"},{"source":1,"target":19,"value":1,"color":"#A8ACFD"},{"source":7,"target":21,"value":7,"color":"#B798FD"},{"source":6,"target":9,"value":3,"color":"#C684FD"},{"source":2,"target":9,"value":7,"color":"#C684FD"} ]}

index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sankey Particles</title>
<style>
html {
    background-color: white;
}
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;
  fill: black;
  text-shadow: 0 0px 0 black;
}

.link {
  fill: none;
  stroke: none;
  stroke-opacity: 0.3;
}

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

svg {
    font: 13px Roboto;
    fill: white;
    font-stretch: condensed;
    font-weight:550;
    position: absolute;
}

canvas {
  position: absolute;
}
</style>
<h3>Mapping source applications to the Data Warehouse<small>
</h3>
</head>
<body>
<h4>
    This is an example of data flowing from a source database/applcication to the date warehouse dimension/fact table.
<style>
</style>
</h4>

<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.sankey.js" charset="utf-8" type="text/javascript"></script>

    <script type="text/javascript">

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

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d) + " References"; },
    color = d3.scale.category20();

var svg = d3.select("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 sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width,height]);

var path = sankey.link();



d3.json("energy.json", function(energy) {

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

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

  var link = svg.append("g").selectAll(".link")
      .data(energy.links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke", function(d)  {return d.color = d.color ? d.color : "#000";})
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });

  link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.o_value); });

  var node = svg.append("g").selectAll(".node")
      .data(energy.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));

  node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) {return d.color = d.color ? d.color : "#000";})
      .style("stroke","none")
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
    .append("title")
      .text(function(d) { return d.name + "\n" + format(d.o_value); });

  node.append("text")
      .attr("x", -6)
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .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");

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

  var linkExtent = d3.extent(energy.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]);


  energy.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("path.link")
    .each(
      function (d) {
//        if (d.freq < 1) {
        for (var x = 0;x<2;x++) {
          const offset = (Math.random() - .5) * (d.dy - 4);
          if (Math.random() < d.freq) {
            const 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) {
    const context = d3.select("canvas").node().getContext("2d")

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

      context.fillStyle = 'gray';
      context.lineWidth = '1px';
    for (const x in particles) {
        const currentTime = elapsed - particles[x].time;
//        var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
        particles[x].current = currentTime * .15 * particles[x].speed;
        const 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);
    });
});

    </script>
</body>
</html>