This packing layout can be used to view the accumulation of a tree-hierarchy, tree graphs in particular. In a way, it's like looking at a standard tree-diagram from above and the overlap and size is an indication of the size of the branch (amount and size of the children). The example below is a random tree-graph of 1500 nodes, refresh to see other examples. See also the close packing layout for a similar concept.

        var packing = new TypeViz.Layout.Pack();
        packing.Size = [800, 800];
        packing.Padding = 1;
        packing.SortAccessor = null;
        packing.ValueAccessor = function (d) { return d.size; };
        packing.ChildrenAccessor = function (d) { return d.kids; };
        packing.TitleAccessor = function (d) { return d.name; };
        var graph = TypeViz.Diagramming.Graph.Utils.createRandomConnectedGraph(1550, 15, true);
        graph.nodes.forEach(function (n) {
            n.data = TypeViz.Maths.RandomInteger(10, 200);
        });
        packing.Layout(graph);
        var nodes = packing.Hierarchy.FlatList;
        var factor = 1;
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            var circle = new TypeViz.SVG.Circle();
            circle.Radius = node.r * factor;
            circle.Opacity = 0.136;
            if (i == 0) { // the root
                circle.Background = TypeViz.Media.Colors.White;
                circle.Stroke = "Silver";
                circle.StrokeThickness = 4;
                circle.Opacity = 1;
            }
            else circle.Background = TypeViz.Media.Colors.RandomBlue;
            circle.Center = new TypeViz.Point(node.x * factor, node.y * factor);
            circle.Title = "Size: " + node.Data;
            canvas.Append(circle);
        }