Posts Tagged ‘visualization

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'});
}
Advertisements

Written by sbmkvp

November 11, 2014 at 4:43 pm

First Crowdsourced Project.

with one comment

crowdsourced

The Image above is a static screenshot of dynamic, interactive and crowdsourced map I created to map people from School of Planning and Architecture, Delhi and see how they are distributed all over the world. I initially circulated within my batch and later in a broader group and the response has been really good so far with the counter crossing 100 as of yesterday.Though it is not some thing really advanced or jaw dropping, I am really excited to see how easy it is to collect and visualize data (especially geographic) if one knows the right tools. The tools used are MySQL server, Apache (PHP) server, JavaScript (with jQuery), Google Maps API v3, Chrome and Sublimetext.

The visualisation is similar to what I did for the IRIS competition earlier but the difference is in the backend. Instead of reading a preset datafile and displaying it, this map here has a MySQL database in backend and queries it through PHP and visualises the result. It also has PHP based POST mechanism to send data to the database from the user. The best part is that none of the data in the image above is collected or entered by me (except for my two data points). It is rather generated by the people who individually entered their own locations.

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

Accidents in United Kingdom over 2010 – Animation

leave a comment »

Continuing from the last post, this is a visualization of essentially the same data but with a temporal element as well. The video below shows the occurrence of road accidents in UK during 2010 as it happened in time. Each frame in the video adds an hour of accidents to the canvas as bright blue dots and a second in the video is equivalent to 2 days in real time. The light blue shadow is left behind by previously occurred accidents building a cumulative map. As before, the animation is built with processing + blender and the data is cleaned with R and excel. To be honest there nothing much to observe and infer from the visualization at this level except for the small breathing effect which may be due to the peak hours and nights in traffic and how the accident locations correlates with heavily populated areas with dense roads. The video is embedded below and I would recommend increasing the HD setting to 720p for a good quality, comprehensible video.

The source for the data is from UK Data service at here.

Written by sbmkvp

March 26, 2013 at 5:51 pm

Accidents in UK – Initial Visualization

leave a comment »

As a part of the data collection for the dissertation, I just got my hands on a huge set of records detailing every accident happened in 2010 within UK and as the first step towards interpreting the data I tried to map of all the accidents recorded as points in their relative locations. After 2-3 hours of struggle with R [for data cleaning] and processing [for visualization , the final result is as below. The map below shows every accident recorded in UK in 2010 as a cyan dot mapped in the canvas relative to each other (approx. not to scale). Though there is already lot of work done in visualizing this data set [1] [2] [3] [4] [5] , I think this is a solid first step for me explore and build confidence in this area. This being a start I think i’ll be posting a lot of similar stuff here as the dissertation progresses.

resized

The source for the data is from UK Data service at here. [note: Click the image for a larger version of the map]

Written by sbmkvp

March 25, 2013 at 6:23 pm