Posts Tagged ‘Javascript

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.

Webkit Speech API and Google Maps

with 4 comments

For the past couple of weeks in addition to working for the dissertation project, I was working sporadically on a demo of a speech integrated map using x-webkit-speech API provided by Google Chrome and Google Maps JavaScript API.Now that the dissertation is over, here is the final polished version of the demo, (http://goo.gl/pqYUsN)

Demo for mixing -x-webkit-speech and google maps API

The current functions available with this map are,

1) Speak to navigate – Click on the microphone button (or  click “ctrl+alt+.” ) on the text box and start speaking. The field will recognise when you stop speaking, analyse and interpret the sound as text and if it is a place,  takes you right to place you just spoke.

2) Zoom and Pan – you can use the same trick with some preliminary commands as well, the system as of now understands ,

east direction“, “west direction“, “south direction” and “north direction” will pan the map in the corresponding direction.
zoom in/ zoom out ” zooms the map.

3) Other commands,

satellite – switches the map to a satellite map
simple – switched the map to, above shown simplified default look and feel.

As usual, I request the readers to give it a try and share the results & problems in the comments section below. Also feel free to put in your suggestions and point out any mistakes.

An Eye on IRIS – Competition Entry

leave a comment »

Our team (Daniel, Kostas and I) have just finished doing 3 entries for the  competition – An eye on IRIS, which aims to produce visualization of the data on esteems won by UCL researchers all around the world for which had been provided with a small subset of the IRIS database.

The major aspects of the work was Geo-coding the database using the address/organisation information present in it and Visualizing the database so that it gives both overall and detailed information about the database. We spent a lot of time and energy in the cleaning and organizing the data using Omniscope (credits: Dan) and then used Omniscope, JavaScript, Google Maps API and Processing  to visualize it. Below is one of the three visualizations produced by the team which uses JS and Google Maps API. The interactive version of the visualizations can be found at http://balaspa.comuf.com/

An Eye on IRIS - Competition Entry

This particular visualisation uses heatmapLayer feature from the visualisation library, marker clusterer from markercluster.js, geodesic lines for the flow lines and CSS+ JavaScript to display the info window.

Written by sbmkvp

June 30, 2013 at 9:44 pm

Experiments with Google Maps API

leave a comment »

After spending lot of time with the KML documentation and C, It was time for me to go beyond the associated platform restrictions (C programs are compiled for a single platform) and start doing the computing and displaying maps on the web. This sparked my venture into the Google maps API and  JavaScript.

The starting point of this entire exercise was my short internship with Report Bee (A tech start-up with the vision to revolutionize the education industry).  My job there was to inquire into the ways in which geographic visualization can enrich the analysis of the data present in the results of public examinations in Tamil Nadu and device a frame work for its implementation. It was an amazing ride to for me to start from absolutely zero, with an oversimplified view of things and vague ideas and go on to find out that the whole thing is neither simple nor easy as I thought. Though the exercise proved to have an extremely large scope to be covered in such a short internship, I picked up a lot of knowledge while figuring out my way.

My first challenge, after getting lost in the quagmire of tools and platforms, was to finalize a platform to  learn and work on. The main dilemma was between Google Maps and Open Street Maps. While I liked the freedom and openness of OSM with the base data for the maps, I also found Google Maps really compelling, with its relatively simple JavaScript API and extensive documentation. Though there was a lot of restrictions introduced in Google Maps recently, I chose it over OSM considering its simplicity and my previous experience with KML. Moreover almost all the maps API (Google maps, Map-Box, Bing Maps etc.) had JavaScript in the core so I thought may be it won’t be hard to learn to use others platforms if I get used to one of them.

So after almost three weeks of wrestling with Google Maps API and JavaScript. The end result was that I was able to produce a website with a custom styled map highlighting some of the features in the base map with some kind of user input to point location and has an implementation of Geo-coding API for finding and navigating to addresses. The whole process was extremely interesting and especially JavaScript surprised me with its simplicity and flexibility. I have attached a screenshot of the result below and the website can be viewedhere. (http://balaspa.50webs.com/mapv2/)

Experiments with Google Maps API.

Results

The map highlights all the parks in green colour. The instruction are as below

  1. Zoom and Pan can be done through the mouse as it is done in Google Maps.
  2. Clicking on the map creates a Placemark and adds it to the map.
  3. The ‘Eye’ button on the top right corner toggles the visibility of the Placemarks.
  4. Double clicking the eye clears all the Placemarks.
  5.  The search box below navigates to the location typed on pressing the ‘return’ key.

Since I have covered a lot of basics in this exercise (Customized Base map, simple ways to input and output data, rudimentary ways to build a UI over the map), my next step would be learning to organize a data sets in a server side database and plotting it on the map and also to look into the Open Street Map API parallelly.

Update (21 August 2013): Was randomly reading about the Google speech recognition API for chrome and stumbled upon a simple way to integrate speech based input fields in websites. Updated the search box with speech recognition. In my trials it looks clean enough and works well enough. Wish there were more options in controlling the behaviour of the box but I think its just a matter of figuring out.

Update (21 August 2013): Updated the speech recognition again. Now press “ctrl+shift+.” and speak the place name the page directly takes you there. No more clicking and pressing enter.

Written by sbmkvp

October 29, 2012 at 4:21 am