1. Browsing Hierarchical Data with Multi-level Dynamic Queries and Pruning By H. P. Kumar, C. Plaisant & B. Schneidernam Presented by: Dawit Yimam Seid

2. 5/10/2001ICS 280 - Info Visualization2 Tree Representations Node-link visualization –2D (outline, tree diagrams) –3D (Cone Trees) Tree-map visualization (nested & non-nested) Graph structures (hypertext, flow charts, etc.)

3. 5/10/2001ICS 280 - Info Visualization3 HDS/Tree Browsing “Hierarchical browsing” –interaction matches structure –When do we do hierarchical browsing ? “hierarchical decision making”, iterative refinement/progressive querying of datasets e.g. sales & budget data, catalog of products, computer file systems most AND queries can be considered hierarchical e.g. “SEX=male AND M_STATUS=single AND INCOME>=200,000”

4. 5/10/2001ICS 280 - Info Visualization4 Tree Browsing - requirements Somewhat contradictory –Retain context - not getting lost deep in the tree vs. –Don’t display non-relevant information How to achieve both at the same time ?

5. 5/10/2001ICS 280 - Info Visualization5 PDQ Tree-Browser’s Approach Enable viewing tree at different levels Selection (filtering) criteria at various levels in the tree –attribute based specification of the foci of interest Hide uninteresting nodes and branches rapidly

6. 5/10/2001ICS 280 - Info Visualization6 PDQ Tree-Browser Techniques Dynamic Queries & tight coupling –let users dynamically query nodes at each level –tightly couple query widgets to tree visualization –tightly couple the overview and detail views Automatic Pruning (in addition to zooming and panning) –automatically prune out uninteresting nodes/sub- trees to get more compact views

7. 5/10/2001ICS 280 - Info Visualization7 Dynamic Queries for Tree Browsing Applying DQ to trees is challenging ! –Predefined relationships between data points (unlike the case of flat/independent data sets). A query at one node affects other nodes –Dynamic generation of widgets since nodes at different levels can have different attributes, and since these nodes are dynamic

8. 5/10/2001ICS 280 - Info Visualization8 The PDQ Tree-Browser Interface Data display - two resizable windows –Overview (left) –Detail view (right) Dynamic Query Panel –Attribute list (shows attributes of the current lowest level) –Widgets panel - widgets created by users range-sliders (for numeric) menu (for text)

9. 5/10/2001ICS 280 - Info Visualization9 The PDQ Tree-Browser Interface Feedback Indicator Widgets Panel Attributes List Overview Field-of-view Detailed view Level name button Level increment/ decrement

10. 5/10/2001ICS 280 - Info Visualization10 Query & Manipulation Query using Widgets –Queries AND-ed together and matching nodes colored yellow in real time Manipulating a widget at an internal node level makes that node the current lowest level Tree structure changed through –level buttons –widgets –+ or - buttons pan detail view dragging the field-of-view Two types of coupling !

11. 5/10/2001ICS 280 - Info Visualization11

12. 5/10/2001ICS 280 - Info Visualization12 Pruning Done when depth of the tree is increased. –Children of non-matching nodes are pruned Orange shows non-pruned nodes

13. 5/10/2001ICS 280 - Info Visualization13

14. 5/10/2001ICS 280 - Info Visualization14

15. Example Application The UniversityFinder

16. 5/10/2001ICS 280 - Info Visualization16

17. 5/10/2001ICS 280 - Info Visualization17

18. 5/10/2001ICS 280 - Info Visualization18

19. 5/10/2001ICS 280 - Info Visualization19 PDQ Tree-Browser Limitations Max depth of 5 only up to 3 attributes to query; queries only AND-ed scrolling the overview needed when tree is large Clicking nodes in detail view do not open their sub-trees

20. 5/10/2001ICS 280 - Info Visualization20 Issues/Alternatives Pruning Vs. graying out ? To change tree structure as widgets are created or not ? How to handle large trees ? –Maintain overview to detail view coupling ? –Intermediate views, let user restrict before display How to generalize the PDQ Tree-Browser to other tree representations (e.g. treemap) –where to place widgets ? How to prune ? How to add OR and NOT queries ?

21. 5/10/2001ICS 280 - Info Visualization21 Usability Testing 8 subjects (2 pilot, 6 test) 7 tasks (feature based & task-based) Results (on a scale of 1-9) –8.7 - pruning (+“Hide Grey Leaves”) is useful –8.2 - dynamic query is useful –4.8 - easiness of range-slider manipulation Some users did not like the dynamic widget creation !

22. 5/10/2001ICS 280 - Info Visualization22 Controlled Experiment Goal - compare Full-tree, Partially-pruned tree and Fully-pruned tree 25 subjects; 7 tasks Results –Task completion time 1. Fully-pruned 2. Partially-pruned 3. Full-tree –Subjective satisfaction rate 1. Partially-pruned 2. Fully-pruned 3. Full-tree –No clear cut finding on graying Vs. hiding pruned nodes