Visualizing Web Data Query Results

Pablo N. Mendespablo.mendes@fu-berlin.de

WWW2012 Tutorial

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)Access­Control­Allow­Origin: *

$.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),&quot;en&quot;)) .filter(langMatches(lang(?State),&quot;en&quot;)) .

}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/