SlideShare una empresa de Scribd logo
1 de 22
Descargar para leer sin conexión
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/


           Access­Control­Allow­Origin: *
            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
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 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 (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/
Visualizing Web Data Query Results

Más contenido relacionado

La actualidad más candente

2011 Mongo FR - Indexing in MongoDB
2011 Mongo FR - Indexing in MongoDB2011 Mongo FR - Indexing in MongoDB
2011 Mongo FR - Indexing in MongoDBantoinegirbal
 
An introduction to CouchDB
An introduction to CouchDBAn introduction to CouchDB
An introduction to CouchDBDavid Coallier
 
Elastify you application: from SQL to NoSQL in less than one hour!
Elastify you application: from SQL to NoSQL in less than one hour!Elastify you application: from SQL to NoSQL in less than one hour!
Elastify you application: from SQL to NoSQL in less than one hour!David Pilato
 
Terms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explainedTerms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explainedclintongormley
 
DrupalCon Chicago Practical MongoDB and Drupal
DrupalCon Chicago Practical MongoDB and DrupalDrupalCon Chicago Practical MongoDB and Drupal
DrupalCon Chicago Practical MongoDB and DrupalDoug Green
 
10gen Presents Schema Design and Data Modeling
10gen Presents Schema Design and Data Modeling10gen Presents Schema Design and Data Modeling
10gen Presents Schema Design and Data ModelingDATAVERSITY
 
Schema Design with MongoDB
Schema Design with MongoDBSchema Design with MongoDB
Schema Design with MongoDBrogerbodamer
 
JSON-LD update DC 2017
JSON-LD update DC 2017JSON-LD update DC 2017
JSON-LD update DC 2017Gregg Kellogg
 
Building Apps with MongoDB
Building Apps with MongoDBBuilding Apps with MongoDB
Building Apps with MongoDBNate Abele
 
DBIx::Class walkthrough @ bangalore pm
DBIx::Class walkthrough @ bangalore pmDBIx::Class walkthrough @ bangalore pm
DBIx::Class walkthrough @ bangalore pmSheeju Alex
 

La actualidad más candente (17)

2011 Mongo FR - Indexing in MongoDB
2011 Mongo FR - Indexing in MongoDB2011 Mongo FR - Indexing in MongoDB
2011 Mongo FR - Indexing in MongoDB
 
An introduction to CouchDB
An introduction to CouchDBAn introduction to CouchDB
An introduction to CouchDB
 
Elastify you application: from SQL to NoSQL in less than one hour!
Elastify you application: from SQL to NoSQL in less than one hour!Elastify you application: from SQL to NoSQL in less than one hour!
Elastify you application: from SQL to NoSQL in less than one hour!
 
Mongo-Drupal
Mongo-DrupalMongo-Drupal
Mongo-Drupal
 
Terms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explainedTerms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explained
 
Mongo db presentation
Mongo db presentationMongo db presentation
Mongo db presentation
 
DrupalCon Chicago Practical MongoDB and Drupal
DrupalCon Chicago Practical MongoDB and DrupalDrupalCon Chicago Practical MongoDB and Drupal
DrupalCon Chicago Practical MongoDB and Drupal
 
MongoDB and RDBMS
MongoDB and RDBMSMongoDB and RDBMS
MongoDB and RDBMS
 
10gen Presents Schema Design and Data Modeling
10gen Presents Schema Design and Data Modeling10gen Presents Schema Design and Data Modeling
10gen Presents Schema Design and Data Modeling
 
Full metal mongo
Full metal mongoFull metal mongo
Full metal mongo
 
Schema Design with MongoDB
Schema Design with MongoDBSchema Design with MongoDB
Schema Design with MongoDB
 
jQuery
jQueryjQuery
jQuery
 
JSON-LD update DC 2017
JSON-LD update DC 2017JSON-LD update DC 2017
JSON-LD update DC 2017
 
Mongo db
Mongo dbMongo db
Mongo db
 
MongoDB (Advanced)
MongoDB (Advanced)MongoDB (Advanced)
MongoDB (Advanced)
 
Building Apps with MongoDB
Building Apps with MongoDBBuilding Apps with MongoDB
Building Apps with MongoDB
 
DBIx::Class walkthrough @ bangalore pm
DBIx::Class walkthrough @ bangalore pmDBIx::Class walkthrough @ bangalore pm
DBIx::Class walkthrough @ bangalore pm
 

Similar a Visualizing Web Data Query Results

Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...
Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...
Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...MongoDB
 
NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"
NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"
NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"DataStax Academy
 
Intravert Server side processing for Cassandra
Intravert Server side processing for CassandraIntravert Server side processing for Cassandra
Intravert Server side processing for CassandraEdward Capriolo
 
Introducing Apache Spark's Data Frames and Dataset APIs workshop series
Introducing Apache Spark's Data Frames and Dataset APIs workshop seriesIntroducing Apache Spark's Data Frames and Dataset APIs workshop series
Introducing Apache Spark's Data Frames and Dataset APIs workshop seriesHolden Karau
 
Solutions for bi-directional Integration between Oracle RDMBS & Apache Kafka
Solutions for bi-directional Integration between Oracle RDMBS & Apache KafkaSolutions for bi-directional Integration between Oracle RDMBS & Apache Kafka
Solutions for bi-directional Integration between Oracle RDMBS & Apache KafkaGuido Schmutz
 
Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...
Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...
Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...confluent
 
PySpark with Juypter
PySpark with JuypterPySpark with Juypter
PySpark with JuypterLi Ming Tsai
 
Introduction to Spark Datasets - Functional and relational together at last
Introduction to Spark Datasets - Functional and relational together at lastIntroduction to Spark Datasets - Functional and relational together at last
Introduction to Spark Datasets - Functional and relational together at lastHolden Karau
 
Solutions for bi-directional integration between Oracle RDBMS & Apache Kafka
Solutions for bi-directional integration between Oracle RDBMS & Apache KafkaSolutions for bi-directional integration between Oracle RDBMS & Apache Kafka
Solutions for bi-directional integration between Oracle RDBMS & Apache KafkaGuido Schmutz
 
Apache Con Us2007 Apachei Batis
Apache Con Us2007 Apachei BatisApache Con Us2007 Apachei Batis
Apache Con Us2007 Apachei Batisday
 
SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...
SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...
SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...Inhacking
 
Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...
Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...
Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...Аліна Шепшелей
 
Gab document db scaling database
Gab   document db scaling databaseGab   document db scaling database
Gab document db scaling databaseMUG Perú
 
Your Database Cannot Do this (well)
Your Database Cannot Do this (well)Your Database Cannot Do this (well)
Your Database Cannot Do this (well)javier ramirez
 
Spark & Cassandra - DevFest Córdoba
Spark & Cassandra - DevFest CórdobaSpark & Cassandra - DevFest Córdoba
Spark & Cassandra - DevFest CórdobaJose Mº Muñoz
 
Building highly scalable data pipelines with Apache Spark
Building highly scalable data pipelines with Apache SparkBuilding highly scalable data pipelines with Apache Spark
Building highly scalable data pipelines with Apache SparkMartin Toshev
 
曾勇 Elastic search-intro
曾勇 Elastic search-intro曾勇 Elastic search-intro
曾勇 Elastic search-introShaoning Pan
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDBantoinegirbal
 
2011 Mongo FR - MongoDB introduction
2011 Mongo FR - MongoDB introduction2011 Mongo FR - MongoDB introduction
2011 Mongo FR - MongoDB introductionantoinegirbal
 

Similar a Visualizing Web Data Query Results (20)

Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...
Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...
Conceptos básicos. Seminario web 4: Indexación avanzada, índices de texto y g...
 
SFScon 2020 - Peter Hopfgartner - Open Data de luxe
SFScon 2020 - Peter Hopfgartner - Open Data de luxeSFScon 2020 - Peter Hopfgartner - Open Data de luxe
SFScon 2020 - Peter Hopfgartner - Open Data de luxe
 
NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"
NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"
NYC* 2013 - "Advanced Data Processing: Beyond Queries and Slices"
 
Intravert Server side processing for Cassandra
Intravert Server side processing for CassandraIntravert Server side processing for Cassandra
Intravert Server side processing for Cassandra
 
Introducing Apache Spark's Data Frames and Dataset APIs workshop series
Introducing Apache Spark's Data Frames and Dataset APIs workshop seriesIntroducing Apache Spark's Data Frames and Dataset APIs workshop series
Introducing Apache Spark's Data Frames and Dataset APIs workshop series
 
Solutions for bi-directional Integration between Oracle RDMBS & Apache Kafka
Solutions for bi-directional Integration between Oracle RDMBS & Apache KafkaSolutions for bi-directional Integration between Oracle RDMBS & Apache Kafka
Solutions for bi-directional Integration between Oracle RDMBS & Apache Kafka
 
Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...
Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...
Solutions for bi-directional integration between Oracle RDBMS and Apache Kafk...
 
PySpark with Juypter
PySpark with JuypterPySpark with Juypter
PySpark with Juypter
 
Introduction to Spark Datasets - Functional and relational together at last
Introduction to Spark Datasets - Functional and relational together at lastIntroduction to Spark Datasets - Functional and relational together at last
Introduction to Spark Datasets - Functional and relational together at last
 
Solutions for bi-directional integration between Oracle RDBMS & Apache Kafka
Solutions for bi-directional integration between Oracle RDBMS & Apache KafkaSolutions for bi-directional integration between Oracle RDBMS & Apache Kafka
Solutions for bi-directional integration between Oracle RDBMS & Apache Kafka
 
Apache Con Us2007 Apachei Batis
Apache Con Us2007 Apachei BatisApache Con Us2007 Apachei Batis
Apache Con Us2007 Apachei Batis
 
SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...
SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...
SE2016 BigData Vitalii Bondarenko "HD insight spark. Advanced in-memory Big D...
 
Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...
Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...
Vitalii Bondarenko HDinsight: spark. advanced in memory big-data analytics wi...
 
Gab document db scaling database
Gab   document db scaling databaseGab   document db scaling database
Gab document db scaling database
 
Your Database Cannot Do this (well)
Your Database Cannot Do this (well)Your Database Cannot Do this (well)
Your Database Cannot Do this (well)
 
Spark & Cassandra - DevFest Córdoba
Spark & Cassandra - DevFest CórdobaSpark & Cassandra - DevFest Córdoba
Spark & Cassandra - DevFest Córdoba
 
Building highly scalable data pipelines with Apache Spark
Building highly scalable data pipelines with Apache SparkBuilding highly scalable data pipelines with Apache Spark
Building highly scalable data pipelines with Apache Spark
 
曾勇 Elastic search-intro
曾勇 Elastic search-intro曾勇 Elastic search-intro
曾勇 Elastic search-intro
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDB
 
2011 Mongo FR - MongoDB introduction
2011 Mongo FR - MongoDB introduction2011 Mongo FR - MongoDB introduction
2011 Mongo FR - MongoDB introduction
 

Más de Anja Jentzsch

LODOP - Multi-Query Optimization for Linked Data Profiling Queries
LODOP - Multi-Query Optimization for Linked Data Profiling QueriesLODOP - Multi-Query Optimization for Linked Data Profiling Queries
LODOP - Multi-Query Optimization for Linked Data Profiling QueriesAnja Jentzsch
 
DBpedia Mappings Wiki, SMWCon Fall 2013, Berlin
DBpedia Mappings Wiki, SMWCon Fall 2013, BerlinDBpedia Mappings Wiki, SMWCon Fall 2013, Berlin
DBpedia Mappings Wiki, SMWCon Fall 2013, BerlinAnja Jentzsch
 
Linked Data (1st Linked Data Meetup Malmö)
Linked Data (1st Linked Data Meetup Malmö)Linked Data (1st Linked Data Meetup Malmö)
Linked Data (1st Linked Data Meetup Malmö)Anja Jentzsch
 
Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...
Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...
Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...Anja Jentzsch
 
Link Sets And Why They Are Important (EDF2012)
Link Sets And Why They Are Important (EDF2012)Link Sets And Why They Are Important (EDF2012)
Link Sets And Why They Are Important (EDF2012)Anja Jentzsch
 

Más de Anja Jentzsch (9)

Wikidata
WikidataWikidata
Wikidata
 
Linked Data
Linked DataLinked Data
Linked Data
 
LODOP - Multi-Query Optimization for Linked Data Profiling Queries
LODOP - Multi-Query Optimization for Linked Data Profiling QueriesLODOP - Multi-Query Optimization for Linked Data Profiling Queries
LODOP - Multi-Query Optimization for Linked Data Profiling Queries
 
DBpedia Mappings Wiki, SMWCon Fall 2013, Berlin
DBpedia Mappings Wiki, SMWCon Fall 2013, BerlinDBpedia Mappings Wiki, SMWCon Fall 2013, Berlin
DBpedia Mappings Wiki, SMWCon Fall 2013, Berlin
 
Linked Data (1st Linked Data Meetup Malmö)
Linked Data (1st Linked Data Meetup Malmö)Linked Data (1st Linked Data Meetup Malmö)
Linked Data (1st Linked Data Meetup Malmö)
 
Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...
Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...
Wikidata - The free knowledge base that anyone can edit (1st Linked Data Meet...
 
Link Sets And Why They Are Important (EDF2012)
Link Sets And Why They Are Important (EDF2012)Link Sets And Why They Are Important (EDF2012)
Link Sets And Why They Are Important (EDF2012)
 
Finding Data Sets
Finding Data SetsFinding Data Sets
Finding Data Sets
 
Linked Data Basics
Linked Data BasicsLinked Data Basics
Linked Data Basics
 

Último

How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 

Último (20)

How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 

Visualizing Web Data Query Results

  • 1. Visualizing Web Data Query Results Pablo N. Mendes pablo.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 request's Origin header.
  • 4. 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"   }); }
  • 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 header var 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>";        }); ?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
  • 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" >
  • 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 the Google 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>
  • 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/