nezuQ/index.html

## 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>
	<!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>