Framework

Triptych.js Overview

Triptych.js is a flexible javascript framework that enables the construction of lightweight web applications that display interactive visualizations of networks. Triptych.js is intended to facilitate the development of new visual metaphors for understanding and manipulating semantically rich linked data, taking advantage of the rich graphics capabilities available in modern browsers.
Browsing biological interactions in multiple species.

Architecture

The Triptych.js framework is based on a shared graph data structure and modules that perform well-defined roles:

The modular design of Triptych.js facilitates collaboration between individuals and groups with distinct skill sets:

Code Example

In this minimal example, a graph in XGMML format is loaded as XML data via a jQuery AJAX call, then translated into a triptych graph via the graph loader. A visualizer, layout engine, and controls are combined with the graph in a triptych "space" object and the animation process is launched.
$.ajax({
  type: "GET",
  url: "../graphs/example_graph.xgmml",
  dataType: "xml",
  success: function(data) {
    loader = new TRIPTYCH.BasicGraphLoader();
    graph = loader.loadXGMML(data);
    visualizer = new TRIPTYCH.WebGLVisualizer(); 
    layoutEngine = new TRIPTYCH.ForceDirectedLayoutEngine();
    controls = new TRIPTYCH.BasicControls();
    space = new TRIPTYCH.Space( graph, 
                                visualizer, 
                                layoutEngine, 
                                controls
                                );
    space.init();
    animate();
  }
});

function animate() {
  requestAnimationFrame( animate );
  space.update();
}