WWW2012 Tutorial Visualizing SPARQL Queries
Upcoming SlideShare
Loading in...5

WWW2012 Tutorial Visualizing SPARQL Queries



Tutorial at WWW2012 about visualizing

Tutorial at WWW2012 about visualizing



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.linkedin.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    WWW2012 Tutorial Visualizing SPARQL Queries WWW2012 Tutorial Visualizing SPARQL Queries Presentation Transcript

    • 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 $.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 requests Origin header.
    • A simple query via Javascriptfunction 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 headervar 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>";       }); ?placebody += "</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
    • 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 theGoogle 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) 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/