visualization and spatial hypertext haowei hsieh center for the study of digital libraries texas...

Visualization and Visualization and Spatial HypertextSpatial Hypertext

Haowei HsiehHaowei HsiehCenter for the Study of Digital Libraries Center for the Study of Digital Libraries

Texas A&M UniversityTexas A&M University

CPSC 436, 9/28/2006CPSC 436, 9/28/2006

Information Life CycleInformation Life Cycle

ComprehensionSkimming & Reading

ModificationAnnotation & Authoring

LocationSearching & Browsing

Located resources must be understood to be evaluated

Understanding one document may require other documents or result

in further information requests

Added contentinfluences further

access

Reading leads toannotation, note

taking, and writing

Formality of InformationFormality of Information

People naturally process informal People naturally process informal informationinformation By perception, association, abstractionBy perception, association, abstraction

Computers process formalized Computers process formalized informationinformation Database (data tables, records, fields)Database (data tables, records, fields) Metadata (attributes, values)Metadata (attributes, values)

TextNote

Text & Graphics

Note A

Node B

Web Hypertext

Less formal More formal

Database

Superclass

Subclass Subclass

ObjectFrames &Semantic Nets

ChallengesChallenges

Design for humans or computers?Design for humans or computers? Humans:Humans:

Good at abstraction and visual perceptionGood at abstraction and visual perception Handle information less formally Handle information less formally

Computers: Computers: Good at repetitive computationGood at repetitive computation Data needs to be formalizedData needs to be formalized

Research ProjectsResearch Projects

Visual Knowledge Builder (VKB)Visual Knowledge Builder (VKB) An information workspace providing An information workspace providing

free-form interaction and visual free-form interaction and visual expression for knowledge work with expression for knowledge work with unstructured informationunstructured information

VITEVITE An information workspace supporting An information workspace supporting

two-way mappings to work with two-way mappings to work with structured informationstructured information

Related ResearchRelated Research

Visual languages Visual languages Specify and present relationshipsSpecify and present relationships

Express relationships in visual workspacesExpress relationships in visual workspaces Explicitly via schema based visual languagesExplicitly via schema based visual languages Implicitly via patterns and spatial arrangementImplicitly via patterns and spatial arrangement


Hypermedia/hypertextHypermedia/hypertext Node and link hypertextNode and link hypertext Map-based hypertextMap-based hypertext Spatial hypertextSpatial hypertext

Evolution of hypermedia systemsEvolution of hypermedia systems

NoteCards

KMS

Aquanet

VNS

Tivoli

HOS

VIKIVITE

VKB




VITENoteCards Aquanet VIKI

VKB




NoteCards

KMS

Aquanet

VNS

Tivoli

HOS

VIKIVITE

VKB




NoteCards

KMS

Aquanet

VNS

Tivoli

HOS

VIKI VITEVKB

Visual Knowledge Visual Knowledge Builder (VKB)Builder (VKB)

Information objects: visual data Information objects: visual data representationrepresentation

Collections -- hierarchy of 2-d spacesCollections -- hierarchy of 2-d spaces Visual attributes for user interpretationVisual attributes for user interpretation Import information by drag & drop, Import information by drag & drop,

copy/pastecopy/paste

Short DemoShort Demo

VKB Advanced FeaturesVKB Advanced Features

Spatial parser Spatial parser (structure recognition)(structure recognition)

User-defined attributes User-defined attributes Integrated search Integrated search

(NSDL and Google) (NSDL and Google) Navigable historyNavigable history





Lab Administratorsusername: haoweigroup: power user



User-defined attributesUser-defined attributes Integrated search Integrated search





(NSDL and Google)(NSDL and Google) Navigable historyNavigable history

Example ApplicationsExample Applications Organization Organization

Example ApplicationsExample Applications Information gathering and collectionInformation gathering and collection

Example ApplicationsExample Applications Project managementProject management

VKB SummaryVKB Summary

Support the Support the information life cycleinformation life cycle Embedded search and easy importEmbedded search and easy import Visual manipulation and expressionVisual manipulation and expression

Support for Support for incremental formalizationincremental formalization Gradually transform informal Gradually transform informal

information into information into semi-formal or formal informationsemi-formal or formal information

Software freely available atSoftware freely available athttp://www.csdl.tamu.edu/VKB/http://www.csdl.tamu.edu/VKB/

VITEVITE

An information workspace for An information workspace for manipulating structured information manipulating structured information in a semi-formal settingin a semi-formal setting

MotivationMotivation

Difficulties interacting with Difficulties interacting with structured informationstructured information Incomplete representation: Incomplete representation:

deconstructive nature of formalizationdeconstructive nature of formalization Intermediate representation: transient Intermediate representation: transient

states during problem solvingstates during problem solving

Two-way MappingTwo-way Mapping

MappingData Table Visual Display

Visualization

Visual Parsing

Two-way Mapping

Link semantic content of the database with visual attributes of information objects

SemantiSemanticc

AttributAttributeses Visual AttributesVisual Attributes

Position, Size, Color Position, Size, Color (background and (background and border), Text label, border), Text label, Border widthBorder width

Semantic Semantic AttributesAttributes

Title, Level, Start Title, Level, Start Time, Instructor, Time, Instructor, Classroom, etc.Classroom, etc.

Visual Visual AttributeAttribute

ss

Semantic Value Semantic Value Visual ValueVisual Value

Mapping assignmentsMapping assignments Day of Week: Day of Week: X PositionX Position Start: Start: Y PositionY Position Difficulty: Difficulty: BG BG

ColorColor Title: Title: Text LabelText Label Start: Start: Text LabelText Label End: End: Text LabelText Label

Value assignment Value assignment

e.g. Difficultye.g. Difficulty Level 1:Level 1: GreenGreen Level 2:Level 2: YellowYellow Level 3:Level 3: RedRed

MathematicsStart: 1000End: 1100

VITE ArchitectureVITE Architecture

Visual Workspace

Mapping Engine

Data Storage

MappingDesigner

MiscellaneousInterface

Mapping AssignmentInterface

Mapping Assistant Mapping Profile

User Inputs Visual Display

Visual Parser Visual Renderer

VITE InterfaceVITE Interface

WorkspaceWorkspace Mapping DesignerMapping Designer

Mapping AssignmentMapping Assignment Continuous/Discrete settingsContinuous/Discrete settings

Miscellaneous InterfacesMiscellaneous Interfaces

Mapping DesignerMapping Designer

Visual Visual AttribuAttributestes

Selected Semantic Attribute

Available

Semantic

Attribute

Mapping AssignmentMapping Assignment

1. Continuous value1. Continuous value

2. Continuous color2. Continuous color

3. Discrete value3. Discrete value

4. Discrete color4. Discrete color

Mapping Assignment 1/4Mapping Assignment 1/4

Estimated Range for Selected Visual Attribute

Selected Visual Attribute : Y Size

Select Attribute : MarketValue

Available Value Range fromScanning the Database

Select Mapping Style: Continuous

Mapping Preview


Default Color Range for Selected Visual Attribute

Selected Visual Attribute : Background Color

Select Attribute : MarketValue

Available Value Range fromScanning the Database

Select Mapping Style: Continuous

Mapping Preview


Default Values for Selected Visual Attribute

Selected Visual Attribute : X Position

Select Attribute : POS

Available Value from Scanning the Database

Select Mapping Style: Discrete


Default Values for Selected Visual Attribute

Selected Visual Attribute : Background Color

Select Attribute : POS

Available Values fromScanning the Database

Select Mapping Style: Discrete

VITE DemoVITE Demo

Class scheduling example used in Class scheduling example used in the tutorialthe tutorial

User StudyUser Study

Investigate Investigate How people solve problems using visual How people solve problems using visual

workspaces workspaces How people use two-way mappingsHow people use two-way mappings

ObserveObserve General use and selection of visual attributesGeneral use and selection of visual attributes

IdentifyIdentify Problems when dealing with two-way Problems when dealing with two-way

mappingmapping Desired enhancements through feedbackDesired enhancements through feedback

TasksTasks

Task 1: Flight approach controlTask 1: Flight approach control User acts as an air traffic controllerUser acts as an air traffic controller schedule airplanes to avoid conflict schedule airplanes to avoid conflict

Task 2: Fantasy basketballTask 2: Fantasy basketball User acts as a team manager of a User acts as a team manager of a

fantasy basketball teamfantasy basketball team Select 5 players within a limited budgetSelect 5 players within a limited budget

Task 1: Data AttributesTask 1: Data AttributesArrival: Arrival: Arrival timeArrival time

Runway: Runway: Pre-assigned runwayPre-assigned runway

Flight: Flight: Flight NumberFlight Number

Category:Category: Airliner, Regional passenger plane, or Cargo Airliner, Regional passenger plane, or Cargo planeplane

Airline: Airline: Airline who operates this flightAirline who operates this flight

Airplane: Airplane: Type of the aircraft (Make/Model)Type of the aircraft (Make/Model)

AP_Speed: AP_Speed: Approach speed Approach speed

RW_Length: RW_Length: Required runway length. Required runway length.

Capacity: Capacity: Maximum number of passengerMaximum number of passenger

Passengers: Passengers: Number of passengers on boardNumber of passengers on board

Departure: Departure: Departure timeDeparture time

Engine_Type: Engine_Type: Type of engine of the aircraft, i.e., Jet, Turbo, etc.Type of engine of the aircraft, i.e., Jet, Turbo, etc.

No_Engines: No_Engines: Number of enginesNumber of engines

Gate: Gate: Preplanned gate assignmentPreplanned gate assignment

Status: Status: Flight statusFlight status

Task 1: Example Task 1: Example MappingMapping

Task 1: Example SpaceTask 1: Example Space

Task 2: Data AttributesTask 2: Data AttributesMarket Value : Market Value : Current salary to recruit the playerCurrent salary to recruit the player

POS : POS : Position the player playsPosition the player plays

Decision : Decision : Decision to choose, reject, or still consider the player.Decision to choose, reject, or still consider the player.

Athlete: Athlete: The name of the playerThe name of the player

Team : Team : Where the team comes fromWhere the team comes from

3PT : 3PT : 3 point shots made3 point shots made

REB : REB : ReboundsRebounds

Min : Min : Minimum field goalMinimum field goal

AST : AST : AssistsAssists

BLK : BLK : Blocked ShotsBlocked Shots

STL : STL : StealsSteals

TO :TO : TurnoversTurnovers

FTM-A : FTM-A : Free Throws Made-AttemptedFree Throws Made-Attempted

FT% : FT% : Free Throw PercentageFree Throw Percentage

FGM-A : FGM-A : Field Goals Made-AttemptedField Goals Made-Attempted

FG% : FG% : Field Goal PercentageField Goal Percentage

Prev : Prev : Salary of the player's previous contractSalary of the player's previous contract

Change : Change : Change of the player's salary between current market value and previous Change of the player's salary between current market value and previous salary.salary.

Task 2: Example SpaceTask 2: Example Space

Task 2: Visual Problem Task 2: Visual Problem SolvingSolving

Task 2: Creating Task 2: Creating ReferenceReference

Task 2: Visual SortingTask 2: Visual Sorting Object height is mapped to a critical attribute. The user Object height is mapped to a critical attribute. The user

need to find a proper object by comparing their height.need to find a proper object by comparing their height.

Step 1: select objects to be sortedStep 1: select objects to be sorted

Task 2: Visual SortingTask 2: Visual Sorting Object height is mapped to a critical value. The user Object height is mapped to a critical value. The user


Step 2: make the selection into a pile by Step 2: make the selection into a pile by StackStack function function

Task 2: Visual SortingTask 2: Visual Sorting Object height is mapped to a critical value. The user Object height is mapped to a critical value. The user


Step 3: Align the selection at top with Step 3: Align the selection at top with Align Y - TopAlign Y - Top function. function. A list of objects handy for comparing their height and sortingA list of objects handy for comparing their height and sorting

Task 2: ComparingTask 2: Comparing

Task 2: ResultTask 2: Result

Task 2: Similar StrategyTask 2: Similar Strategy

ObservationsObservations

Users’ preference of visual propertiesUsers’ preference of visual properties Position > (Size, Color)Position > (Size, Color) Text label is inevitableText label is inevitable

Use and selection of visual properties:Use and selection of visual properties: Unmapped visual properties: temporary memory Unmapped visual properties: temporary memory Text Label: for textural description and feedbackText Label: for textural description and feedback Position: to hold status, sort, distribute, or categorizePosition: to hold status, sort, distribute, or categorize Color: to show status, categorization, or reveal value Color: to show status, categorization, or reveal value

distributiondistribution Size: to compare value (numeric) or show categorization Size: to compare value (numeric) or show categorization

(discrete)(discrete) Border Width: rarely used, because too few values Border Width: rarely used, because too few values

available, and it effect the usefulness of border coloravailable, and it effect the usefulness of border color

VITE SummaryVITE Summary

Two-way mapping enables semi-formal Two-way mapping enables semi-formal manipulation of formalized informationmanipulation of formalized information

VITE supports users in developing VITE supports users in developing advanced problem solving strategiesadvanced problem solving strategies

VITE provides users new ways of VITE provides users new ways of interacting with structured informationinteracting with structured information

Users identified additional features that Users identified additional features that would support this approach would support this approach

ConclusionConclusion

Information workspaces support all Information workspaces support all phases of the information life cyclephases of the information life cycle

Incremental formalization facilitate Incremental formalization facilitate the transformation of informal the transformation of informal information into more formal information into more formal knowledge representations (VKB)knowledge representations (VKB)

Two-way mappings enable interaction Two-way mappings enable interaction with formalized information in semi-with formalized information in semi-formal environments (VITE)formal environments (VITE)

visualization and spatial hypertext haowei hsieh center for the study of digital libraries texas...

Documents