<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
    <script src="http://biohackathon.org/d3sparql/d3sparql.js"></script>
  </head>
  <body>
    <h1>im@sparql Query Editor</h1>
    <div id="query" >
      <h1>d3htmltable</h1>
      <form >
        <label>SPARQL endpoint:</label>
        <div >
          <input id="endpoint" size="30" value="https://sparql.crssnky.xyz/spql/imas/query" type="text">
          <button type="button" onclick="exec()">Query</button>
        </div>
      </form>
      <textarea id="sparql" cols="70" rows=15>
PREFIX schema: <http://schema.org/>
PREFIX imas: <https://sparql.crssnky.xyz/imasrdf/URIs/imas-schema.ttl#>

SELECT DISTINCT ?o ?bust
WHERE {
	?s schema:name | schema:alternateName ?o;
	imas:Bust ?bust.
	FILTER (LANG(?o) = 'ja')
}
order by desc(?bust)

      </textarea>
    </div>
    <div id="result"></div>
    <script src="script.js"></script>
  </body>
</html>


// Code goes here


function render(json) {
  var config = {
    "selector": "#result"
  }
  d3sparql.htmltable(json, config)
}

function exec() {
  var endpoint = d3.select("#endpoint").property("value")
  var sparql = d3.select("#sparql").property("value")
  d3sparql.query(endpoint, sparql, render)
}



/* Styles go here */