Difference between revisions of "FORCE DIRECTED NETWORK (SPRING ALGORITHM) GRAPH VIEWER"

From Protein Prediction 2 Winter Semester 2014
(RoadMap)
(RoadMap)
Line 61: Line 61:
 
[[File:data.png | 500px | center | data]]
 
[[File:data.png | 500px | center | data]]
   
==RoadMap==
+
=RoadMap=
 
[[File:road.jpg | 500px | center | mockup 1]]
 
[[File:road.jpg | 500px | center | mockup 1]]
   
Roadmap: Implementation
+
==Roadmap for Implementation==
   
Cytoscape Worker API :
+
===Cytoscape Worker API :===
 
https://github.com/cytoscape/cytoscape.js/blob/unstable/src/worker.js
 
https://github.com/cytoscape/cytoscape.js/blob/unstable/src/worker.js
   
  +
==First Week(21.11.2014 - 27.11.2014)==
04.12 Goal
 
  +
  +
==Second Week(28.11.2014 - 4.12.2014)==
  +
  +
==Third Week(28.11.2014 - 4.12.2014)==
  +
  +
Goal
 
Understand Max Goals
 
Understand Max Goals
 
To define this Milestone Plan
 
To define this Milestone Plan
Line 91: Line 97:
 
synchronization between workers (avoid communication between them in the beginning)
 
synchronization between workers (avoid communication between them in the beginning)
   
  +
==Fourth Week(5.12.2014 - 12.12.2014)==
11.12
 
 
Basic Program which is parallelised (Nested in Cytoscape)
 
Basic Program which is parallelised (Nested in Cytoscape)
 
Please mind the Coding Style of Cytoscape
 
Please mind the Coding Style of Cytoscape
Line 98: Line 104:
 
i.e. BenchmarkJS
 
i.e. BenchmarkJS
   
  +
==Fifth Week(13.12.2014 - 18.12.2014)==
18.12
 
 
Report, work on Spread Layout Algorithm. Some functions parallelized if possible.
 
Report, work on Spread Layout Algorithm. Some functions parallelized if possible.
   
  +
==Sixth Week(19.12.2014 - 29.12 .2014)==
29.12 (Monday)
 
 
Run the first Layout Algorithm (pick one algorithm) with multiple cores (parallelized)
 
Run the first Layout Algorithm (pick one algorithm) with multiple cores (parallelized)
 
Test and BenchmarkJS
 
Test and BenchmarkJS
 
 
   
  +
==Seventh Week(30.12.2014 - 05.01 .2015)==
05.01 (Monday)
 
   
08.01 Final Presentation
+
==08.01.2015 Final Presentation==
   
15.01 Submission Deadline
+
==15.01.2015 Submission Deadline==
   
 
= Source Code =
 
= Source Code =

Revision as of 22:30, 30 December 2014

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.

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).

Mockups

mockup 1
mockup 2
mockup 1
mockup 4


Functionality

  • Zoom in and Zoom out of the graph.
  • Distance of a node from the rest of the network is determined by the number of nodes it is connected to.
  • Selection by the number of neighbors
  • Coloring by various thresholds
  • Dividing the whole network into module based on the modularity.
  • Applying filters.
  • Defining the layout of your choice.
  • Exporting the visualisation as an image.

Features

  • Import from Text format
  • Export to image
  • Visualization Using FORCE DIRECTED NETWORK

Application Design

  • Fancy Libraries
    • d3.js
    • jQuery
    • JavaScript InfoVis Toolkit

https://www.youtube.com/watch?v=3qo6EqwWmS0

Data

The input data should be in json/csv format

E.g: 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"  
           }  
         }]


data

RoadMap

mockup 1

Roadmap for Implementation

Cytoscape Worker API :

https://github.com/cytoscape/cytoscape.js/blob/unstable/src/worker.js

First Week(21.11.2014 - 27.11.2014)

Second Week(28.11.2014 - 4.12.2014)

Third Week(28.11.2014 - 4.12.2014)

Goal Understand Max Goals To define this Milestone Plan Decide on the Approach to parallelize code Reading List (BenchmarkJS, ParallelJS, Google Dev Tools) Discuss with Max Debug Tools of Cytoscape

Max Comments & Hints: Separate the Graph into separate components (Subgraph components, Subsets of the Graph (Force-directed Layout)) Normalization, Fitting Step in the End to resolve conflicts if subset has connection / edges between Approach Arbor uses (good example to look at). Own Worker API Lot’s of different ways to parallelize things (depends on the layout) Spread Layout using ParallelJS (convert using Cytoscape Worker API) One thread is offload the computation Always measure performance on the same machine! (console, timer, profiling) It would be great to have a automated benchmarking

Rmaco: https://github.com/cytoscape/cytoscape.js/pull/700

Unexpected difficulties: synchronization between workers (avoid communication between them in the beginning)

Fourth Week(5.12.2014 - 12.12.2014)

Basic Program which is parallelised (Nested in Cytoscape) Please mind the Coding Style of Cytoscape Send Graph Data to the Worker Program and back Benchmark the simple program i.e. BenchmarkJS

Fifth Week(13.12.2014 - 18.12.2014)

Report, work on Spread Layout Algorithm. Some functions parallelized if possible.

Sixth Week(19.12.2014 - 29.12 .2014)

Run the first Layout Algorithm (pick one algorithm) with multiple cores (parallelized) Test and BenchmarkJS


Seventh Week(30.12.2014 - 05.01 .2015)

08.01.2015 Final Presentation

15.01.2015 Submission Deadline

Source Code

People

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

Additional Links