Information Visualization –IIITreemaps and Fisheye Views

Dept. of Computing Science, University of Aberdeen 2

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)

Dept. of Computing Science, University of Aberdeen 3

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

Dept. of Computing Science, University of Aberdeen 4

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

Dept. of Computing Science, University of Aberdeen 5

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

Dept. of Computing Science, University of Aberdeen 6

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

Dept. of Computing Science, University of Aberdeen 7

Example: CS4031 folder structure

CS4031

lectures practicals assessment information

week1 week2 week3 week4 a1 internal external

Dept. of Computing Science, University of Aberdeen 8

Nested RectanglesCS4031

lectures practicals assessment information

Dept. of Computing Science, University of Aberdeen 9

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

Dept. of Computing Science, University of Aberdeen 10

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

Dept. of Computing Science, University of Aberdeen 11

Example: Tree-mapCS4031

lectures

week1

week3

week2

week4

a1

internal

external

-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

Dept. of Computing Science, University of Aberdeen 12

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

Dept. of Computing Science, University of Aberdeen 13

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

Dept. of Computing Science, University of Aberdeen 14

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

Dept. of Computing Science, University of Aberdeen 15

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

Dept. of Computing Science, University of Aberdeen 16

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 Yorker’s view of the World’ drawing by

Steinberg– http://en.wikipedia.org/wiki/Saul_Steinberg

Dept. of Computing Science, University of Aberdeen 17

New Yorker’sView of the World-An example Fisheye view

Dept. of Computing Science, University of Aberdeen 18

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

Dept. of Computing Science, University of Aberdeen 19

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

Dept. of Computing Science, University of Aberdeen 20

Example 1: CS4031 folder structure

• Let us compute DOI for the CS4031 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

Dept. of Computing Science, University of Aberdeen 21

Example: CS4031 folder structure (2)

CS4031D = 2API=0DOI=-2

lecturesD=3

API=-1DOI= - 4

practicalsD=3

API=-1DOI= - 4

assessmentD=1

API=-1DOI= - 2

informationD=3

API=-1DOI= - 4

week1D=4

API=-2DOI= - 6

week2D=4

API=-2DOI = - 6

week3D=4

API=-2DOI= - 6

week4D=4

API=-2DOI = - 6

a1D=0

API=-2DOI = -2

internalD=4

API=-2DOI= -6

externalD=4

API=-2DOI= - 6

Currentfocus

Dept. of Computing Science, University of Aberdeen 22

Example: CS4031 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

Dept. of Computing Science, University of Aberdeen 23

Example: CS4031 folder structure (4)

CS4031

assessment

a1

lectures practicals information

Threshold used is k=-4All nodes with DOI>=k are shownSize of the box is proportional to DOI value

Dept. of Computing Science, University of Aberdeen 24

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 focus+context• Parts of the display is distorted