Skip to content

Instantly share code, notes, and snippets.

@fabiovalse

fabiovalse/README.md

Last active August 29, 2015 14:02
Show Gist options
  • Save fabiovalse/faa710a2f16c2696d338 to your computer and use it in GitHub Desktop.
Save fabiovalse/faa710a2f16c2696d338 to your computer and use it in GitHub Desktop.
Download ZIP
LOD CNR MI TUTORIAL - Clavius Example 1
Raw
README.md

The aim of this gist is to show how to handle the execution of simple SPARQL query over the DBpedia SPARQL endpoint using Javascript, JQuery and AJAX.

Christopher Clavius (25 March 1538 – 6 February 1612) was a German Jesuit mathematician and astronomer who was the main architect of the modern Gregorian calendar. In his last years he was probably the most respected astronomer in Europe and his textbooks were used for astronomical education for over fifty years in and even out of Europe.

The following code shows how to create a simple interface containing the persons lived at Clavius time. Each person is represented with the abstract of the DBpedia entity and with an image if available.

Raw
index.css
.thumb {
width: 24%;
}
.abstract {
width: 75%;
}
.inline {
float: left;
}
.clear {
clear: both;
}
#output_div {
height: 600px;
overflow: scroll;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Seminario CNR MI - CLAVIUS Example 1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Clavius Time Persons</title>
</head>
<body>
<div>
<input type="button" onclick="retrieveData()" value="Execute Query">
</div>
<div id="output_div"></div>
</body>
</html>
Raw
index.js
function retrieveData() {
var query = "PREFIX : <http://dbpedia.org/resource/> PREFIX dbp: <http://dbpedia.org/ontology/> PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> PREFIX dbpprop: <http://dbpedia.org/property/> SELECT ?person ?b_date ?d_date ?abstract ?thumbnail WHERE { ?person rdf:type dbp:Person ; dbp:birthDate ?b_date ; dbp:deathDate ?d_date ; dbp:abstract ?abstract . OPTIONAL { ?person dbp:thumbnail ?thumbnail } FILTER ( ?b_date >= '1488-01-01'^^xsd:date && ?b_date < '1600-01-01'^^xsd:date && ?d_date < '1650-01-01'^^xsd:date ) FILTER ( langMatches(lang(?abstract), 'EN')) } ORDER BY ?person ?b_date";
var url = 'http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=' + encodeURIComponent(query) + '&output=json';
$.ajax({
url: url,
dataType: "json",
success: function (data) {
$('#results').show();
$('#raw_output').text(JSON.stringify(data, null, 3));
handle_json(data);
},
error: function(e) {}
});
}
function handle_json(json) {
$('#output_div').text("");
$.each(
json['results']['bindings'], function(index, value) {
var html = "";
name = value['person']['value'].replace("http://dbpedia.org/resource/", "");
name = decodeURIComponent(name.replace(/_/g, " "));
html += "<div><h3><b>" + name + ":</b> (" + value['b_date']['value'] + " - " + value['d_date']['value'] + ")</h3></div>";
if (value['thumbnail'] != null)
html += "<div class='inline thumb'><img style='width: 200px' src='" + value['thumbnail']['value'].replace("200px", "150px") + "'/></div>";
else
html += "<div class='inline thumb'><img src=''/></div>";
html += "<div class='inline abstract'>" + value['abstract']['value'] + "</div><div class='clear'></div><br>";
$('#output_div').append(html);
}
);
}
Raw
SPARQL
PREFIX : <http://dbpedia.org/resource/>
PREFIX dbp: <http://dbpedia.org/ontology/>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX dbpprop: <http://dbpedia.org/property/>
SELECT ?person ?b_date ?d_date ?abstract ?thumbnail
WHERE {
?person rdf:type dbp:Person ;
dbp:birthDate ?b_date ;
dbp:deathDate ?d_date ;
dbp:abstract ?abstract .
OPTIONAL { ?person dbp:thumbnail ?thumbnail }
FILTER ( ?b_date >= '1488-01-01'^^xsd:date && ?b_date < '1600-01-01'^^xsd:date && ?d_date < '1650-01-01'^^xsd:date )
FILTER ( langMatches(lang(?abstract), "EN"))
} ORDER BY ?person ?b_date
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment