Visualizing Trees


John Alexis Guerra Gómez| ja.guerrag[at]uniandes.edu.co| @duto_guerra
Jose Tiberio Hernández | jhernand[at]uniandes.edu.co
Universidad de los Andes


http://johnguerra.co/lectures/visualAnalytics_fall2019/09_Trees/

Based onslides from Tamara Munzner

Tree

  • Set of nodes and links that express the parent-to-child relationship. Where each node:
    • Is uniquely labeled in the tree.
    • Contains one or more numeric variables with values over time.
    • Contains one or more categorical attributes that may have more than one value.

Types of trees

Types of Trees

Trees

Radial Tree

http://blockbuilder.org/mbostock/4063550by mbostock

Dendogram

http://blockbuilder.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2bby mbostock

Cluster Dendograms Radial

  • Data: Trees
  • Tasks: Summarize common connections.
  • Considerations:
    • Harder to read
    • Better space usage
Radial Dendogramhttps://observablehq.com/@d3/radial-dendrogram

Phylogenetic Trees

  • Data: Tree of Life
  • Tasks: Summarize common connections. Identify Clusters.
  • Considerations:
    • Harder to read
    • Also works with other clusters data
Phylogenetichttps://observablehq.com/@mbostock/tree-of-life

Cluster Dendograms Cartesian

http://blockbuilder.org/mbostock/4063570by mbostock

Collapsible Tree

  • Data: Tree/Network
  • Tasks: Navigate connections. Locate nodes
  • Considerations:
    • Great for larger datasets
CollapsibleTreehttps://observablehq.com/@d3/collapsible-tree

SpaceTree

https://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html

SpaceTree

http://www.cs.umd.edu/hcil/spacetree/

Degree of Interest Tree

http://vis.stanford.edu/papers/doitrees-revisited

Force Directed Tree

http://blockbuilder.org/mbostock/95aa92e2f4e8345aaa55a4a94d41ce37by mbostock

Space Filling Techniques

TreeMap

http://blockbuilder.org/mbostock/6bbb0a7ff7686b124d80by mbostock

TreeMap with parent labels

http://blockbuilder.org/mbostock/911ad09bdead40ec0061by mbostock

How to preprocess data for a treemap

https://observablehq.com/@john-guerra/treemap-from-table
https://finviz.com/map.ashx?t=sec

Icicle Tree

  • Data: Tree
  • Tasks: Summarize values/hierarchy. Navigate links
  • Considerations:
    • Uses more space than the treemap
    • Better for labels
Icicle Treehttps://observablehq.com/@d3/zoomable-icicle

Icicle Tree

  • Data: Tree
  • Tasks: Summarize values/hierarchy. Navigate links. Compare values in leaves
  • Considerations:
    • Careful with small edges
Variable Size Icicle Treehttps://observablehq.com/@john-guerra/zoomable-variable-size-icicle

Sunburst Tree

  • Data: Tree
  • Tasks: Summarize values/hierarchy. Navigate links
  • Considerations:
    • Radial values are confusing
    • Fancy yet difficult animation
Sunburst Treehttps://observablehq.com/@d3/zoomable-sunburst

Radial Treemap

http://blockbuilder.org/mbostock/ca5b03a33affa4160321by mbostock

Kickstarter Projects

http://blockbuilder.org/john-guerra/38b1c32154905828f019f35a026b7526by john-guerra

Tree Comparison

TreeVersity

https://treeversity.cattlab.umd.edu