Using JavaScript in Linked Data Applications Oshani Seneviratne Oct 12, 2010

Why HTML and Javascript? It would: – Make the application available widely, almost universally – Allow the application to be delivered over HTTP – Run in the browser thus making use of the existing client side cache – Provide all the UI elements we need very easily

Javascript Libraries Rdflib + Widget Library – Written by Tabulator developers – Can be used to create user interfaces that use Semantic Web Data – Download from: widgets/download.htmlhttp://dig.csail.mit.edu/2010/rdf- widgets/download.html RDFQuery – Written by Jeni Tennison et al – Can be used to parse RDFa, query over facts and reason to produce more facts – Depends on jQuery – Download from: More Javascript libraries are available at: rs rs

Same Origin Policy Rule enforced in browsers for security Javascript code running on a webpage cannot access any resources from other domains

But there are some workarounds You can: – Run your code in a trusted environment (standalone app, iPhone app, browser, browser extension, greasemonkey script) – Use a “proxy” server – Use browsers that support CORS (Firefox 3.5, Safari 4). However, the servers have to accept the headers sent by the browsers. – Use JSONP (JSON with Padding)

Our Solution Use a proxy server to provide JSONP translation of data available at any location on the Web. – Talis Metamorph web service ( allows for converting between different RDF syntaxes – JSONP output format is available from the Metamorph service – Cross domain transfer of JSON is supported natively in libraries like jQuery

Our Task 1Look up a FOAF URI 2Extract that person’s friends 3Look at the friends’ FOAF files 4See where they work 5Use the workplace URI to query dbpedia for it’s location 6Print a list of Tim’s friends, their workplaces and where the workplaces are located

1 Look up Tim’s FOAF URI var url = ' uri[]= Lee/card#i&input=&output=jsonp&callback=?' ; $.getJSON(url, function(data){ //Do something with the data });

2 Extract his friends var tim = " Lee/card#i" var FOAF_KNOWS = “ $.each(data[tim][”FOAF_KNOWS"], function{ //Process the friend data here. });

3 Look at the friends’ FOAF files Same as 1. Use the metamorph service to load all the data of Tim’s friends. var url = ' uri[]= &input=&output=jsonp&callback=?'; $.getJSON(url, function(data){ //Do something with the data });

4 See where the friends work var WOKPLACE_HOMEPAGE = " ge"; friend.workplaceHomepage = friend_data[friend.id][WOKPLACE_HOMEPAGE][ 0].value;

5 Query DBpedia PREFIX prop: PREFIX ont: PREFIX foaf: PREFIX geo: SELECT DISTINCT ?label ?lat ?long WHERE { { {?resource prop:website.} UNION {?resource foaf:homepage.}} { {?resource ont:location ?location. OPTIONAL {?location geo:lat ?lat. ?location geo:long ?long.} OPTIONAL {?location rdfs:label ?label.} } UNION {?subject prop:employer ?resource} UNION {?subject prop:institution ?resource} UNION {?subject prop:workInstitution ?resource} UNION {?subject prop:workInstitutions ?resource} UNION {?subject prop:workplaces ?resource} UNION {?subject ont:occupation ?resource} OPTIONAL {?resource geo:lat ?lat. ?resource geo:long ?long.} OPTIONAL {?resource rdfs:label ?label.}} FILTER langMatches( lang(?label), 'en')}

5.1 Sending the Query to dbpedia " default-graph-uri= should-sponge=soft& query=*query_goes_in_here*& format=application/json& callback=?"

Demo Available at: – braries/javascript/demo/

Tools that are helpful in debugging Firebug – US/firefox/addon/1843 JSON formatter –

Quiz Tim has alternate URIs specified in his FOAF file at Lee/card#i. How can you modify this code to look up the workplaces of friends specified in those FOAF uris as well? How do you find whether people in Tim’s FOAF file are in the same group (foaf:group) as Tim?