NETWORKED COMMUNITY RELATION VISUALIZATION

NETWORKED COMMUNITY RELATION VISUALIZATION

Created date: 24-11-2010Author: NCRV Team

Contest:MHST 2010

PROJECT OVERVIEW

Agenda

1. Introduction2. Plan3. Overview4. Licenses5. System architecture6. Algorithms7. Future Aims8. Difficulties9. References

Introduction - Team members

• Võ Đặng Phát – FPT Univ.• Nguyễn Hoàng Long – FPT Univ.• Ngô Quang Khánh – FPT Univ.

• Mentor: Nguyễn Vũ Hưng, CTO, Vinicorp

Introduction - The Project

• Background: – The developing of social network– The demand of review the activeness and

performances of members

• Ideas:– Create an application to visualize the relations of

members in social networks– Begin with two types of input: mailing list archive and

PhpBB forum

Plan - Planned

• Input:– Mailman’s mailing list archive– PhpBB forum database tables

• Output: – General graph which show the relation of members in social

network by using Post-Reply relationship– Personal graphs which show the performance of a member in

network• Technology (intended)

– Moonlight (Mono Slverlight, Unix-like Oses ready)– MySQL– Windows Communication Foundation (WCF)

Plan - Modified (actual)• Client Inputs:

– Mailman’s mailing list archive– PhpBB tables

• NCVR Input: XML-based messages (message is a thing which user have done in social network such as post , reply etc)

• Outputs: – General graph for all members in network – Detail graphs for each member.

• Technologies:– Silverlight 4.0+– C#– XML

• Tools– Visual Studio 2010– Expression Blend

Plan - Milestone• Phase 1 (4-7-2010 to 22-8-2010):

– Decide the architecture designs and technologies– Create project skeleton and prototypes

• Phase 2 (23-8-2010 To 28-10-2010):– Implement modules

• Input data processing• Layout algorithm developing• Output displaying

– Finish prototype• Phase 3 (29-10-2010 đến 8-11-2010)

– Complete

Overview – System Architecture

Overview – License

• Ms – PL (Microsoft Public License)

• GPL (GNU General Public License)

Overview - Algorithm

• Circular Algorithm – Display all members on a circle

• Rectangle Algorithm– Display all members in a square

• Kamada-Kawai Algorithm– Display key members in the center

• Fruchterman-ReignGold Algorithm– Display members in group, as few crossing edges as

possible

Overview - Applications

• Allow online visualization of social network’s member relationships

• Integrate into social networks like Facebook, Twitter,…

• Help admins of social networks, forum… know which members are active and which is passive to have appropriate counter-measurements.

License – Silverlight

• Ms-PL( Microsoft Public license)– One of Microsoft Shared Source Licenses– Initially titled Microsoft Permissive License, it was

renamed to Microsoft Public License while being reviewed for approval by the Open Source Initative (OSI)

– This license was approved by OSI on October 12, 2007

(http://en.wikipedia.org/wiki/Shared_source)

License - Visifire

Free and open source software component that support creating visually stunning charts on Silverlight & WPF.

- Distributed under GPL-v3 license. That means, that it’s open source and free.

- Suport Desktop, Web and even Mobile phone development.

(http://www.visifire.com/blog/category/news/page/13/)

Architecture – The Design

Architecture - Scenario

1. User uploads an archive (client input)2. Server parses the input and export XML

based- message (NCRV input)3. Server transfers data to client (as XAP file).4. Run algorithm at client side5. Display graphs at client’s browser

1. Visualization results2. Statistics

Architecture – Logical View

Architecture - Physical View

Architecture - Class Design

NCRVisual

• The main project, contains base classes for 2 modules: Data Analysis and Diagram

• Contain Helper class for dynamically loading module

Architecture - Class Design (2)

DataInputAnalysis

• Project for analyzing data input (In this case, this is mailing list analyzing project)

•The actual controller that handles data analysis contained in the web project ( for server handling, DataInputController in the web folder)

•The control inherits from Base control from the main project

Architecture - Class Design (3)

•The web project, contain:

Ashx handler file (Upload.ashx) for handling upload data from client

DataInputController analyzes the input and converts to XML

ASPX page contains Ncrvisual Silverlight object

NCRVisual.Web

Architecture – Class Design (4)

RelationDiagram

Architecture – Class Design (5)

• Relation Diagram project:– Read XML input and visualize into Relation Diagram form.– Contains 3 interfaces:

• IAlgorithm: define layout algorithm (graph)• IEntity: define Node (member)• IConnection: define edge (relation)

• Use a set of control: Edge Control, Entity Control, Block Control for visualizing the diagram.

• The DiagramController contains methods for parsing XML and loading algorithm.

Architecture – Email header

Architecture – PhPBB forum• PHPBB is the most widely used open source and free

forum. Commonly used in Joomla, Drupal and other PHP based CMS.

• The Database for PhpBB forum is quite complicated with more than 40 tables, but we only need to use data in “posts” and “users” table to create the connections betweens users in the forum:

Architecture – PhPBB forum

Architecture - XML• Reference DTD• XML format :

<relation>• <Vertex>• <UserId></UserId>• <Email></Email>• <Name></Name>• <Edge count="1">• <start></start>• <end></end>• <value></value>• <content count="1">• <date></date>• <subject></subject>• </content>• ..........• • </Edge>• .............• </Vertex>• ..............• </relation>

Architecture - Extending

NCRV can be extended in two ways:• Extends input data (client input):

Extend controller to parse other data source (like facebook friend list, forum thread…) to XML format.

• Extends algorithm :Implement the IAlgorithm

Algorithm – Spring Layout

If such a “physical graph” is allowed to move without restrictions, it will move to a configuration where the potential energy in the springs is minimized.

The general idea of spring-embedder or force-directed layout is to work on a physical model of the graph in which the nodes are represented by steel rings and the edges are springs attached to these rings.

Algorithm – Energy Analysis

• Spring force

• Repulsive force (between all nodes):

• Attractive force(between incident nodes):

Algorithm – Fruchterman-Rheingold

• The basic idea is to just calculate the attractive and repulsive forces at each node independently and to update all nodes iteratively.

• Constant k :

• Repulsive force:

• Attractive force:

Algorithm - Fruchterman-RheingoldPseudo Code

Algorithm – Fruchterman Example

Algorithm – Kamada Kawai (KK)

• KK algorithm is also based on the idea of a balanced spring system and energy minimization.

• However, in difference to FR-Layout, KK-Layout attempts to utilize the derivatives of the force equations to achieve faster convergence.

• Equation:

Algorithm – Kamada Kawai • Pseudo Code

Algorithm – Kamada Kawai Example

Future Aims

• Implement more algorithms• Develop more application for member graph• Develop this application to be able to run

under OSes such as Linux, Mac OS • Inter-act with mailing list, social network

system, forum to create graphs

Difficulties

• Time constrains.• Limited experience.• OS-free support.• Size of input data (performance)• Social networks are not standardized. • Not all social networks are open.

THANK YOU!

Change LogNo Date Author Details Slides

1 2010-10-28 PhatVD Create new All slides

2 2010-10-28 Team Review All slides

3 2010-10-31 PhatVD Edit All slides

4 2010-11-07 Team Review All slides

5 2010-11-23 Team Review All slides