Visualizing LiveNet with Visualizing LiveNet with ENCCON ModelENCCON Model

Quang Vinh NguyenQuang Vinh NguyenComputer Systems DepartmentComputer Systems Department

Faculty of Information TechnologyFaculty of Information TechnologyUniversity of Technology, SydneyUniversity of Technology, Sydney

ENCCON ModelENCCON Model

ENCCON: ENCCON: EncEnclosure + losure + ConConnection nection approachapproach• Enclosure: use enclosure to present the Enclosure: use enclosure to present the

hierarchical structureshierarchical structures• Connection: display structures using Connection: display structures using node-linknode-link

diagramsdiagrams ObjectivesObjectives

• Enhance the usability of display spaceEnhance the usability of display space• Improve the perception: node-link diagrams to Improve the perception: node-link diagrams to

show the relationshipsshow the relationships

Enccon ModelEnccon Model

Geometrical LayoutGeometrical Layout Define the position of Define the position of

all vertexes in 2Dall vertexes in 2D Each vertex is bounded Each vertex is bounded

by a rectangular local by a rectangular local regionregion

Position of the vertex is Position of the vertex is at the centre of the at the centre of the rectanglerectangle

Each sub-hierarchy is Each sub-hierarchy is drawn restrictedly drawn restrictedly within the bounded within the bounded rectanglerectangle

An Example of Geometrical Layout of ENCCON

Enccon ModelEnccon Model

Geometrical LayoutGeometrical Layout

A medium large size data set (approximately 190 nodes)

A very large size data set (approximately 11000 nodes)

Enccon ModelEnccon Model

Improved Geometrical LayoutImproved Geometrical Layout (100% Space Efficiency)(100% Space Efficiency)

A medium large size data set (approximately 190 nodes)

The Complete Java Documentation’s File System (approximately 10000 nodes)

Enccon ModelEnccon Model

Navigation and Interaction Navigation and Interaction Apply a new focus+context visualization Apply a new focus+context visualization

technique.technique. Independent to the layout algorithm.Independent to the layout algorithm. Display both Display both detail-viewdetail-view and and context-viewcontext-view

using semi-transparency.using semi-transparency.• Detail-view: entire display areaDetail-view: entire display area• Context-view: smaller window at the Context-view: smaller window at the

backgroundbackground Only one view is active at a time Only one view is active at a time other other

view becomes semi-transparent.view becomes semi-transparent. Animation is applied to each interaction Animation is applied to each interaction

preserve mental maps. preserve mental maps.

The LiveNet SystemThe LiveNet System

A knowledge management and enterprise A knowledge management and enterprise collaborative tool.collaborative tool.

Application in learning environment:Application in learning environment:• Allow users to create digital workspaces for their Allow users to create digital workspaces for their

activitiesactivities• Provides the flexibility to customise workspacesProvides the flexibility to customise workspaces

Based on a meta-model:Based on a meta-model:• Stored as a relational databaseStored as a relational database• Provide the flexibility to setup collaborative Provide the flexibility to setup collaborative

workspacesworkspaces

LiveNet’s InterfaceLiveNet’s Interface

Limitation of LiveNet’s InterfaceLimitation of LiveNet’s Interface Hardly to see the relations.Hardly to see the relations.

• Hierarchical RelationsHierarchical Relations• Accessing RelationsAccessing Relations• Participating RelationsParticipating Relations• Sharing RelationsSharing Relations

Lack of the meaningful visual presentation Lack of the meaningful visual presentation of various types of the logical relationships.of various types of the logical relationships.

Difficult for non-expert users to understand Difficult for non-expert users to understand the logical relationships:the logical relationships:• Data objects in a working-windowData objects in a working-window• Data objects across different working-windowData objects across different working-window

Unable to display large scale of information.Unable to display large scale of information.

Objectives of the Visual InterfaceObjectives of the Visual Interface

Provide an optimized interactive Provide an optimized interactive graphic:graphic:• Interactively view, navigate, and Interactively view, navigate, and

manipulate the entire informationmanipulate the entire information Improve the user understanding of Improve the user understanding of

underlying structure and internal underlying structure and internal relationships.relationships.

Provide the overall context view.Provide the overall context view. Handle large amount of information.Handle large amount of information.

LiveNet’s Visual InterfaceLiveNet’s Visual Interface Use J2EE to control the interaction between the Use J2EE to control the interaction between the

Visual AppletVisual Applet and and databasedatabase.. Layout:Layout: use ENCCON’s algorithm. use ENCCON’s algorithm.

represent the structure of collaborative workspace and represent the structure of collaborative workspace and logical relationship.logical relationship.

• Nodes: represent the objectsNodes: represent the objects• Edges: represent the relationshipsEdges: represent the relationships

Visualize as Visualize as Cluster Graph:Cluster Graph:• Structure of workspace: hierarchical displayStructure of workspace: hierarchical display• External and Logical relationships: extra edgesExternal and Logical relationships: extra edges• Different types of relations are shown using Different types of relations are shown using

distinctive attributes.distinctive attributes.

LiveNet’s Visual Interface LiveNet’s Visual Interface (cont)(cont)

The visual interface provides:The visual interface provides:• Overall view of the entire workspace structures.Overall view of the entire workspace structures.• Detail view (all actions, properties, and Detail view (all actions, properties, and

associated attributes of a learning-element)associated attributes of a learning-element)• Relations among learning-elements using semi-Relations among learning-elements using semi-

transparencytransparency Why ENCCON?: space efficiency, fast, Why ENCCON?: space efficiency, fast,

aesthetically nice.aesthetically nice. handle large and complex workspace handle large and complex workspace NavigationNavigation: new focus+context viewing : new focus+context viewing

technique using semi-transparency.technique using semi-transparency.

LiveNet LiveNet DemonstrationDemonstration

http://138.25.13.210:8000/ln4http://138.25.13.210:8000/ln4-1/-1/

ConclusionsConclusions

Present the ENCCON model.Present the ENCCON model.• LayoutLayout: enclosure+connection approach: enclosure+connection approach• NavigationNavigation: focus+context using semi-: focus+context using semi-

transparencytransparency Present LiveNet’s Visualization.Present LiveNet’s Visualization.

• Supporting knowledge management and Supporting knowledge management and collaborationcollaboration

• Assistant interface for viewing and manipulating Assistant interface for viewing and manipulating informationinformation

• Improving the user understanding of underlying Improving the user understanding of underlying structure and internal relationshipsstructure and internal relationships

Thank you!