d3sparql.js demo at SWAT4LS 2014 in Berlin
9 likes•2,968 views
d3sparql.js is a JavaScript library designed for visualizing SPARQL query results in various formats, utilizing D3.js for data-driven documents. The library supports visualizations such as charts, graphs, trees, maps, and tables, and allows users to query biological data from life science SPARQL endpoints. Future enhancements aim to simplify usability and expand visualization options for interactive web applications.
![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
...
]
}](https://image.slidesharecdn.com/20141210-d3sparql-141211054509-conversion-gate02/85/d3sparql-js-demo-at-SWAT4LS-2014-in-Berlin-6-320.jpg)
![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
...
]
}](https://image.slidesharecdn.com/20141210-d3sparql-141211054509-conversion-gate02/85/d3sparql-js-demo-at-SWAT4LS-2014-in-Berlin-7-320.jpg)
![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
...
]
}](https://image.slidesharecdn.com/20141210-d3sparql-141211054509-conversion-gate02/85/d3sparql-js-demo-at-SWAT4LS-2014-in-Berlin-8-320.jpg)
![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)
]
}](https://image.slidesharecdn.com/20141210-d3sparql-141211054509-conversion-gate02/85/d3sparql-js-demo-at-SWAT4LS-2014-in-Berlin-9-320.jpg)
d3sparql.js demo at SWAT4LS 2014 in Berlin
- 1. d3sparql.js JavaScript library for visualization of SPARQL results Toshiaki Katayama <[email protected]> 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
- 2. D3.js : Data-Driven Document
- 3. 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
- 4. D3SPARQL Demo site: http://biohackathon.org/d3sparql
- 5. Visualization of trees, graphs, ...
- 6. 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 ... ] }
- 7. 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 ... ] }
- 8. 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 ... ] }
- 9. 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) ] }
- 10. Visualization types currently implemented
- 11. 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
- 12. 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> <!-- customize CSS --> </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
- 13. Demo
- 15. 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 :)