Indented Trees

View full screen.

Indented trees are widely-used to represent file systems, among other applications. Although indented trees require much vertical space and do not easily facilitate multiscale inference, they do allow efficient interactive exploration of the tree to find a specific node.

In addition, the indent layout allows rapid scanning of node labels, and multivariate data such as file size can be displayed adjacent to the hierarchy. Click on package nodes to expand and collapse the descendants.

Next: Circle Packing

Source

<html>
  <head>
    <title>Indented Tree</title>
    <link rel="stylesheet" type="text/css" href="ex.css"/>
    <script type="text/javascript" src="../protovis-d3.2.js"></script>
    <script type="text/javascript" src="flare.js"></script>
  </head>
  <body>
    <script type="text/javascript+protovis">

var root = pv.dom(flare)
    .root("flare")
    .sort(function(a, b) pv.naturalOrder(a.nodeName, b.nodeName));

/* Recursively compute the package sizes. */
root.visitAfter(function(n) {
  if (n.firstChild) {
    n.nodeValue = pv.sum(n.childNodes, function(n) n.nodeValue);
  }
});

var vis = new pv.Panel()
    .width(260)
    .height(function() (root.nodes().length + 1) * 12)
    .margin(5);

var layout = vis.add(pv.Layout.Indent)
    .nodes(function() root.nodes())
    .depth(12)
    .breadth(12);

layout.link.add(pv.Line);

var node = layout.node.add(pv.Panel)
    .top(function(n) n.y - 6)
    .height(12)
    .right(6)
    .strokeStyle(null)
    .events("all")
    .event("mousedown", toggle);

node.anchor("left").add(pv.Dot)
    .strokeStyle("#1f77b4")
    .fillStyle(function(n) n.toggled ? "#1f77b4" : n.firstChild ? "#aec7e8" : "#ff7f0e")
    .title(function t(d) d.parentNode ? (t(d.parentNode) + "." + d.nodeName) : d.nodeName)
  .anchor("right").add(pv.Label)
    .text(function(n) n.nodeName);

node.anchor("right").add(pv.Label)
    .textStyle(function(n) n.firstChild || n.toggled ? "#aaa" : "#000")
    .text(function(n) (n.nodeValue >> 10) + "KB");

vis.render();

/* Toggles the selected node, then updates the layout. */
function toggle(n) {
  n.toggle(pv.event.altKey);
  return layout.reset().root;
}

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

Data

var flare = {
  analytics: {
    cluster: {
      AgglomerativeCluster: 3938,
      CommunityStructure: 3812,
      HierarchicalCluster: 6714,
      MergeEdge: 743
    },
    graph: {
      BetweennessCentrality: 3534,
      LinkDistance: 5731,
      MaxFlowMinCut: 7840,
      ShortestPaths: 5914,
      SpanningTree: 3416
    },
    optimization: {
      AspectRatioBanker: 7074
    }
  },
  animate: {
    Easing: 17010,
    FunctionSequence: 5842,
    interpolate: {
      ArrayInterpolator: 1983,
      ColorInterpolator: 2047,
      DateInterpolator: 1375,
      Interpolator: 8746,
      MatrixInterpolator: 2202,
      NumberInterpolator: 1382,
      ObjectInterpolator: 1629,
      PointInterpolator: 1675,
      RectangleInterpolator: 2042
    },
    ISchedulable: 1041,
    Parallel: 5176,
    Pause: 449,
    Scheduler: 5593,
    Sequence: 5534,
    Transition: 9201,
    Transitioner: 19975,
    TransitionEvent: 1116,
    Tween: 6006
  },
  data: {
    converters: {
      Converters: 721,
      DelimitedTextConverter: 4294,
      GraphMLConverter: 9800,
      IDataConverter: 1314,
      JSONConverter: 2220
    },
    DataField: 1759,
    DataSchema: 2165,
    DataSet: 586,
    DataSource: 3331,
    DataTable: 772,
    DataUtil: 3322
  },
  display: {
    DirtySprite: 8833,
    LineSprite: 1732,
    RectSprite: 3623,
    TextSprite: 10066
  },
  flex: {
    FlareVis: 4116
  },
  physics: {
    DragForce: 1082,
    GravityForce: 1336,
    IForce: 319,
    NBodyForce: 10498,
    Particle: 2822,
    Simulation: 9983,
    Spring: 2213,
    SpringForce: 1681
  },
  query: {
    AggregateExpression: 1616,
    And: 1027,
    Arithmetic: 3891,
    Average: 891,
    BinaryExpression: 2893,
    Comparison: 5103,
    CompositeExpression: 3677,
    Count: 781,
    DateUtil: 4141,
    Distinct: 933,
    Expression: 5130,
    ExpressionIterator: 3617,
    Fn: 3240,
    If: 2732,
    IsA: 2039,
    Literal: 1214,
    Match: 3748,
    Maximum: 843,
    methods: {
      add: 593,
      and: 330,
      average: 287,
      count: 277,
      distinct: 292,
      div: 595,
      eq: 594,
      fn: 460,
      gt: 603,
      gte: 625,
      iff: 748,
      isa: 461,
      lt: 597,
      lte: 619,
      max: 283,
      min: 283,
      mod: 591,
      mul: 603,
      neq: 599,
      not: 386,
      or: 323,
      orderby: 307,
      range: 772,
      select: 296,
      stddev: 363,
      sub: 600,
      sum: 280,
      update: 307,
      variance: 335,
      where: 299,
      xor: 354,
      _: 264
    },
    Minimum: 843,
    Not: 1554,
    Or: 970,
    Query: 13896,
    Range: 1594,
    StringUtil: 4130,
    Sum: 791,
    Variable: 1124,
    Variance: 1876,
    Xor: 1101
  },
  scale: {
    IScaleMap: 2105,
    LinearScale: 1316,
    LogScale: 3151,
    OrdinalScale: 3770,
    QuantileScale: 2435,
    QuantitativeScale: 4839,
    RootScale: 1756,
    Scale: 4268,
    ScaleType: 1821,
    TimeScale: 5833
  },
  util: {
    Arrays: 8258,
    Colors: 10001,
    Dates: 8217,
    Displays: 12555,
    Filter: 2324,
    Geometry: 10993,
    heap: {
      FibonacciHeap: 9354,
      HeapNode: 1233
    },
    IEvaluable: 335,
    IPredicate: 383,
    IValueProxy: 874,
    math: {
      DenseMatrix: 3165,
      IMatrix: 2815,
      SparseMatrix: 3366
    },
    Maths: 17705,
    Orientation: 1486,
    palette: {
      ColorPalette: 6367,
      Palette: 1229,
      ShapePalette: 2059,
      SizePalette: 2291
    },
    Property: 5559,
    Shapes: 19118,
    Sort: 6887,
    Stats: 6557,
    Strings: 22026
  },
  vis: {
    axis: {
      Axes: 1302,
      Axis: 24593,
      AxisGridLine: 652,
      AxisLabel: 636,
      CartesianAxes: 6703
    },
    controls: {
      AnchorControl: 2138,
      ClickControl: 3824,
      Control: 1353,
      ControlList: 4665,
      DragControl: 2649,
      ExpandControl: 2832,
      HoverControl: 4896,
      IControl: 763,
      PanZoomControl: 5222,
      SelectionControl: 7862,
      TooltipControl: 8435
    },
    data: {
      Data: 20544,
      DataList: 19788,
      DataSprite: 10349,
      EdgeSprite: 3301,
      NodeSprite: 19382,
      render: {
        ArrowType: 698,
        EdgeRenderer: 5569,
        IRenderer: 353,
        ShapeRenderer: 2247
      },
      ScaleBinding: 11275,
      Tree: 7147,
      TreeBuilder: 9930
    },
    events: {
      DataEvent: 2313,
      SelectionEvent: 1880,
      TooltipEvent: 1701,
      VisualizationEvent: 1117
    },
    legend: {
      Legend: 20859,
      LegendItem: 4614,
      LegendRange: 10530
    },
    operator: {
      distortion: {
        BifocalDistortion: 4461,
        Distortion: 6314,
        FisheyeDistortion: 3444
      },
      encoder: {
        ColorEncoder: 3179,
        Encoder: 4060,
        PropertyEncoder: 4138,
        ShapeEncoder: 1690,
        SizeEncoder: 1830
      },
      filter: {
        FisheyeTreeFilter: 5219,
        GraphDistanceFilter: 3165,
        VisibilityFilter: 3509
      },
      IOperator: 1286,
      label: {
        Labeler: 9956,
        RadialLabeler: 3899,
        StackedAreaLabeler: 3202
      },
      layout: {
        AxisLayout: 6725,
        BundledEdgeRouter: 3727,
        CircleLayout: 9317,
        CirclePackingLayout: 12003,
        DendrogramLayout: 4853,
        ForceDirectedLayout: 8411,
        IcicleTreeLayout: 4864,
        IndentedTreeLayout: 3174,
        Layout: 7881,
        NodeLinkTreeLayout: 12870,
        PieLayout: 2728,
        RadialTreeLayout: 12348,
        RandomLayout: 870,
        StackedAreaLayout: 9121,
        TreeMapLayout: 9191
      },
      Operator: 2490,
      OperatorList: 5248,
      OperatorSequence: 4190,
      OperatorSwitch: 2581,
      SortOperator: 2023
    },
    Visualization: 16540
  }
};