WWW2012 Tutorial Visualizing SPARQL Queries

2,271 views

Published on

Tutorial at WWW2012 about visualizing

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,271
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
25
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

WWW2012 Tutorial Visualizing SPARQL Queries

  1. 1. Visualizing Web Data Query Results Pablo N. Mendespablo.mendes@fu-berlin.de WWW2012 Tutorial
  2. 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. 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 requests Origin header.
  4. 4. 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"  });}
  5. 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. 6. 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
  7. 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>";       }); ?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
  8. 8. Debugging Javascript
  9. 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. 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. 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. 12. Spark (rendering)http://km.aifb.kit.edu/sites/spark/docs/example/simpletable.html
  13. 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. 14. Sgvizler (more) All the major chart types offered by theGoogle Visualization API are supported by Sgvizler.
  15. 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. 16. Sgvizler (rendering)
  17. 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. 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. 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. 20. In Practice● http://www2012.pablomendes.com/
  21. 21. Hands on!http://www2012.pablomendes.com/handson/

×