d3sparql.js demo at swat4ls 2014 in berlin

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>  </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

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 :)

d3sparql.js demo at swat4ls 2014 in berlin

Engineering