Trees and Geo
MIDS W209: Information Visualization

John Alexis Guerra Gómez | john.guerra[at]gmail.com | @duto_guerra
Andy Reagan | andy[at]andyreagan.com | @andyreagan
https://johnguerra.co/lectures/MIDS_W209_Information_Visualization/09_Trees_and_Geo/
Partially based on slides from Tamara Munzner

What We Are Going to Learn

  • How to visualize Trees
    • Node-Link representations
    • Containment representations
    • Tree comparison
  • How to visualize spatial
    • Geo
    • Spatial
University Of California at Berkeley logo

Trees

Tree Definition

  • 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

How Trees Are Stored

  • JSON file
  • GraphML file
  • Table
    • Multiple attributes define hierarchy (e.g. state, city, neighborhood)
    • One attribute defines hierarchy with a separator (e.g. California/San Francisco/Presidio)
    • One attribute defines parent ID

Treemap from Table

Treemap from table
Convert tables to trees
University Of California at Berkeley logo

Trees: Node-link

Idiom: Radial Node-Link Tree

  • Data:
    • Tree
  • Encoding:
    • Link connection marks
    • Point node marks
    • Radial axis orientation
      • Angular proximity: siblings
      • Distance from center: depth in tree
  • Task:
    • Understanding topology, following paths
  • Scalability:
    • 1,000 to 10,000 nodes
Radial Tidy Tree
https://observablehq.com/@d3/radial-tidy-tree

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

Force-Directed Tree

Collapsible Tree

  • Data: tree/network
  • Tasks: navigate connections; locate nodes
  • Considerations:
    • Great for larger datasets

Spacetree

Spacetree: Tree Animation

Spacetree (cont.)

SpaceTree: a novel node-link tree browser

Degree of Interest Tree

DOITrees Revisited: Scalable, Space-Constrained Visualization of Hierarchical Data
University Of California at Berkeley logo

Trees: Containment

Idiom: Treemap

  • Data:
    • Tree
    • One quantitative attribute at leaf nodes
  • Encoding:
    • Area containment marks for hierarchical structure
    • Rectilinear orientation
    • Area encodes quantitative attribute
  • Tasks:
    • Query attribute at leaf nodes
  • Scalability:
    • One million leaf nodes

Link Marks: Connection and Containment

  • Marks as links (vs. nodes):
    • Common case in network drawing
    • 1D case: connection
      • Example: all node-link diagrams
      • Emphasizes topology, path tracing
      • Networks and trees
    • 2D case: containment
      • Example: all treemap variants
      • Emphasizes attribute values at leaves (size coding)
      • Only trees
Connection vs Containment
[Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams. Dong, McGuffin, and Chignell. Proc. InfoVis 2005, p. 57-64.]
Map of the Market
FinViz Stock Market Price changes

Icicle Tree

  • Data: tree
  • Tasks: summarize values/hierarchy; navigate links
  • Considerations:
    • Uses more space than the treemap
    • Better for labels
Icicle Tree
https://observablehq.com/@d3/zoomable-icicle

Icicle Tree (cont.)

  • Data: tree
  • Tasks: summarize values/hierarchy; navigate links; compare values in leaves
  • Considerations:
    • Careful with small edges
Variable Size Icicle Tree
https://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

Radial Treemap
https://observablehq.com/@d3/circle-packing

Kickstarter Projects

All Kickstarter Projects
http://bl.ocks.org/john-guerra/38b1c32154905828f019f35a026b7526/21c8c72f9b8f2009f448d979509948ea27a7c614

Tree Drawing Idioms Comparison

  • Data shown:
    • Link relationships
    • Tree depth
    • Sibling order
  • Design choices:
    • Connection vs. containment link marks
    • Rectilinear vs. radial layout
    • Spatial position channels
  • Considerations:
    • Redundant? Arbitrary?
    • Information density?
      • Avoid wasting space
tree_drawing_comparison
[Quantifying the Space-Efficiency of 2D Graphical Representations of Trees. McGuffin and Robert. Information Visualization 9:2 (2010), 115–140.]
University Of California at Berkeley logo

Tree Comparison

TreeVersity v2

https://treeversity.cattlab.umd.edu

Visualizing Spatial Data

University Of California at Berkeley logo

Geo

Idiom: Choropleth Map

  • Use given spatial data:
    • When central task is understanding spatial relationships
  • Data:
    • Geographic geometry
    • Table with one quantitative attribute per region
  • Encoding:
    • Use given geometry for area mark boundaries
    • Sequential segmented colormap
    • Essentially, geographic heat map

Choropleth Map

  • Familiar
  • Areas encode... state area

Bivariate Choropleth Map

Idiom: Dot Map

  • Good for population density
  • Might require opengl
  • Task summarize

Idiom: Bubble Map

  • Alternative for choropleth
  • Be careful with occlusion

U.S. Grid Map

Population Maps Trickiness

  • Beware!
    • Absolute vs. relative again
  • Population density vs. per capita
    • Investigate with Ben Jones Tableau Public demo
    • Are maps of financial variables just population maps?
      • Yes, unless you look at per capita (relative) numbers

Idiom: Bayesian Surprise Maps

  • Use models of expectations to highlight surprising values
  • Confounds (population) and variance (sparsity)

Bayesian Surprise Map

Types of Trees
Surprise! Bayesian Weighting for De-Biasing Thematic Maps

Idiom: Topographic Map

  • Data:
    • Geographic geometry
  • Scalar spatial field:
    • One quantitative attribute per grid cell
  • Derived data:
    • Isoline geometry
      • Isocontours computed for specific levels of scalar values

Idiom: Cartogram

  • Data:
    • Geographic geometry
    • Continuous value at each geometry
  • Derived data:
    • New geographic geometry: many algorithm choices
  • Then encoded as choropleth

Cartogram 1

Cartogram 2

Cartogram 2
Diffusion-based method for producing density-equalizing maps
University Of California at Berkeley logo

Spatial Data

Idioms: Isosurfaces, Direct Volume Rendering

  • Data:
    • Scalar spatial field
    • One quantitative attribute per grid cell
  • Task:
    • Shape understanding, spatial relationships
  • Isosurface:
    • Derived data: isocontours computed for specific levels of scalar values
  • Direct volume rendering:
    • Transfer function maps scalar values to color, opacity
      • No derived geometry

Isosurfaces Example

Isosurfaces
Two-dimensional dynamics of elasto-inertial turbulence and its role in polymer drag reduction

Vector and Tensor Fields

  • Data:
    • Many attributes per cell
  • Idiom families:
    • Flow glyphs:
      • Purely local
    • Geometric flow:
      • Derived data from tracing particle trajectories
      • Sparse set of seed points
    • Texture flow:
      • Derived data, dense seeds
    • Feature flow:
      • Global computation to detect features
      • Encoded with one of methods above

Vector Fields

  • Empirical study tasks:
    • Finding critical points, identifying their types
    • Identifying what type of critical point is at a specific location
    • Predicting where a particle starting at a specified point will end up (advection)

Vector Field Example

Lorenz vectors

Name That Dynamical System

Lorenz

Idiom: Similarity-Clustered Streamlines

  • Data:
    • 3D vector field
  • Derived data (from field):
    • Streamlines: trajectory particle will follow
  • Derived data (per streamline):
    • Curvature, torsion, tortuosity
    • Signature: complex weighted combination
    • Compute cluster hierarchy across all signatures
    • Encode: color and opacity by cluster
  • Task:
    • Find features, query shape
  • Scalability:
    • Millions of samples, hundreds of streamlines

Streamlines

Wind Map
Original inspiration
University Of California at Berkeley logo

Map Libraries

Mapbox and Tableau

Maps in Tableau

Mapbox + Tableau examples

Votos Fajardo

votosFajardo2

Votos Concejo

votosConcejo

Mapbox and d3

Mapbox d3
University Of California at Berkeley logo

Maps with d3

Map Projections

http://blockbuilder.org/mbostock/3711652

Map Projections

Mike's Maps Tutorial

Command-Line Cartography, Part 1
University Of California at Berkeley logo

Vega-Lite Maps

Vega-Lite API
University Of California at Berkeley logo

What We Learned

  • How to visualize Trees
    • Node-Link representations
    • Containment representations
    • Tree comparison
  • How to visualize spatial
    • Geo
    • Spatial