Information Visualization III Treemaps and Fisheye Views

1
Information Visualization IIITreemaps and
Fisheye Views

• Yaji Sripada

2
In this lecture you learn

• Visualizing large amounts of information in small
  display area
• Visualizing large amounts of hierarchical
  information
• TreeMaps
• A general strategy to Visualizing large amounts
  of information
• Fish eye views

3
Introduction

• Common challenge in designing modern infovis
  tools is
• To visualize large quantities of information in
  small display area
• Two popular solutions
• Treemaps (not Java TreeMaps)
• Visualizing large amounts of hierarchical
  information
• Fisheye views
• Visualizing large amounts of any type of
  information with known user degree of interest
  (DOI)

4
Visualizing Hierarchical Information

• A lot of information in the real world is
  structured hierarchically
• File system structure on an OS such as UNIX
• Family Trees
• User Manuals
• Computer programs
• Etc
• Hierarchical information structure is made up of
• Links and
• Nodes
• Common solutions for visualizing hierarchical
  information
• Listings e.g directory listings on UNIX
• Outlines e.g document outline in MSWord
• Tree diagrams e.g windows explorer

5
Visualizing Content and Structure

• Visualizing large amounts of hierarchical
  information is a challenge
• Users want both the content and the structure of
  hierarchical information
• Listings are good at showing the contents but not
  good at presenting the structure
• Even with full path names listings do not help
  users in building a mental model of the structure
• Outlines show both structure and content
• But require lot of display space
• Both listings and outlines require number of
  lines of display proportional to the number of
  nodes in the hierarchy
• Traditional tree drawings are good only for
  visualizing small trees

6
Requirements

• Visualization scheme should utilise the 100
  available display space
• Traditional tree drawings utilise only 50 of
  available space
• Users should be able to control the properties of
  the visualization such as
• Depth of the tree and
• Content of the tree
• Visualization should be readable
• Users should find it easy to scan the display
• Visualization scheme should extend gracefully to
  include additional properties of trees
• As described later

7
Treemaps

• Treemaps are novel displays of hierarchical
  information
• Satisfy all the above requirements
• Use 100 of the available display area
• Algorithm for drawing treemaps is simple
• No constraints on the maximum number of nodes in
  the tree
• Variations of basic treemaps show trees with
  special properties (ordered trees etc)
• Historically treemaps were invented to display
  disk usage on a computer
• Treemap layout displays all the files on the disk
  proportionate to their size (or any other
  property)
• Users can interact with this layout (by dragging
  the mouse over a file) to obtain file details

8
Example CS5561 folder structure
9
Nested Rectangles
CS5561
lectures
information
assessment
practicals
10
Problems with nested rectangles

• Not good for deep trees
• Results into large degree of nesting of
  rectangles
• Adding labels not easy with long and lean
  rectangles
• In the previous slide even at the third level it
  is hard to add text horizontally
• Leaner rectangles possible with increasing depth
  (or level)
• We want squares or near squares rather than
  rectangles
• To reclaim space wasted in nesting offset
• Displaying large trees requires efficient use of
  available display area

11
Slice and Dice Algorithm

• Main idea is very simple
• At each new level of the tree change the
  direction of partitioning of the rectangles
• Hence the name slice and dice
• Imagine you start with a block of cheese
• First slice it vertically
• Then dice each piece from above horizontally

12
Example Tree-map
CS5561
week1
internal
week2
a1
lectures
week3
external
week4

• Size of the display partition proportional to the
  size of the folder
• Other file attributes can be mapped to other
  attributes of the
• partition such as color, texture etc

13
Properties of Treemaps

• Aspect ratio
• Max(width/height,height/width)
• A square has an aspect ratio 1
• Slice-and-dice may produce rectangles with poor
  aspect ratio
• Readability
• Ease of scanning the treemap for required
  information
• e.g searching for a specific file
• We stick to this informal definition
• Smoothness of change in the layout due to changes
  in the tree data
• Files change on the disk all the time

14
Algorithms to Improve Aspect Ratio in Treemaps

• Several algorithms exist for improving aspect
  ratio
• E.g. Map of the Market tool on SmartMoney.com
  uses clustered treemap method
• Produces tree map with better aspect ratio
  (partitions closer to a square)
• But many of these algorithms produce treemaps
  with
• Poor readability
• Ordering information from the original data set
  not preserved

15
Ordered Treemaps

• Input tree contains ordered information
• E.g. alphabetically ordered children
• Algorithms that maintain healthy aspect ratios
  and also preserve ordering information are
  available
• You can look up the algorithms from the course
  information page

16
Quantum Treemaps

• The contents of a partition need not be always
  label strings
• You could have images which need a minimum space
  to display
• Algorithms that ensure that the display space
  available in a partition is always a multiple of
  user specified quantum are available
• You can look up the algorithms from the course
  information page

17
Fisheye Views

• Address the problem of visualizing large amounts
  of any type of information (not necessarily tree
  information)
• Using zoom in/out is the common solution
• Often available with geographic maps (e.g. Google
  Earth)
• The zoom in operation offers a detailed local
  view (focus)
• The zoom out operation offers a global view
  (context)
• Fisheye views offer an alternative way of
  displaying focus and context information
• New Yorkers view of the World drawing by
  Steinberg
• http//en.wikipedia.org/wiki/Saul_Steinberg

18

• New Yorkers
• View of the World
• An example
• Fisheye view

19
Natural Fisheye views

• Fish see details of the world directly above them
  but only a distorted view of the rest of the
  world
• Due to light refraction
• Employees know local department heads but only
  the Vice Presidents of remote departments
• We all discriminate subfields of computing such
  as AI, DB and Networks but nor subfields of a
  remote discipline such as Psychology
• News papers carry several local news but only a
  few global news of great importance

20
Formal theory behind fisheye views

• At the heart of the fisheye views is the notion
  of degree of interest (DOI)
• DOI is composed of two parts
• A priori importance (API)
• Distance (D)
• DOIfisheye (x.y)API(x)-D(x,y)
• X is the point for which DOI value is computed
• Y is the current point of focus
• DOI increases with API
• DOI decreases with D

21
Example 1 CS5561 folder structure

• Let us compute DOI for the CS5561 tree we have
  from the treemaps discussion
• Let the node a1 be the point of focus
• D(x,y) be the path length in the tree from x to
  y, dtree(x,y)
• A very natural distance measure in trees
• API(x) be the path length between x and root of
  the tree, -dtree(x,root)
• Negative sign shows that importance falls as you
  move away from the root

22
Example CS5561 folder structure (2)
Current focus
23
Example CS5561 folder structure (3)

• There could be several ways of using DOI
  information to render fisheye views
• DOI can be used for other purposes than just
  generating fisheye displays
• Given some information, DOI helps to compute
  metrics to separate focus and context
• In this sense fisheye views involve deeper
  significance than simply generating fisheye
  displays
• Let us use the size of the node in the display to
  indicate DOI
• Use a threshold, k on DOI to select items for
  display

24
Example CS5561 folder structure (4)
CS5561
assessment
lectures
practicals
information
Threshold used is k-4 All nodes with DOIgtk are
shown Size of the box is proportional to DOI
value
a1
25
Summary

• Displaying large amounts of information on
  limited screen is a challenge
• Hierarchical information can be displayed using
  treemaps
• Slice-and-dice algorithm produces poor aspect
  ratios
• Improving aspect ratio and retaining other
  properties such as readability, smoothness of
  updates, and ordering
• Fisheye views can help to display any type of
  data
• Present focuscontext
• Parts of the display is distorted