Tutorial at WWW2012 about visualizing

1. Visualizing Web Data
Query Results
Pablo N. Mendes
pablo.mendes@fu-berlin.de
WWW2012 Tutorial

2. 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!

3. Preliminaries
● Querying from Javascript $.ajax({
“type”: “POST”,
“url”: endpoint,
“data”: data,
“success”: update,
“dataType”: “json”
});
● Same origin policy
http://news.netcraft.com/archives/2008/01/08/italian_banks_xss_opportunity_seized_by_fraudsters.html
● Cross-origin resource sharing (CORS) http://www.w3.org/TR/cors/
Access­Control­Allow­Origin: *
The Access-Control-Allow-Origin header should contain the value that was sent in the request's Origin header.

4. 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"
});
}

5. 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" }} ] } }

6. 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

7. Parsing the results...
Generating a table body.
var body = "<tbody>";
$.each(json.results.bindings,
function(index, element) {
function(index, element) {
body += "<tr>";
$.each(json.head.vars,
function (vIndex,v) {
body += "<td>"+element[v].value+"</td>";
});
}
body += "</tr>";
}); ?place
body += "</tbody>"; http://dbpedia.org/resource/Puerto_Williams
// insert a table http://dbpedia.org/resource/Bouvet_Island
$('#view').html(header+body);
http://dbpedia.org/resource/Puerto_Cisnes
http://dbpedia.org/resource/Puerto_Chacabuco

8. Debugging Javascript

9. 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

10. 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

11. 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),&quot;en&quot;)) .
filter(langMatches(lang(?State),&quot;en&quot;)) .
}
order by desc[?Population]
limit 20"
>

12. Spark (rendering)
http://km.aifb.kit.edu/sites/spark/docs/example/simpletable.html

13. 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

14. Sgvizler (more)
All the major chart types offered by the
Google Visualization API are supported by Sgvizler.

15. 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>

16. Sgvizler (rendering)

17. Sgvizler (Designing Queries)
http://code.google.com/p/sgvizler/wiki/DesigningQueries
● Each type expects the SPARQL results to be in
a specific format, e.g.
●
1st column = labels,
● other columns = series

18. 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

19. 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

20. In Practice
● http://www2012.pablomendes.com/

21. Hands on!
http://www2012.pablomendes.com/handson/