HighChart｜Mash up the Linked Open Data

HighChart = function(containerId, options) {
	new Application.highChart(containerId, options);
};

if (Application === "undefined" || !Application) {
	var Application = {};
}

Application.highChart = function() {
	this._init.apply(this, arguments);
};

Application.highChart.prototype = {
	
	_containerId : null,
	_options : null,
	_workId : null,
	_fileName : null,
	_highChartContainerId : null,
	_appProperty : null,
	
	_default : {
		filterNamespace : "http://linkdata.org/",
		propertyFilterNamespace : "http://linkdata.org/property",
		propertyFilterExpression : "Expression",
		subjectUriPhrase : "http://atted.jp/data/locus/",
		subjectPPDBUriPhrase : "http://ppdb.agr.gifu-u.ac.jp/ppdb/cgi-bin/display.cgi?organism=At&gene=",
		selectSubjectClass : "selectSubject",
		drawArea : "drawArea"
	},
	
	_init : function(containerId, options) {
		this._containerId = containerId;
		this._options = $.extend({}, this._default, options);
		this._workId = this._options.workId;
		this._fileName = this._options.fileName;
		var date = new Date();
		this._highChartContainerId = "high_chart_" + date.getTime();
		this._initAppProperty(this._options);
		this._initView();
		this._initSelect();
	},
	
	_initAppProperty : function(opts) {
		var obj = {
			workId : opts.workId,
			fileName : opts.fileName
		};
		this._appProperty = new Application.motifProperty(obj);
	},
	
	_initView : function() {
		var self = this;
		var sb = [];
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Select Subject</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<select class='" + self._default.selectSubjectClass + "'>";
		sb[sb.length] = "<option value='" + -1 + "'>-- Select Subject --</option>";
		$.each(LinkData.getSubjects(self._workId, self._fileName), function(subKey, subValue) {
			var label = self._getLabel(subValue);
			sb[sb.length] = "<option value='" + subValue + "'>" + label + "</option>";
		});
		sb[sb.length] = "</select>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div id='" + self._highChartContainerId + "'></div>";
		$("#" + this._containerId).append(sb.join(""));
	},
	
	_initSelect : function() {
		var self = this;
		$select = $("#" + self._containerId + " ." + self._default.selectSubjectClass);
		$select.change(function() {
			var subject = $("option:selected", this).val();
			var dataArray = self._getDataArray(self._workId, self._fileName, subject);
			var xCategory = self._getXCategory(self._workId, self._fileName, subject);
			self._drawChart(self._highChartContainerId, dataArray, xCategory);
		});
	},
	
	_getDataArray : function(workId, fileName, subject) {
		var self = this;
		var tripleList = LinkData.getTriplesBySubject(workId, fileName, subject);
		var dataArray = [];
		var dataObject = {};
		var array = [];
		var duplicateProperty = [];
		$.each (tripleList, function(tKey, tValue) {
			var property = tValue.property;
			if (property.indexOf(self._options.filterNamespace) == -1) {
				return;
			}
			if ($.inArray(property, duplicateProperty) > -1) {
				return;
			}
			if (property.indexOf(self._options.propertyFilterNamespace) == -1 || property.indexOf(self._options.propertyFilterExpression) > -1) {
				array.push(parseFloat(tValue.object));
				duplicateProperty.push(property);
			}
		});
		dataObject.name = self._getLabel(subject);
		dataObject.data = array;
		dataArray.push(dataObject);
		return dataArray;
	},
	
	_getXCategory : function(workId, fileName, subject) {
		var self = this;
		var tripleList = LinkData.getTriplesBySubject(workId, fileName, subject);
		var array = [];
		var duplicateProperty = [];
		$.each (tripleList, function(tKey, tValue) {
			var property = tValue.property;
			if (property.indexOf(self._options.filterNamespace) == -1) {
				return;
			}
			if ($.inArray(property, duplicateProperty) > -1) {
				return;
			}
			if (property.indexOf(self._options.propertyFilterNamespace) == -1 || property.indexOf(self._options.propertyFilterExpression) > -1) {
				var label = self._getPropertyLabel(property);
				label = (label && label.trim().length != 0) ? label : self._getLabelAfterHash(property);
				array.push(label);
				duplicateProperty.push(property);
			}
		});
		return array;
	},
	
	_drawChart : function(containerId, dataArray, xCategory) {
		var self = this;
		var chart = new Highcharts.Chart({
			chart: {
				renderTo: containerId,
				type: 'line',
				marginRight: 130,
				marginBottom: 125
			},
			title: {
				text: self._fileName
			},
			xAxis: {
				categories: xCategory,
				labels : {
					rotation: 315
				}
			},
			tooltip: {
				formatter: function() {
					return '<b>'+ this.series.name + '</b><br/>' + this.x + ' [' + this.y + ']';
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 100,
				borderWidth: 0
			},
			series: dataArray
 		});
	},
	
	_getLabel : function(value) {
		var self = this;
		if (value.indexOf(self._default.subjectUriPhrase) > -1) {
			var propLabel = value;
			var arr = value.split(self._default.subjectUriPhrase);
			if (arr.length > 1) {
				propLabel = decodeURIComponent(arr[1]);
			}
			return propLabel;
		} else if (value.indexOf(self._default.subjectPPDBUriPhrase) > -1) {
			var propLabel = value;
			var arr = value.split(self._default.subjectPPDBUriPhrase);
			if (arr.length > 1) {
				propLabel = decodeURIComponent(arr[1]);
			}
			return propLabel;
		} else if (value.indexOf("#") > -1) {
			return self._getLabelAfterHash(value);
		}
		return value;
	},
	
	_getPropertyLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
			propLabel = this._appProperty.getPropertyNameByLabel(propLabel);
		}
		return propLabel;
	},
	
	_getLabelAfterHash : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	}
	
};

Application.motifProperty = function() {
	this._init.apply(this, arguments);
};

Application.motifProperty.prototype = {

_options : null,
	_propMap : null,
	_nameMap : null,
	
	_default : {
		nameMappingNamespace : "http://atted.jp/help/slide_GeneExp_v3.shtml#",
		nameMappingProperty : "http://purl.org/dc/elements/1.1/title",
		propertyMappingExpression : "Expression",
		propertyMappingWorkUri : "http://linkdata.org/work"
	},
	
	_init : function(options) {
		this._options = $.extend({}, this._default, options);
		this._propMap = [];
		this._nameMap = [];
		this._initPropMap(this._options);
		this._initNameMap();
	},
	
	_initPropMap : function(opts) {
		var self = this, workId = opts.workId, fileName = opts.fileName;
		$.each(LinkData.getProperties(workId, fileName), function(key, value) {
			var label = self._getLabel(value);
			if (!self._propMap[label]) {
				self._propMap[label] = value;
			}
		});
	},
	
	_initNameMap : function() {
		var self = this, nameKey;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				$.each(LinkData.getSubjects(workId, fileName), function(subKey, subValue) {
					nameKey = self._getNameKey(subValue);
					if (nameKey) {
						var nameArray = LinkData.getObjects(workId, fileName, subValue, self._options.nameMappingProperty);
						if (nameArray && nameArray.length > 0) {
							self._nameMap[nameKey] = nameArray[0];
						}
					}
				});
			});
		});
	},
	
	_getNameKey : function(value) {
		var key;
		if (value && value.indexOf(this._options.nameMappingNamespace) >= 0) {
			key = value.split("#")[1];
		}
		return key;
	},
	
	_getLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	},
	
	getOptionArray : function() {
		var self = this, list = new Object();
		var workId = self._options.workId, fileName = self._options.fileName;
		$.each(LinkData.getProperties(workId, fileName), function(key, value) {
			if (value.indexOf(self._options.propertyMappingWorkUri) > -1 || value.indexOf(self._options.propertyMappingExpression) > -1) {
				var propLabel = self._getLabel(value);
				var name = self._nameMap[propLabel];
				list[propLabel] = (name) ? name : propLabel;
			}
		});
		return list;
	},
	
	getPropertyByLabel : function(label) {
		return this._propMap[label];
	},
	
	getPropertyNameByLabel : function(label) {
		return this._nameMap[label];
	}

};

$(document).ready(function(){
	var containerId = "container";
	var options = {
		workId : "rdf1s295i",
		fileName : "AtGenExpress_ATTED_Flowering"
	}
	new Application.highChart(containerId, options);
});

データ作品	テーブルデータ
GenoCon2 Challenge A - Developmental conditions 作者:GenoCon 更新日:2012年9月11日 5741 ダウンロード, 16 アプリケーション	Flowering Fruit_Seeds Leaf Root Seedling Stem Whole_Plant
GenoCon2 Challenge A - Developmental Coexpression (AtGenExpress + ATTED-II promoter motif) 作者:GenoCon 更新日:2013年1月17日 4470 ダウンロード, 12 アプリケーション Developmental Microarray Expression Data (AtGenExpress) of plant developmental tissues, combined with CEG coexpression analysis regulatory (7mer) motif calculations (ATTED-II). We took the median of triplicate measurements from AtGenExpress, then sorted the developmental series into plant tissues, with one category for seedlings (8 days old or less) and another for whole plants (older than 8 days). <br><br> <strong>References</strong> (for ATTED-II):<br> <a href="http://www.ncbi.nlm.nih.gov/pubmed/17130150">http://www.ncbi.nlm.nih.gov/pubmed/17130150</a><br> <strong>References</strong> (for AtGenExpress)<br> <a href="http://www.ncbi.nlm.nih.gov/pubmed/15806101">http://www.ncbi.nlm.nih.gov/pubmed/15806101</a>	AtGenExpress_ATTED_Flowering AtGenExpress_ATTED_Fruit_Seeds AtGenExpress_ATTED_Leaf AtGenExpress_ATTED_Root AtGenExpress_ATTED_Seedling AtGenExpress_ATTED_Stem AtGenExpress_ATTED_Whole_Plant Heptamer_elements