d3sparql.js demo at SWAT4LS 2014 in Berlin

d3sparql.js
JavaScript library for visualization of SPARQL results
Toshiaki Katayama <ktym@dbcls.jp>
http://jp.linkedin.com/in/toshiakikatayama
Database Center for Life Science (DBCLS),
Research Organization of Information and Systems (ROIS), Japan
2014/12/10 @ SWAT4LS, Berlin, Germany

SPARQL 1.1 Query Results JSON Format
• Accept: application/sparql-results+json
d3sparql.query
=
function(endpoint,
sparql,
callback)
{
var
url
=
endpoint
+
"?query="
+
encodeURIComponent(sparql)
var
mime
=
"application/sparql-‐results+json"
d3.xhr(url,
mime,
function(request)
{
var
json
=
request.responseText
callback(JSON.parse(json))
})
}
D3.js
→
AJAX
→
SPARQL
→
JSON
→
D3.js

D3SPARQL
Demo site:
http://biohackathon.org/d3sparql

Visualization of trees, graphs, ...

Transformation of trees
• Query Result JSON
{
"head":
{
"link":
[],
"vars":
["root_name",
"parent_name",
"child_name"]
},
"results":
{
"distinct":
false,
"ordered":
true,
"bindings":
[
{
"root_name":
{
"type":
"literal",
"value":
"root"
},
"parent_name":
{
"type":
"literal",
"value":
"root"
}
,
"child_name":
{
"type":
"literal",
"value":
"child1"
}},
{
"root_name":
{
"type":
"literal",
"value":
"root"
},
"parent_name":
{
"type":
"literal",
"value":
"child1"
},
"child_name":
{
"type":
"literal",
"value":
"grand
child1"
}},
{
"root_name":
{
"type":
"literal",
"value":
"root"
},
"parent_name":
{
"type":
"literal",
"value":
"child1"
},
"child_name":
{
"type":
"literal",
"value":
"grand
child2"
}},
//
list
of
parent-‐child
node
pairs
...
]
}

Transformation of trees
• D3 data structure
{
"name":
"root",
"size":
1024,
"children":
[
{
"name":
"child1",
"size":
2,
"children":
[
{
"name":
"grand
child1",
"size":
1
},
{
"name":
"grand
child2",
"size":
1
}
],
},
//
list
of
children
nodes
...
]
}

Transformation of graphs
• Query Result JSON
{
"head":
{
"link":
[],
"vars":
["peer1",
"name1",
"peer2",
"name2"]
},
"results":
{
"distinct":
false,
"ordered":
true,
"bindings":
[
{
"peer1":
{
"type":
"literal",
"value":
"node0"
},
"name1":
{
"type":
"literal",
"value":
"node0
label"
},
"peer2":
{
"type":
"literal",
"value":
"node1"
},
"name2":
{
"type":
"literal",
"value":
"node1
label"
}
},
{
"peer1":
{
"type":
"literal",
"value":
"node2"
},
"name1":
{
"type":
"literal",
"value":
"node2
label"
}
"peer2":
{
"type":
"literal",
"value":
"node3"
},
"name2":
{
"type":
"literal",
"value":
"node3
label"
}
},
{
"peer1":
{
"type":
"literal",
"value":
"node1"
},
"name1":
{
"type":
"literal",
"value":
"node1
label"
}
"peer2":
{
"type":
"literal",
"value":
"node3"
},
"name2":
{
"type":
"literal",
"value":
"node3
label"
}
},
//
list
of
pairs
...
]
}

Transformation of graphs
• D3 data structure
{
"nodes":
[
{
"key":
"node0
value",
"label":
"name0
value"
},
{
"key":
"node1
value",
"label":
"name1
value"
},
{
"key":
"node2
value",
"label":
"name2
value"
},
{
"key":
"node3
value",
"label":
"name3
value"
},
//
list
of
nodes
...
],
"links":
[
{
"source":
0,
"target":
1
},
{
"source":
2,
"target":
3
},
{
"source":
1,
"target":
3
},
//
list
of
edges
...
(nodes
indexed
in
order
of
occurrences)
]
}

Visualization types currently implemented

Visualization types currently implemented
• Charts
• barchart, piechart, scatterplot
• Graphs
• force graph, sankey graph
• Trees
• roundtree, dendrogram, treemap, sunburst, circlepack
• Maps
• coordmap, namedmap
• Tables
• htmltable, htmlhash

Usage
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3sparql.js"></script>
<script>
function exec() {
var endpoint = d3.select("#endpoint").property("value")
var sparql = d3.select("#sparql").property("value")
d3sparql.query(endpoint, sparql, render)
}
function render(json) {
// set options and call the d3xxxxx function in this library ...
var config = { ... }
d3sparql.xxxxx(json, config)
}
</script>
<style>

</style>
</head>
<body onload="exec()">
<form style="display:none">
<input id="endpoint" value="http://dbpedia.org/sparql" type="text">
<textarea id="sparql">
PREFIX ...
SELECT ...
WHERE { ... }
</textarea>
</form>
</body>
</html>
Download from:
https://github.com/ktym/d3sparql
Highly configurable but optional

Future directions
• Keep it Simple, Stupid (KISS)
• As an easy to use LEGO blocks for Web developers
• Integrate more visualization types
• Statistics, time course etc.
• Biological representations
• Based on life science SPARQL endpoints
• Visualization of OWL/RDF data models
• Interactive Web applications
https://github.com/ktym/d3sparql
Just updated today. Let’s hack together at the hackathon tomorrow :)

d3sparql.js demo at SWAT4LS 2014 in Berlin

More Related Content

What's hot (18)

Similar to d3sparql.js demo at SWAT4LS 2014 in Berlin (20)

More from Toshiaki Katayama (6)

Recently uploaded (20)

d3sparql.js demo at SWAT4LS 2014 in Berlin