ktym · August 29, 2015 14:03
diff --git a/d3-sparql-forcegraph.html b/d3-sparql-forcegraph.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <html>
  <head>
    <!-- Twitter Bootstrap http://getbootstrap.com/2.3.2/ を取得してインストール -->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css"/>
    <!-- D3.js http://d3js.org/ を取得してインストール -->
    <script src="lib/d3/d3.v3.min.js"></script>
    <script>
    function query() {
      var endpoint = d3.select("#endpoint").property("value")
      var sparql = d3.select("#sparql").property("value")
      var url = endpoint + "?query=" + encodeURIComponent(sparql)
      var mime = "application/sparql-results+json"
      d3.xhr(url, mime, function(request) {
        var json = request.responseText
        render(JSON.parse(json))
      })
    }
    function render(json) {
      var config = {
        "key1": "pref1",
        "key2": "pref2",
        "label1": "pref1_label",
        "label2": "pref2_label",
      }
      var graph = sparql2graph(json, config)
      var option = {
        "radius": 10,
        "charge": -200,
        "distance": 50,
        "width": 1000,
        "height": 750,
      }
      d3forcegraph(graph, option)
    }
    function sparql2graph(json, config) {
      var data = json.results.bindings
      var graph = {
        "nodes": [],
        "links": []
      }
      var check = d3.map()
      var index = 0
      for (var i = 0; i < data.length; i++) {
        var key1 = data[i][config.key1].value
        var key2 = data[i][config.key2].value
        var label1 = config.label1 ? data[i][config.label1].value : key1
        var label2 = config.label2 ? data[i][config.label2].value : key2
        if (!check.has(key1)) {
          graph.nodes.push({"key": key1, "label": label1})
          check.set(key1, index)
          index++
        }
        if (!check.has(key2)) {
          graph.nodes.push({"key": key2, "label": label2})
          check.set(key2, index)
          index++
        }
        graph.links.push({"source": check.get(key1), "target": check.get(key2)})
      }
      return graph
    }
    function d3forcegraph(json, config) {
      var svg = d3.select("body")
        .append("svg")
        .attr("width", config.width)
        .attr("height", config.height)
      var link = svg.selectAll(".link")
        .data(json.links)
        .enter()
        .append("line")
        .attr("class", "link")
      var node = svg.selectAll(".node")
        .data(json.nodes)
        .enter()
        .append("g")
      var circle = node.append("circle")
        .attr("class", "node")
        .attr("r", config.radius)
      var text = node.append("text")
        .text(function(d) {return d.label})
        .attr("class", "node")
      var force = d3.layout.force()
        .charge(config.charge)
        .linkDistance(config.distance)
        .size([config.width, config.height])
        .nodes(json.nodes)
        .links(json.links)
        .start()
      force.on("tick", function() {
        link.attr("x1", function(d) {return d.source.x})
            .attr("y1", function(d) {return d.source.y})
            .attr("x2", function(d) {return d.target.x})
            .attr("y2", function(d) {return d.target.y})
        text.attr("x", function(d) {return d.x})
            .attr("y", function(d) {return d.y})
        circle.attr("cx", function(d) {return d.x})
              .attr("cy", function(d) {return d.y})
      })
      node.call(force.drag)
    }
    </script>
    <style>
    .link {
      stroke: #999;
    }
    .node {
      stroke: black;
      opacity: 0.5;
    }
    circle.node {
      stroke-width: 1px;
      fill: RoyalBlue;
    }
    text.node {
      font-family: "sans-serif";
      font-size: 8px;
    }
    </style>
  </head>
  <body>
    <div id="query" style="margin: 10px">
      <h1>D3 forcegraph SPARQL</h1>
      <form class="form-inline">
        <label>SPARQL endpoint:</label>
        <div class="input-append">
          <input id="endpoint" class="span6" value="http://ja.dbpedia.org/sparql" type="text">
          <button class="btn" type="button" onclick="query()">Query</button>
        </div>
      </form>
      <textarea id="sparql" class="span9" rows=15>
 PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
 PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
 PREFIX dbpedia-owl: <http://dbpedia.org/ontology/>
 PREFIX prop-ja: <http://ja.dbpedia.org/property/>

 SELECT ?pref1 ?pref2 ?pref1_label ?pref2_label
 WHERE {
  ?pref1 prop-ja:隣接都道府県 ?pref2 .
  ?pref1 rdfs:label ?pref1_label .
  ?pref2 rdfs:label ?pref2_label .
  FILTER (LANG(?pref1_label) = 'ja')
  FILTER (LANG(?pref2_label) = 'ja')
 }
      </textarea>
    </div>
  </body>
 </html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<!-- Twitter Bootstrap http://getbootstrap.com/2.3.2/ を取得してインストール -->
	<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css"/>
	<!-- D3.js http://d3js.org/ を取得してインストール -->
	<script src="lib/d3/d3.v3.min.js"></script>
	<script>
	function query() {
	var endpoint = d3.select("#endpoint").property("value")
	var sparql = d3.select("#sparql").property("value")
	var url = endpoint + "?query=" + encodeURIComponent(sparql)
	var mime = "application/sparql-results+json"
	d3.xhr(url, mime, function(request) {
	var json = request.responseText
	render(JSON.parse(json))
	})
	}
	function render(json) {
	var config = {
	"key1": "pref1",
	"key2": "pref2",
	"label1": "pref1_label",
	"label2": "pref2_label",
	}
	var graph = sparql2graph(json, config)
	var option = {
	"radius": 10,
	"charge": -200,
	"distance": 50,
	"width": 1000,
	"height": 750,
	}
	d3forcegraph(graph, option)
	}
	function sparql2graph(json, config) {
	var data = json.results.bindings
	var graph = {
	"nodes": [],
	"links": []
	}
	var check = d3.map()
	var index = 0
	for (var i = 0; i < data.length; i++) {
	var key1 = data[i][config.key1].value
	var key2 = data[i][config.key2].value
	var label1 = config.label1 ? data[i][config.label1].value : key1
	var label2 = config.label2 ? data[i][config.label2].value : key2
	if (!check.has(key1)) {
	graph.nodes.push({"key": key1, "label": label1})
	check.set(key1, index)
	index++
	}
	if (!check.has(key2)) {
	graph.nodes.push({"key": key2, "label": label2})
	check.set(key2, index)
	index++
	}
	graph.links.push({"source": check.get(key1), "target": check.get(key2)})
	}
	return graph
	}
	function d3forcegraph(json, config) {
	var svg = d3.select("body")
	.append("svg")
	.attr("width", config.width)
	.attr("height", config.height)
	var link = svg.selectAll(".link")
	.data(json.links)
	.enter()
	.append("line")
	.attr("class", "link")
	var node = svg.selectAll(".node")
	.data(json.nodes)
	.enter()
	.append("g")
	var circle = node.append("circle")
	.attr("class", "node")
	.attr("r", config.radius)
	var text = node.append("text")
	.text(function(d) {return d.label})
	.attr("class", "node")
	var force = d3.layout.force()
	.charge(config.charge)
	.linkDistance(config.distance)
	.size([config.width, config.height])
	.nodes(json.nodes)
	.links(json.links)
	.start()
	force.on("tick", function() {
	link.attr("x1", function(d) {return d.source.x})
	.attr("y1", function(d) {return d.source.y})
	.attr("x2", function(d) {return d.target.x})
	.attr("y2", function(d) {return d.target.y})
	text.attr("x", function(d) {return d.x})
	.attr("y", function(d) {return d.y})
	circle.attr("cx", function(d) {return d.x})
	.attr("cy", function(d) {return d.y})
	})
	node.call(force.drag)
	}
	</script>
	<style>
	.link {
	stroke: #999;
	}
	.node {
	stroke: black;
	opacity: 0.5;
	}
	circle.node {
	stroke-width: 1px;
	fill: RoyalBlue;
	}
	text.node {
	font-family: "sans-serif";
	font-size: 8px;
	}
	</style>
	</head>
	<body>
	<div id="query" style="margin: 10px">
	<h1>D3 forcegraph SPARQL</h1>
	<form class="form-inline">
	<label>SPARQL endpoint:</label>
	<div class="input-append">
	<input id="endpoint" class="span6" value="http://ja.dbpedia.org/sparql" type="text">
	<button class="btn" type="button" onclick="query()">Query</button>
	</div>
	</form>
	<textarea id="sparql" class="span9" rows=15>
	PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
	PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
	PREFIX dbpedia-owl: <http://dbpedia.org/ontology/>
	PREFIX prop-ja: <http://ja.dbpedia.org/property/>

	SELECT ?pref1 ?pref2 ?pref1_label ?pref2_label
	WHERE {
	?pref1 prop-ja:隣接都道府県 ?pref2 .
	?pref1 rdfs:label ?pref1_label .
	?pref2 rdfs:label ?pref2_label .
	FILTER (LANG(?pref1_label) = 'ja')
	FILTER (LANG(?pref2_label) = 'ja')
	}
	</textarea>
	</div>
	</body>
	</html>