Ali Saeed9 Slides

Table of Contents

Intro. & Summary of Progress

Egg Vending Machine

User-friendly SPARQL Generator

OAT Visualizations Live Demo: Interactive parent-child tree Live Demo: OAT grid & SPARQL Query Generator

Interactive Parent-Child Tree

Ali Saeed

ali

ray

tod

corey

Application Developer

Capture, analysis & visualization

of scientific data using Semantic

Web technologies

Bac

k-en

d (D

ata

Sto

rage

)

Doc

umen

tatio

n

Vis

ualiz

atio

n/U

ser

inte

rfac

e

Learned how to load UNIPROT virtual rdf graph

Developed user-friendly SPARQL generator

Tested & implemented OAT calendar, grid, svg graph & bar chart

Developed interactive parent-child tree

Commented javascript code

This presentation

[Update]

<SPARQL Syntax>

Data Output_

SPARQL (query) is very powerful, but takes time to

learn and master

Data is not always returned in a usable

form

[Update]Egg-Vending Machine – The BIG picture

[Update]

<SPARQL Syntax>

Data Output_

User-friendly SPARQL query

generator, requires virtually no typing

OAT visualizations for rendering

data in usable form for analysis

Egg-Vending Machine – The BIG picture

User-friendly SPARQL Query Generator

Given a graph URI, all fields are loaded automatically as a list:

Clicking Generate Query automatically generates the SPARQL query

Filters are added much

like MS Excel

1

5

3 4

2

User-friendly SPARQL Query Generator

1

Connects to sparql endpoint using OAT.Connection() using OAT.DataSource(), it queries given URI to get

field names.select DISTINCT ?p from <" + document.getElementById("uri").value + "> where {?s ?p ?o }

Loads a global array fields[] with field names For each field returned, it creates a checkbox, checkbox

label, filter-type dropdown, filter-value inputbox & remove-filter button using HTML DOM.var cb = document.createElement("input");cb.type = "checkbox";cb.onclick = function() {...

Load Graph

2Select All

Loops through all checkboxes and marks them as checkeddocument.forms["sparql"].elements["field_checkbox"][i].checked = true;

Also adds all field names to the Order By: drop-down listdocument.getElementById("orderbox").options.add(optn);

3

4

Order By:

Limit:

Simply adds ORDER BY ?field to the query text box for sorting the returned data by the chosen field.document.getElementById('userquery').value += 'ORDER BY ?' + document.getElementById('orderbox').value + '\n';

Simply adds LIMIT xx to the query text box for limiting the display to xx records.document.getElementById('userquery').value += 'LIMIT ' + document.getElementById('limitbox').value + '\n';

User-friendly SPARQL Query Generator

Loops through all selected fields and retrieves their prefixes from the global array fields[]. Then it combines all prefixes in str_prefix variable.str_prefix += "PREFIX " + prefixes[j][0] + ": <" + prefixes[j][1] + ">\n";

Loops through all selected fields again and generates the select string,str_select += " ?" + selectedfields[i][0];the where string,str_where += prefixes[selectedfields[i][1]][0] + ":" + selectedfields[i][0] + " ?" + selectedfields[i][0] + ";\n";adds filters if any,str_filter += 'FILTER regex(?'+selectedfields[i][0] + ', "'+ document.getElementById('sp_v'+j).innerHTML +'")\n';

Finally, it combines all of str_prefix, str_select, str_where, and str_filter into one query and displays it in the query text box.document.getElementById('userquery').value = str_prefix +

"select"+ str_select + "\n" +"from <"+document.getElementById("uri").value +">\n"+ "where { \n"+"?s " + str_where + "\n"+str_filter +" }\n"

Generate Query 5

Grid shows raw data in a relational table form

OpenSourceAjaxToolkit Visualizations

BarChart plots histogram/barchart of numerical data

SVG graph shows data relationship graph

Line graph shows line graphs of numerical data

TreeView shows hierarchy in folder-file style

TimeLine shows chronological timeline of events

PieChart shows pie chart of numerical data

Live Demo

Live Demo

Interactive Parent-Child Tree

Combining SPARQL and OAT, we can

interactively draw the hierarchical tree of any

ontology.

Simply double-click on the node of interest

and the children/parent will be shown