d3sparql-coordmap.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css"/>
    <script src="lib/d3/d3.v3.min.js"></script>
    <script src="lib/d3/topojson.v1.min.js"></script>
    <script src="d3sparql.js"></script>
    <script>
    function exec() {
      var endpoint = d3.select("#endpoint").property("value")
      var sparql = d3.select("#sparql").property("value")
      d3sparql.query(endpoint, sparql, render)
    }
    function render(json) {
      var config = {
        "var_lat": "lat",
        "var_lng": "lng",
        "width": 960,
        "height": 480,
        "radius": 5,
        "color": "#55C25E",
        "topojson": "lib/d3/map/world-50m.json",
        "selector": "#result"
      }
      d3sparql.coordmap(json, config)
    }

    function exec_offline() {
      d3.json("cache/ebi/biosamples.json", render)
    }
    function toggle() {
      d3sparql.toggle()
    }
    </script>
  </head>
  <body>
    <div id="query" style="margin: 10px">
      <h1>d3coordmap</h1>
      <form class="form-inline">
        <label>SPARQL endpoint:</label>
        <div class="input-append">
          <input id="endpoint" class="span5" value="http://www.ebi.ac.uk/rdf/services/biosamples/sparql" type="text">
          <button class="btn" type="button" onclick="exec()">Query</button>
          <button class="btn" type="button" onclick="exec_offline()">Use cache</button>
          <button class="btn" type="button" onclick="toggle()"><i id="button" class="icon-chevron-up"></i></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 owl: <http://www.w3.org/2002/07/owl#>
PREFIX dc: <http://purl.org/dc/elements/1.1/>
PREFIX dcterms: <http://purl.org/dc/terms/>
PREFIX obo: <http://purl.obolibrary.org/obo/>
PREFIX efo: <http://www.ebi.ac.uk/efo/>
PREFIX biosd-terms: <http://rdf.ebi.ac.uk/terms/biosd/>
PREFIX pav: <http://purl.org/pav/2.0/>
PREFIX foaf: <http://xmlns.com/foaf/0.1/>
PREFIX sio: <http://semanticscience.org/resource/>

# Samples reporting latitude and longitude
SELECT DISTINCT ?item ?lat ?lng
WHERE {
  ?item biosd-terms:has-sample-attribute ?lat_value, ?lng_value .

  ?lat_value
    dc:type ?lat_label;
    sio:SIO_000300 ?lat . # sio:has value

  FILTER ( LCASE ( STR ( ?lat_label ) ) = "latitude" ) .

  ?lng_value
    dc:type ?lng_label;
    sio:SIO_000300 ?lng . # sio:has value

  FILTER ( LCASE ( STR ( ?lng_label ) ) = "longitude" ) .
} LIMIT 1000
      </textarea>
    </div>
    <div id="result"></div>
  </body>
</html>