Visualizing Web Data Query Results

Visualizing Web Data
Query Results

Pablo N. Mendes
pablo.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 $.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/

AccessControlAllowOrigin: *
The Access-Control-Allow-Origin header should contain the value that was sent in the request's Origin header.

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) {
       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

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 (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

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/

Visualizing Web Data Query Results

Visualizing Web Data Query Results

More Related Content

What's hot (17)

Similar to Visualizing Web Data Query Results (20)

More from Anja Jentzsch (9)

Recently uploaded (20)

Visualizing Web Data Query Results