1

Adapting the TileBar Interface for Visualizing Resource Usage

Session 602

Adapting the TileBar Interface for Visualizing Resource Usage

Session 602

Larry Reeve

CIMS Lab, Inc.CIMS Lab, Inc.www.cimslab.com

2

GoalGoal

Are there new ways to visualize resource usage? Move from showing to discovering

Look to field of Information Visualization for new ideas

3

Example: TileBarExample: TileBar

4

AgendaAgenda

Motivating Example

Information Visualization Overview

Original TileBar Design for Information Retrieval

Adapted TileBar for Resource Usage

5

Motivating ExampleMotivating Example

Standard text-based report

6

Motivating ExampleMotivating Example

Unix Oracle Messages Received

0

50

100

150

200

250

Jan-04 Feb-04 Mar-04

Larry

Report charted(Single user, single resource)

7

Motivating ExampleMotivating Example

Chart shows 3 dimensions:

1. Resource User

2. Time period

3. Resource Value

4. ResourceType - using title

How to also show both:

Multiple resources types

Multiple users

Unix Oracle Messages Received

0

50

100

150

200

250

Jan-04 Feb-04 Mar-04

Larry

8

Motivating ExampleMotivating Example

How to rapidly answer questions such as:What are the most used resources and what are

their peak periods? And also by user?

How does resource group usage compare across users?

Is there anything interesting in resource groups for a user? (e.g., sends vs receives) Across a set of users?

9

Information VisualizationInformation Visualization

Two definitions: “Process of transforming information into a

visual form enabling the viewer to observe, browse, make sense, and understand the information” – (www.infovis.org)

“The use of computer-supported, interactive, visual representations of abstract data to amplify cognition" - (Card, Mackinlay, & Shneiderman, 1999)

10

Information VisualizationInformation Visualization

Enable users to make discoveries about patterns in data

Reduces search process by grouping information together in a small, dense space - (Card, Mackinlay, & Shneiderman, 1999)

11

Information VisualizationInformation Visualization

Human visual system handles cognitive processing Perceives and processes information

High bandwidth

Expands working memory

emphasizes recognition over recall

12

Human Visual System Example:Spreadsheet

Human Visual System Example:Spreadsheet

13

Human Visual System Example:Piano Roll

Human Visual System Example:Piano Roll

14

TileBarTileBar

From information retrieval field

Marti Hearst, 1995 UC Berkeley,

Digital Libraries project

Used in keyword searches Aid to user in determining ‘relevance’ of

document

15

TileBarTileBar

Designed to simultaneously and compactly show: relative length of a document,

frequency of terms in document,

distribution of terms with respect to the document and to each other

16

TileBarTileBar

Varying-length bars indicate

document length

Color intensity indicates term

frequency

(darker =higher)

Distribution of 2 terms

17

TileBarTileBar

Bars are composed of linked tiles

Each tile indicates a document segment

Darker tiles indicate higher frequency counts

Lengths of bars correspond to relative lengths of documents

Bars can be stacked to show multiple terms

18

TileBar: AnatomyTileBar: Anatomy

Search Term #1

Search Term #2

Document length

Document segments using color intensity

19

TileBar: Example UITileBar: Example UI

20

Adapting TileBarAdapting TileBar

TileBar interesting for resource usage it can show 4 attributes simultaneously:

Time periods

Categorized resource usage amounts

Resource User(s)

Resource Type(s)

21

Adapting TileBarAdapting TileBar

Time Periods

Resource

User

Resources

Resource Values

22

Adapting TileBarAdapting TileBar

First pass: follow Information Retrieval work

Varying-length bars

(avg usage=doc length)

Grayscale shading

(resource value=term freq)

(no, low, medium, high)

User

(value=document)

Stacked bars

(resources = mult terms)

23

Adapting TileBarAdapting TileBar

Initial feedback Varying-length bars make comparisons hard

Fixed-length: lose average use information

Make tile widths (time) consistent across all users

Complete labels

24

Adapting TileBarAdapting TileBar

Adapted TileBar:

25

Adapting TileBarAdapting TileBar

Advantages over Original 1) Consistent bar- and tile-widths

Allow comparison within a user

Allow comparisons between user

Pattern analysis vs document navigation

2) Complete labels make clear the meaning of each part of graphic

26

Bar Chart ComparisonBar Chart Comparison

Resource User

Time Period

Resource Value

Resource Type

27

Bar Chart ComparisonBar Chart Comparison

Can add additional users Use multiple vertical bars

Can show multiple resources If bars represent resources and not users (single user

only)

How to show multiple users and multiple resources simultaneously?

28

Bar Chart ComparisonBar Chart Comparison

Multiple

Users

Time Period

Resource Values

Multiple

Resources

29

NavigationNavigation

Information seeking mantra Overview first,

zoom and filter,

then details-on-demand(Ben Shneiderman, University of Maryland)

30

NavigationNavigation

IR TileBar:

(http://elib.cs.berkeley.edu/cgi-bin/tilebars.ch.tcl)

31

NavigationNavigation

32

NavigationNavigation

33

Future WorkFuture Work

Quantitative user evaluation

Explore more abstract resource utilization visualization applications Example: Activity Based Costing

Other visualization methods that can be applied to resource visualization Example: MSR Data Visualization Components

34

SummarySummary

Data and Information Visualization provide methods for using the human visual system to amplify cognition

TileBar is one method

Adaptation of methods can be required for resource utilization domain

Many visualization methods exist

3535

Thank you!

Session 602

Thank you!

Session 602

Larry Reeve

www.cimslab.com

CIMS Lab, Inc.CIMS Lab, Inc.