HighChart｜Mash up the Linked Open Data

Play
JavaScript
CSS
HTML
概要
保存した実行結果

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

Initial content

このアプリをForkして新しいアプリを作るダウンロード

オープンデータを使ってアプリを作ろう

アプリケーションの作成と公開をサポートするサイト

アプリ作品の情報

HighChart

アプリケーション

ニュースフィード