FORCE DIRECTED NETWORK (SPRING ALGORITHM) GRAPH VIEWER

From Protein Prediction 2 Winter Semester 2014
Revision as of 18:40, 19 November 2014 by Ppwikiuser (talk | contribs) (Data)
FORCE DIRECTED NETWORK

Mentors: PP2_CS_2014 mentors, Yana Bromberg (Rutgers University), Björn Grüning (Galaxy) gruening. (at) .informatik.uni-freiburg.de
Students: Kommanapalli Vasantha Kumari,Anuradha Ganapati,Ahsan ZiaUllah

Introduction

Force Directed Network is obtained by using the Force-directed graph drawing algorithms(SPRING ALGORITHM). This algorithm is mainly based on the forces assigned among the set of nodes and edges of a graph.The forces can be either atractive which is used to attract pairs of endpoints of the graph's edges towards each other or repulsive which is used to seperate all pairs of nodes.In equilibrium states for this system of forces,the edges tend to have uniform length(using spring forces) and the nodes which are not connected by any edge tend to be drawn further apart(due to electrical repulsion).

Aim & Objective

The objective of this project is to visualize a network (large networks of >2000 nodes) in a way that the distance of a node from the rest of the network is determined by the number of nodes it is connected to => the more neighbors a node has the larger is its distance from the network. The component must allow zooming in/out, selection by the number of neighbors, coloring by various thresholds and other graph-related features.

Mockups

Mockup.jpg

Application Design

Fancy Libraries

  • d3.js
  • jQuery
  • JavaScript InfoVis Toolkit

Data

The input data should be in json/csv format


var json = [{

     "adjacencies": [  
         "graphnode21",   
         {  
           "nodeTo": "graphnode1",  
           "nodeFrom": "graphnode0",  
           "data": {  
             "$color": "#557EAA"  
           }  
         }, {  
           "nodeTo": "graphnode13",  
           "nodeFrom": "graphnode0",  
           "data": {  
             "$color": "#909291"  
           }  
         }, {  
           "nodeTo": "graphnode14",  
           "nodeFrom": "graphnode0",  
           "data": {  
             "$color": "#557EAA"  
           }  
         }]

RoadMap