WWW2012 Tutorial Visualizing SPARQL Queries

  • 1,546 views
Uploaded on

Tutorial at WWW2012 about visualizing

Tutorial at WWW2012 about visualizing

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,546
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
20
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Visualizing Web Data Query Results Pablo N. Mendespablo.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 requests Origin header.
  • 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. 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 headervar 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>";       }); ?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. 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 theGoogle 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/