Posts Tagged ‘graphs

Complete graph creator using Raphael.js

leave a comment »

Complete graph creator

This one is very similar to A Simple Gravity Model except that this one is made with javascript (Raphael.js)  and does not has the gravity model for the width of the links. I made this as a demonstration for how easy it is to make interactive graphics with javascript. With less than 40 lines of code, with raphael and javascript we can create this complete graph generator where you can click the canvas to create nodes and click and drag the nodes to move them. the links are generated and updated based on the position of the nodes. I am planning to create a full suite of tools for making and analysing networks online for which this is the first step. [ link: http://www.bala-ucl.co.uk/jsgraph/index.html ]

Code:

var paper = Raphael(0,0,'100%','100%');
var background = paper.rect(0,0,'100%','100%').attr({'fill':'#ddd','stroke-width':'0'});
var circles = [];
var lines = [];
background.click(function(event){
	circles.push(new circle(event.clientX,event.clientY));
	refreshLines(circles);
});	
function refreshLines(arr) {
	for (i in lines) {
		lines[i].remove();
	}
	for (i in arr) {
		for (j in arr) {
			lines.push(new line(arr[i].attrs.cx,arr[i].attrs.cy,arr[j].attrs.cx,arr[j].attrs.cy));
		}
	}
}
function circle (mx,my) {
	return paper.circle(mx,my,10).attr({fill:'#444',stroke:'#444'}).drag(
		function(da,db,x,y){
			this.attr({cx:x,cy:y});
		},
		function(){
			var color = this.attrs.fill=="#444" ? '#f00' : '#444';
			this.attr({fill:color});
		},
		function(){
			var color = this.attrs.fill=="#444"; ? '#f00' : '#444';
			this.attr({fill:color});
			refreshLines(circles);
		}
	);
}	
function line (sx,sy,ex,ey) {
	return  paper.path( "M"+sx+","+sy+" "+"L"+ex+","+ey ).attr({stroke:'#444'});
}

Written by sbmkvp

November 11, 2014 at 4:43 pm

New Project – RefNet

leave a comment »

After trying to organise the reading for my research last week, I realised that research process in my mind is not organised as a list or a checklist but as a network of interconnected ideas from various sources. This is where I felt the reference managers which I was using were failing miserably. Though they did a good job in organising the meta data on the papers, books and articles which I was reading and including them as references in my write-up, they did not help me in the research process. My research still remained as an exercise where I go through search engines and list of references in other papers manually and trying to put together all the stuff in my mind by myself. This is where I decided that If I cannot find a tool which I want I would rather build one myself and also that all the things I learned about networks and web development in the past year has to be put in use somewhere.

So here it is, RefNet – A reference manager which organises the references/bibliography as network of objects rather than a list. The idea is to build a tool where you can drag and drop papers and books as objects, and based on the citations in them they are organised as network of interconnected ideas. I started a github repository and using vivagraph library (inspired from here), put together a very preliminary working concept and added some data on the things I have been reading the past week. The result is as below, (click the image for interactive version)

refnet

The plan forward is to make the tool more dynamic with drag and drop option, automatic citation importing from a database such as web of knowledge, possibly a suggestion tool to say which papers to read further based on the network properties and finally a plugin to integrate this with google docs/ ms word. As mentioned earlier the project and code as of now is up on github (here) and would be really happy to collaborate with interested people on building this.