Today administrivia tree visualization

Download 3.2 Mb.
Hajmi3.2 Mb.



  • How are project proposals coming along?

  • If you have questions, concerns, or are seeking advice, come to my office hours!!

    • Today, 1-2:30pm - 210 South Hall
    • Appointments also possible

Graphs and Trees

  • Graphs:

    • Representations of structured, connected data
    • Consist of a set of nodes (data) and a set of edges (relations)
  • Trees:

Tree Visualization

  • File Hierarchy in computer

  • Need to navigate through the hierarchy to find a particular file

  • Two common problems: “Where am I?” and “Where is the file that I am looking for?”

Tree Visualization

  • Organizational Chart

Tree Visualization

  • Tournaments

Tree Visualization

  • Family Trees

Tree Visualization

  • Family Trees

Tree Visualization

  • Evolutionary Trees

Tree Visualization

  • Evolutionary Trees

Tree Visualization

Tree Visualization Approaches

  • Node-Link Diagrams

    • Reingold-Tilford Layout
    • Radial Layout
    • Indented Layout
    • Cone Trees & Balloon Trees
    • Hyperbolic Trees
  • Enclosure Diagrams

    • TreeMaps
    • Voronoi TreeMaps
    • Jigsaw Maps
  • Alternative Approaches

    • Icicle Trees
    • Sunburst Diagrams
    • Cascaded Lists

Reingold-Tilford Layout

Radial Layout

Indented Layout

Cone Trees

Balloon Trees

  • flattened cone trees

Hyperbolic Trees


Voronoi TreeMaps

  • TreeMaps that divide space using arbitrary polygons based on Voronoi tesselations.

Jigsaw Maps

  • Space-filling technique from Martin Wattenberg - a mathematical experiment at trying to achieve a “perfect” layout.

  • Uses the mathematics of space-filling curves.

Icicle Trees

  • Edges implied by adjacency and spatial relationship.

Sunburst Diagrams

  • Radial version of icicle trees.

Cascaded Lists

More advanced trees…

  • We can augment the approaches we’ve seen so far with additional visualization and interaction techniques. Some examples:

  • Degree-of-Interest Trees / SpaceTree

    • top-down node-link diagrams with focus+context
  • Elastic Hierarchies

    • node-link diagrams crossed with treemaps
  • Dual Trees

    • bi-directional top-down node-link diagrams
    • developed for genealogical graphs

degree-of-interest trees

elastic hierarchies

  • hybrid of node-link diagrams and treemaps


  • a bidirectional tree visualization designed for navigating genealogical graphs (family “trees”)

So what technique to use?

  • A cautionary tale:

    • CHI Browse-off and evaluation of the hyperbolic tree
    • What makes the difference: the car or the driver?
  • Reading

    • People read faster by scanning in lines (not arcs!)
  • Convention

    • Does your application domain have established conventions? How can you leverage or augment those?
  • Designs with multiple visual components

    • How much screen real-estate do you give the tree?
    • (Sometimes that indented tree works the best!)

Design Exercise

  • Brainstorm new visualizations for family “trees”

  • Choose an aspect *NOT* covered by current designs

  • Here are some of the complications to consider:

    • People as individuals / Couples as reproductive units
    • Ordering by Generation vs. Time
    • Divorce/Death/Remarriage
    • Polygamy
    • Incest (!)
    • Social vs. Biological lineages?
  • Think of important questions a visualization should answer, use them to motivate the design

    • Are two people related? In how many ways?
  • Work in groups of 3 or more. You will be asked to briefly present your ideas to the class on Monday!

Download 3.2 Mb.

Do'stlaringiz bilan baham:

Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan © 2020
ma'muriyatiga murojaat qiling