d3sparql.js demo at swat4ls 2014 in berlin
TRANSCRIPT
d3sparql.jsJavaScript library for visualization of SPARQL results
Toshiaki Katayama <[email protected]>http://jp.linkedin.com/in/toshiakikatayamaDatabase Center for Life Science (DBCLS),Research Organization of Information and Systems (ROIS), Japan
2014/12/10 @ SWAT4LS, Berlin, Germany
D3.js : Data-Driven Document
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
D3SPARQLDemo site:http://biohackathon.org/d3sparql
Visualization of trees, graphs, ...
• Query Result JSON
Transformation of trees
{ "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 ... ]}
• D3 data structure
Transformation of trees
{ "name": "root", "size": 1024, "children": [ { "name": "child1", "size": 2, "children": [ { "name": "grand child1", "size": 1 }, { "name": "grand child2", "size": 1 } ], }, // list of children nodes ... ]}
• Query Result JSON
Transformation of graphs
{ "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 ... ]}
• D3 data structure
Transformation of graphs
{ "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> <!-- 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
Demo
TogoGenome
• Stanza
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/d3sparqlJust updated today. Let’s hack together at the hackathon tomorrow :)