Skip to content

Instantly share code, notes, and snippets.

@nezuQ
Last active December 27, 2015 07:58
Show Gist options
  • Save nezuQ/7292356 to your computer and use it in GitHub Desktop.
Save nezuQ/7292356 to your computer and use it in GitHub Desktop.
SPARQLクエリ発行画面をD3.jsで作ってみた。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.result {
border: 2px black solid;
}
.result th,.result td {
border: 1px gray solid;
}
</style>
<body onload="init();">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<span>SPARQL EndPoint URL:</span>
<br/>
<input type="text" id="txtUrl" style="width: 250px" />
<br/>
<span>Default Graph IRI:</span>
<br/>
<input type="text" id="txtGraphUri" style="width: 250px" />
<br/>
<span>Query Text:</span>
<br/>
<textarea id="txtQuery" style="width: 800px; height:50px; vertical-align:top;"></textarea>
<br/>
<input type="button" value="検索" onclick="search(txtUrl.value,txtGraphUri.value,txtQuery.value);" />
<br/>
<script>
var txtUrl;
var txtGraphUri;
var txtQuery;
function init() {
txtUrl = document.getElementById("txtUrl");
txtUrl.value = "http://ja.dbpedia.org/sparql";
txtGraphUri = document.getElementById("txtGraphUri");
txtGraphUri.value = "http://ja.dbpedia.org";
txtQuery = document.getElementById("txtQuery");
txtQuery.value = "select distinct * where { <http://ja.dbpedia.org/resource/東京都> ?p ?o . }";
}
function search(url,graphuri,query) {
d3.select(".result").remove();
var url = txtUrl.value;
var graphuri = txtGraphUri.value;
var query = txtQuery.value;
d3.json(url + "?default-graph-uri=" + encodeURIComponent(graphuri) + "&query=" + encodeURIComponent(query) + "&format=application%2Fsparql-results%2Bjson&timeout=0&debug=on",
function (error, json) {
var links = json["results"]["bindings"];
if(0 < links.length){
var headernames = Object.keys(links[0]);
var table = d3.select("body").append("table").attr("class", "result");
var headerrow = table.append("tr");
var header = headerrow.selectAll("th")
.data(headernames)
.enter()
.append("th")
.html(function (d) { return d; });
var row = table
.selectAll("tr")
.data(links)
.enter()
.append("tr");
var data = row.each(function (d) {
var self = d3.select(this);
headernames.forEach(function (name) {
if(d[name].value.match('^http.+')){
self.append("td").html('<a href="javascript:searchByURL(\'' + d[name].value + '\');" >' + d[name].value + '</a>');
}else{
self.append("td").text(d[name].value);
}
});
});
};
});
}
function searchByURL(uri){
txtUrl.value = uri.match('http://[^/]+')[0] + '/sparql';
txtGraphUri.value = uri.match('http://[^/]+')[0] ;
txtQuery.value = "select distinct * where { <" + uri + "> ?p ?o .}";
search(txtUrl.value,txtGraphUri.value,txtQuery.value);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment