nodeFillColorCalculator.default-Node\ Color-Discrete\ Mapper.mapping.controller=ID nodeFillColorCalculator.default-Node\ Color-Discrete\ Mapper.mapping.controllerType=-1 nodeFillColorCalculator.default-Node\ Color-Discrete\ Mapper.mapping.map.leukocyte/CD100=255,255,153 nodeFillColorCalculator.default-Node\ Color-Discrete\ Mapper.mapping.map.lymphocyte/CD107a=255,51,255 nodeFillColorCalculator.default-Node\ Color-Discrete\ Mapper.mapping.type=DiscreteMapping nodeFillColorCalculator.default-Node\ Color-Discrete\ Mapper.visualPropertyType=NODE_FILL_COLOR <<update_18jun_ali>> This communication, including any attachments, is intended solely for the use of the addressee and may contain information which is privileged, confidential, exempt from disclosure under applicable law or subject to copyright. If you are not an intended recipient, any use, disclosure, distribution, reproduction, review or copying is unauthorized and may be unlawful. If you have received this transmission in error, please notify the sender immediately. Thank you. Cette communication,y compris les pieces jointes, est reservee a l'usage exclusif du destinataire et peut contenir des informations privilegiees, confidentielles, exemptees de divulgation selon la loi ou protegees par les droits de publication. Si vous n'etes pas un destinataire, toute utilisation, divulgation, distribution, reproduction, examen ou copie est non-autorisee et peut etre illegale. Si vous avez recu cette communication par erreur, veuillez aviser l'expediteur immediatement. Merci.

1. Ali Saeed
9 Slides

2. 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

3. Visualization/User interface
Back-end (Data Storage)
Documentation

Learned how to 
Developed user- 
Commented
load UNIPROT friendly javascript code
virtual rdf graph SPARQL 
This
generator presentation

Tested &
implemented
OAT calendar,
grid, svg graph
& bar chart

Developed
interactive
parent-child tree
ray
t od
d
Ali Saee c or ey
loper
on Deve
Applicati
ali
zation
& visuali
analysis Semantic
Capture, ta using
ific da
of scient
ologies
W eb t ec hn

4. [Update]
Egg-Vending Machine – The BIG picture
SPARQL (query) is very
powerful, but takes time to
learn and master
<SPARQL Syntax>
Data is not always
returned in a usable
Data Output_
form

5. [Update]
Egg-Vending Machine – The BIG picture
User-friendly
SPARQL query
<SPARQL Syntax>
generator, requires
virtually no typing
Data Output_ OAT
visualizations
for rendering
data in usable
form for
analysis

6. User-friendly SPARQL Query Generator
 Given a graph URI, all fields are loaded automatically as a list:
2
1
5
Filters are
added much 3 4
like MS
Excel

Clicking Generate Query
automatically generates the
SPARQL query

7. User-friendly SPARQL Query Generator
1 3
Load Graph Order By:
 Connects to sparql endpoint using OAT.Connection() 
Simply adds ORDER BY ?field
 using OAT.DataSource(), it queries given URI to get to the query text box for sorting the
field names. returned data by the chosen field.
select DISTINCT ?p from <" + document.getElementById('u
document.getElementById("uri").value + "> serquery').value += 'ORDER
where {?s ?p ?o } BY ?' +
 Loads a global array fields[] with field names document.getElementById('o
 For each field returned, it creates a checkbox, checkbox rderbox').value + 'n';
label, filter-type dropdown, filter-value inputbox & remove-
filter button using HTML DOM.
var cb = document.createElement("input"); 4
Limit:
cb.type = "checkbox";
cb.onclick = function() {... 
Simply adds LIMIT xx to the
query text box for limiting the
Select All 2 display to xx records.
document.getElementById('u

Loops through all checkboxes and marks them as checked serquery').value += 'LIMIT
document.forms["sparql"].elements["field_ch ' +
eckbox"][i].checked = true; document.getElementById('l
imitbox').value + 'n';

Also adds all field names to the Order By: drop-down list
document.getElementById("orderbox").options
.add(optn);

8. User-friendly SPARQL Query Generator
Generate Query 5
 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"

9. OpenSourceAjaxToolkit Visualizations

SVG graph shows data
 Grid shows raw data in a relational table form 
TreeView shows
relationship graph hierarchy in folder-file
style
Live Live

TimeLine shows chronological
Demo Demo
timeline of events

BarChart plots 
Line graph shows
histogram/barchart of line graphs of
numerical data numerical data

PieChart shows pie
chart of numerical
data

10. 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