information visualization –iii treemaps and fisheye views
Post on 31-Dec-2015
218 Views
Preview:
TRANSCRIPT
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
top related