Commit f8f51b0f9bc55364e2c53e433e6229d203ccf4de

Anon Ray
Sun Sep 22 22:22:26 IST 2013

Tree SHA1: 6e5e14b
Parent SHA1: 752ca05 (Fix typo in return statement)
raw diff | raw patch

Add capabbility to split in multiple graphs for Radio Stations

Diff rendering mode:
inline
side by side


69	69	CRP.populateDropdown();
70	70	$('#slider-container').html('<div class="span4" id="slidex"></div><div class="span4 offset2" id="slidey"></div>');
71	71	$('.select').change(CRP.paramChange);
	72	$('#split-radio-station').click(CRP.splitRadioStationChange);
72	73	$('#plotGraph').click(CRP.plot);
73	74
74	75	$('#viz-overlay').hide();
…	…
91	91
92	92	/* UI controls and event handlers */
93	93
	94	CRP.split_station = false;
	95
94	96	//populate the dropdowns dynamically from data
95	97	CRP.populateDropdown = function() {
96	98	$('.select').html('<option></option>');
…	…
111	111	}
112	112	};
113	113
	114	CRP.splitRadioStationChange = function(event) {
	115	if($('#split-radio-station:checked').length) {
	116	CRP.split_station = true;
	117	}
	118	else {
	119	CRP.split_station = false;
	120	}
	121	};
	122
114	123	CRP.vizParams = {
115	124	'stations': []
116	125	};
…	…
270	270	};
271	271
272	272	CRP.plot = function() {
	273	$('#viz-container').html('');
273	274	var params = CRP.getParams();
274	275	var data = [];
275	276	_.each(CRP.vizParams.stations, function(station) {
…	…
279	279	});
280	280	data.push(temp_data);
281	281	});
282		data = _.flatten(data);
	282	if(CRP.split_station === false) {
	283	data = _.flatten(data);
	284	CRP.groupAndPlot(data, params, '#viz-container');
	285	}
	286	else {
	287	$('#viz-container').append('<div id="new-containers"></div>');
	288	_.each(data, function(d, i) {
	289	//radio station
	290	var container = 'radiostation'+i;
	291	var radiostation = CRP.stationMap[CRP.vizParams.stations[i]];
	292	$('#new-containers').append('<h4>'+radiostation+'</h4><div id="'+container+'"></div>');
	293	CRP.groupAndPlot(d, params, '#'+container);
	294	});
	295	}
	296	};
	297
	298	CRP.groupAndPlot = function(data, params, container) {
283	299	if(CRP.research_type === 'field') {
284	300	var result = CRP.group(data, params.x_param, params.y_param);
285	301	console.log(result);
286	302	result = CRP.normalizeData(result);
287		CRP.drawViz(result, params.x_param, params.y_param);
	303	CRP.drawViz(result, params.x_param, params.y_param, container);
288	304	}
289	305	else {
290	306	var result = CRP.groupGrinsdata(data, params.x_param, params.y_param);
291	307	console.log(result);
292		CRP.drawViz(result);
	308	CRP.drawViz(result, parmas.x_param, params.y_param, container);
293	309	}
294	310	};
295	311
…	…
315	315	//like instead of unknown key/value pairs it could return an array of objects
316	316	//like: {'x': <x-param-key>, 'y': <y-param-key>, value: <value>}
317	317
318		CRP.drawViz = function(data, x_param, y_param) {
	318	CRP.drawViz = function(data, x_param, y_param, container) {
319	319	//truncate all NA values - they don't really make any contribution in
320	320	//interpreting/analysing the data
321	321	for(var i in data) {
…	…
334	334	if(_.indexOf(CRP.invalidCols, x_param) > -1 \|\|
335	335	_.indexOf(CRP.invalidCols, y_param) > -1) {
336	336
337		CRP.drawScatterplot(data);
	337	CRP.drawScatterplot(data, container);
338	338	}
339	339	else {
340		CRP.drawBarChart(data);
	340	CRP.drawBarChart(data, container);
341	341	}
342	342	};
343	343
344	344
345		CRP.drawScatterplot = function(data) {
	345	CRP.drawScatterplot = function(data, container) {
346	346	//check kind of data - x and y both or only x params
347	347	var xkeys = d3.keys(data);
348	348	var first_key = xkeys[0];
…	…
350	350	var h = 330;
351	351	var w = $('.container').css('width').split('px')[0] - 100;
352	352	var margin = {left: 30, right: 30, top: 30, bottom: 100};
353		$('#viz-container').html('');
	353	$(container).html('');
354	354
355	355	//check kind of data - x and y both or only x params
356	356	if(typeof data[first_key] === 'object') { // its a grouped data with x and y
…	…
403	403	.orient('left')
404	404	.tickFormat(d3.format('.2s'));
405	405
406		var chart = d3.select('#viz-container').append('svg')
	406	var chart = d3.select(container).append('svg')
407	407	.attr('class', 'scatterplot')
408	408	.attr('width', margin.left + w + margin.right)
409	409	.attr('height', margin.top + h + margin.bottom)
…	…
524	524	d3.select('#tooltip').style('display', 'none');
525	525	};
526	526
527		CRP.drawBarChart = function(data) {
	527	CRP.drawBarChart = function(data, container) {
528	528	//check kind of data - x and y both or only x params
529	529	var xkeys = d3.keys(data);
530	530	var first_key = xkeys[0];
…	…
532	532	var h = 330;
533	533	var w = $('.container').css('width').split('px')[0] - 100;
534	534	var margin = {left: 30, right: 30, top: 30, bottom: 100};
535		$('#viz-container').html('');
	535	$(container).html('');
536	536
537	537	//check kind of data - x and y both or only x params
538	538	if(typeof data[first_key] === 'object') { // its a grouped data with x and y
…	…
582	582	.orient('left')
583	583	.tickFormat(d3.format('.2s'));
584	584
585		var chart = d3.select('#viz-container').append('svg')
	585	var chart = d3.select(container).append('svg')
586	586	.attr('class', 'barchart')
587	587	.attr('width', margin.left + w + margin.right)
588	588	.attr('height', margin.top + h + margin.bottom)
…	…
698	698	.orient('left')
699	699	.tickFormat(d3.format('.2s'));
700	700
701		var chart = d3.select('#viz-container').append('svg')
	701	var chart = d3.select(container).append('svg')
702	702	.attr('class', 'barchart')
703	703	.attr('width', margin.left + w + margin.right)
704	704	.attr('height', margin.top + h + margin.bottom)

Commit f8f51b0f9bc55364e2c53e433e6229d203ccf4de

Gitorious