さっそく試してみる.
問い合わせは先はdbpedia.org.
SPARQL endpointはhttp://dbpedia.org/sparqlを利用する.
問い合わせ文は以下のとおり.
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>室町時代の日本人の生没年と解説を検索する.
PREFIX rdfs:<http://www.w3.org/2000/01/rdf-schema#>
PREFIX foaf:<http://xmlns.com/foaf/0.1/>
PREFIX dbpprop: <http://dbpedia.org/property/>
select * where {
?s rdf:type foaf:Person .
?s rdf:type <http://dbpedia.org/class/yago/PeopleOfMuromachiPeriodJapan> .
?s rdfs:label ?title.
filter(lang(?title)="ja").
?s rdfs:comment ?description.
filter(lang(?description)="ja").
?s dbpprop:dateOfBirth ?start .
?s dbpprop:dateOfDeath ?end .
?s foaf:isPrimaryTopicOf ?link .
}
Timelineの方は以下のとおり.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Timeline demo</title> | |
<!--[if IE]> | |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<script src="libs/timeline/api/timeline-api.js" type="text/javascript"></script> | |
<script type="text/javascript"> | |
var tl; | |
function onLoad() { | |
var eventSource = new Timeline.DefaultEventSource(); | |
var bandInfos = [ | |
Timeline.createBandInfo({ | |
eventSource: eventSource, | |
date: "Jun 1 1534 00:00:00", | |
width: "80%", | |
intervalUnit: Timeline.DateTime.YEAR, | |
intervalPixels: 10 | |
}), | |
Timeline.createBandInfo({ | |
overview: true, | |
eventSource: eventSource, | |
date: "Jun 1 1534 00:00:00", | |
width: "20%", | |
intervalUnit: Timeline.DateTime.YEAR, | |
intervalPixels: 200 | |
}) | |
]; | |
bandInfos[1].syncWith = 0; | |
bandInfos[1].highlight = true; | |
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); | |
//var sparql="/lod/result01.xml"; var sparql="http://dbpedia.org/sparql?query=以降省略"; | |
Timeline.loadXML(sparql,function(xml,url){eventSource.loadSPARQL(xml,url);}); | |
} | |
var resizeTimerID = null; | |
function onResize() { | |
if (resizeTimerID == null) { | |
resizeTimerID = window.setTimeout(function() { | |
resizeTimerID = null; | |
tl.layout(); | |
}, 500); | |
} | |
} | |
</script> | |
<style> | |
</style> | |
</head> | |
<body onload="onLoad();" onresize="onResize();"> | |
<div id="my-timeline" style="height: 600px; width: 800px; border:1px solid #aaa"></div> | |
<noscript> | |
This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you. | |
</noscript> | |
</body> | |
</html> |
結果波以下のとおり.
うーん.こんなことが簡単にできるなんて,
色々と使えそう.