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!
Top Related