概要

RDF用クエリ言語「SPARQL」のクエリを、
DBPedia（Wikipedia）へ発行するHTMLファイルを公開する。
データの取得・変換処理はD3.jsで行っている。
デモ

コード

index.html
<!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>
SPARQLクエリ発行画面をD3.jsで作ってみた

概要

デモ

コード
