Information Visualization –III Treemaps and Fisheye Views

Dept. of Computing Science, University of Aberdeen2 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 Aberdeen3 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 Aberdeen4 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 Aberdeen5 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 Aberdeen6 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 Aberdeen7 Example: CS4031 folder structure CS4031 lecturespracticals week1week2week3week4 assessment a1 information internalexternal

Dept. of Computing Science, University of Aberdeen8 Nested Rectangles CS4031 lectures practicals assessment information

Dept. of Computing Science, University of Aberdeen9 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 Aberdeen10 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 Aberdeen11 Example: Tree-map CS4031 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 Aberdeen12 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 Aberdeen13 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 Aberdeen14 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 Aberdeen15 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 Aberdeen16 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 –

Dept. of Computing Science, University of Aberdeen17 New Yorker’s View of the World -An example Fisheye view

Dept. of Computing Science, University of Aberdeen18 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 Aberdeen19 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) DOI fisheye (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 Aberdeen20 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, d tree (x,y) –A very natural distance measure in trees API(x) be the path length between x and root of the tree, -d tree (x,root) –Negative sign shows that importance falls as you move away from the root

Dept. of Computing Science, University of Aberdeen21 Example: CS4031 folder structure (2) CS4031 D = 2 API=0 DOI=-2 lectures D=3 API=-1 DOI= - 4 practicals D=3 API=-1 DOI= - 4 week1 D=4 API=-2 DOI= - 6 week2 D=4 API=-2 DOI = - 6 week3 D=4 API=-2 DOI= - 6 week4 D=4 API=-2 DOI = - 6 assessment D=1 API=-1 DOI= - 2 a1 D=0 API=-2 DOI = -2 information D=3 API=-1 DOI= - 4 internal D=4 API=-2 DOI= -6 external D=4 API=-2 DOI= - 6 Current focus

Dept. of Computing Science, University of Aberdeen22 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 Aberdeen23 Example: CS4031 folder structure (4) CS4031 assessment a1 lecturespracticalsinformation Threshold used is k=-4 All nodes with DOI>=k are shown Size of the box is proportional to DOI value

Dept. of Computing Science, University of Aberdeen24 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