tutorial visualizing sparql queries
DESCRIPTION
Tutorial at WWW2012 about visualizingTRANSCRIPT
Outline
● Preliminaries: ● Javascript, jQuery, same-origin
● Processing query results● A closer look at SPARQL JSON
● Manually parsing and displaying● Build your own table
● Neat toolkits to reuse● Sparqk, Sgvizler
● Hands on!
Preliminaries● Querying from Javascript
● Same origin policy
● Cross-origin resource sharing (CORS)AccessControlAllowOrigin: *
$.ajax({ “type”: “POST”, “url”: endpoint, “data”: data, “success”: update, “dataType”: “json” });
http://news.netcraft.com/archives/2008/01/08/italian_banks_xss_opportunity_seized_by_fraudsters.html
The Access-Control-Allow-Origin header should contain the value that was sent in the request's Origin header.
http://www.w3.org/TR/cors/
A simple query via Javascript
function sparql() { var data = {"query": $("#query").text(), "output": "json" }; $.ajax({ type: 'POST', url: $("#endpoint").text(),, data: data, success: update, dataType: "json" });}
SPARQL-JSON
● Raw● Not what you want to visualize● Used to build other points of view
select ?place where { ?place rdf:type dbpedia-owl:PopulatedPlace } limit 5
{ "head": { "link": [], "vars": ["place"] }, "results": { "distinct": false, "ordered": true, "bindings": [ { "place": { "type": "uri", "value": "http://dbpedia.org/resource/Puerto_Williams" }}, { "place": { "type": "uri", "value": "http://dbpedia.org/resource/Bouvet_Island" }}, { "place": { "type": "uri", "value": "http://dbpedia.org/resource/Falkland_Islands" }}, { "place": { "type": "uri", "value": "http://dbpedia.org/resource/Puerto_Chacabuco" }}, { "place": { "type": "uri", "value": "http://dbpedia.org/resource/Puerto_Cisnes" }} ] } }
Parsing the results...Generating a table header
var header = "<table id='results'><thead>";
$.each(json.head.vars,
function (index,v) {
header += "<th>"+v+"</th>";
});
header += "</thead>";
?place
Parsing the results...Generating a table body.
var body = "<tbody>";$.each(json.results.bindings,
function(index, element) {
}
body += "</tbody>";
// insert a table$('#view').html(header+body);
function(index, element) {body += "<tr>";
$.each(json.head.vars, function (vIndex,v) { body += "<td>"+element[v].value+"</td>"; }); body += "</tr>"; }); ?place
http://dbpedia.org/resource/Puerto_Williams
http://dbpedia.org/resource/Bouvet_Island
http://dbpedia.org/resource/Puerto_Cisnes
http://dbpedia.org/resource/Puerto_Chacabuco
Debugging Javascript
Spark (intro)
● A library for embedding SPARQL results in HTML
● Created by: ● Denny Vrandečić and Andreas Harth
● Source code:● http://code.google.com/p/rdf-spark/
● License:● New BSD License
Spark (main elements)
● data-spark-endpoint● where to send queries?● must be CORS-enabled
● data-spark-format● Javascript class to transform results into HTML
● data-spark-query● The SPARQL query to fetch data for you
Spark (setup)
<div class="spark"data-spark-endpoint="http://dbpedia.org/sparql"data-spark-format="http://km.aifb.kit.edu/sites/spark/src/jquery.spark.simpletable.js"data-spark-query="select distinct ?City ?State ?Population
where {?c dbpedia-owl:federalState ?s .?c rdfs:label ?City .?s rdfs:label ?State .?c dbpedia-owl:populationTotal ?Population .filter(langMatches(lang(?City),"en")) .filter(langMatches(lang(?State),"en")) .
}order by desc[?Population]limit 20"
>
Spark (rendering)
http://km.aifb.kit.edu/sites/spark/docs/example/simpletable.html
Sgvizler (intro)
● Inspired by Spark, offers prepackaged visualizations
● Created by:● Martin G. Skjæveland
● Source code:● http://code.google.com/p/sgvizler/
● License:● MIT License
Sgvizler (more)
All the major chart types offered by the Google Visualization API are supported by Sgvizler.
Sgvizler (setup)
<div id="sgvzl_example1" data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/npd" data-sgvizler-query="SELECT ?class (count(?instance) AS ?noOfInstances) WHERE{ ?instance a ?class } GROUP BY ?class ORDER BY ?class" data-sgvizler-chart="gPieChart" style="width:800px; height:400px;"></div>
Sgvizler (rendering)
Sgvizler (Designing Queries)
● Each type expects the SPARQL results to be in a specific format, e.g.● 1st column = labels, ● other columns = series
http://code.google.com/p/sgvizler/wiki/DesigningQueries
Good practices
● Display readable things● Prefer labels over qNames over URIs● Ask for an optional rdfs:label. Others:
skos:preferredLabel● If possible, select the label matching language in
the browser
Good practices
● Paginate results● SPARQL servers have a heart, be gentle with them:
– Watch for unnecessary repeated subsecond requests– use LIMIT, OFFSET
● Many JS libraries include support for pagination– e.g. YUI, Google Charts
In Practice
● http://www2012.pablomendes.com/
Hands on!
http://www2012.pablomendes.com/handson/