Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 SPARQ...
Preliminaries●   Querying from Javascript                                                        $.ajax({                 ...
A simple query via Javascriptfunction sparql() {    var data =  {"query": $("#query").text(),               "output": "jso...
SPARQL-JSON●   Raw    ●   Not what you want to visualize    ●   Used to build other points of view     select ?place where...
Parsing the results...             Generating a table headervar header = "<table id=results><thead>";$.each(json.head.vars...
Parsing the results...              Generating a table body.var body = "<tbody>";$.each(json.results.bindings,        func...
Debugging Javascript
Spark (intro)●   A library for embedding SPARQL results in HTML●   Created by:    ●   Denny Vrandečić and Andreas Harth●  ...
Spark (main elements)●   data-spark-endpoint    ●   where to send queries?    ●   must be CORS-enabled●   data-spark-forma...
Spark (setup)<div class="spark"     data-spark-endpoint="http://dbpedia.org/sparql"     data-spark-format="http://km.aifb....
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●   Sou...
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-que...
Sgvizler (rendering)
Sgvizler (Designing Queries)                                 http://code.google.com/p/sgvizler/wiki/DesigningQueries●   Ea...
Good practices●   Display readable things    ●   Prefer labels over qNames over URIs    ●   Ask for an optional rdfs:label...
Good practices●   Paginate results    ●   SPARQL servers have a heart, be gentle with them:        –   Watch for unnecessa...
In Practice●   http://www2012.pablomendes.com/
Hands on!http://www2012.pablomendes.com/handson/
Visualizing Web Data Query Results
Upcoming SlideShare
Loading in …5
×

Visualizing Web Data Query Results

2,576 views

Published on

Visualizing Web Data Query Results
by Pablo N. Mendes

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Visualizing Web Data Query Results

  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/

×