Visualizing LiveNet with ENCCON Model Quang Vinh Nguyen Computer Systems Department Faculty of Information Technology University of Technology, Sydney

ENCCON Model ENCCON: Enclosure + Connection approach ENCCON: Enclosure + Connection approach Enclosure: use enclosure to present the hierarchical structuresEnclosure: use enclosure to present the hierarchical structures Connection: display structures using node-link diagramsConnection: display structures using node-link diagrams Objectives Objectives Enhance the usability of display spaceEnhance the usability of display space Improve the perception: node-link diagrams to show the relationshipsImprove the perception: node-link diagrams to show the relationships

Enccon Model Geometrical Layout Define the position of all vertexes in 2D Define the position of all vertexes in 2D Each vertex is bounded by a rectangular local region Each vertex is bounded by a rectangular local region Position of the vertex is at the centre of the rectangle Position of the vertex is at the centre of the rectangle Each sub-hierarchy is drawn restrictedly within the bounded rectangle Each sub-hierarchy is drawn restrictedly within the bounded rectangle An Example of Geometrical Layout of ENCCON

Enccon Model Geometrical Layout A medium large size data set (approximately 190 nodes) A very large size data set (approximately nodes)

Enccon Model Improved Geometrical Layout (100% Space Efficiency) A medium large size data set (approximately 190 nodes) The Complete Java Documentation’s File System (approximately nodes)

Enccon Model Navigation and Interaction Apply a new focus+context visualization technique. Apply a new focus+context visualization technique. Independent to the layout algorithm. Independent to the layout algorithm. Display both detail-view and context-view using semi-transparency. Display both detail-view and context-view using semi-transparency. Detail-view: entire display areaDetail-view: entire display area Context-view: smaller window at the backgroundContext-view: smaller window at the background Only one view is active at a time  other view becomes semi-transparent. Only one view is active at a time  other view becomes semi-transparent. Animation is applied to each interaction  preserve mental maps. Animation is applied to each interaction  preserve mental maps.

The LiveNet System A knowledge management and enterprise collaborative tool. A knowledge management and enterprise collaborative tool. Application in learning environment: Application in learning environment: Allow users to create digital workspaces for their activitiesAllow users to create digital workspaces for their activities 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 workspacesProvide the flexibility to setup collaborative workspaces

LiveNet’s Interface

Limitation 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 of various types of the logical relationships. Lack of the meaningful visual presentation of various types of the logical relationships. Difficult for non-expert users to understand the logical relationships: Difficult for non-expert users to understand 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 Interface Provide an optimized interactive graphic: Provide an optimized interactive graphic: Interactively view, navigate, and manipulate the entire informationInteractively view, navigate, and manipulate the entire information Improve the user understanding of underlying structure and internal relationships. Improve the user understanding of underlying structure and internal relationships. Provide the overall context view. Provide the overall context view. Handle large amount of information. Handle large amount of information.

LiveNet’s Visual Interface Use J2EE to control the interaction between the Visual Applet and database. Use J2EE to control the interaction between the Visual Applet and database. Layout: use ENCCON’s algorithm. Layout: use ENCCON’s algorithm. represent the structure of collaborative workspace and logical relationship. Nodes: represent the objects Edges: represent the relationships Visualize as Cluster Graph: Visualize as Cluster Graph: Structure of workspace: hierarchical display External and Logical relationships: extra edges Different types of relations are shown using distinctive attributes.

LiveNet’s Visual Interface (cont) The visual interface provides: The visual interface provides: Overall view of the entire workspace structures. Detail view (all actions, properties, and associated attributes of a learning-element) Relations among learning-elements using semi- transparency Why ENCCON?: space efficiency, fast, aesthetically nice. Why ENCCON?: space efficiency, fast, aesthetically nice.  handle large and complex workspace  handle large and complex workspace Navigation: new focus+context viewing technique using semi-transparency. Navigation: new focus+context viewing technique using semi-transparency.

LiveNet Demonstration

Conclusions Present the ENCCON model. Present the ENCCON model. Layout: enclosure+connection approachLayout: enclosure+connection approach Navigation: focus+context using semi- transparencyNavigation: focus+context using semi- transparency Present LiveNet’s Visualization. Present LiveNet’s Visualization. Supporting knowledge management and collaborationSupporting knowledge management and collaboration Assistant interface for viewing and manipulating informationAssistant interface for viewing and manipulating information Improving the user understanding of underlying structure and internal relationshipsImproving the user understanding of underlying structure and internal relationships

Thank you!