Archive for the 'JavaScript information visualization toolkit (JIT)' Category

Thank you Platform Computing!

Published
by
admin
on November 12, 2008
in JavaScript information visualization toolkit (JIT)
. Closed

A couple of weeks ago -before the 1.0.7a release- I got an e-mail from Fanbin Kong, a Platform Computing software developer, reporting a few bugs on the Treemap visualization.
These bugs mainly had to do with memory leaks and rendering performance.
Together with Fanbin Kong and Yi Zheng we tried to fix these bugs, and came up with a new algorithm that increases rendering performance and solves (almost) all memory leak issues.
The changes were applied on version 1.0.7a of the JavaScript Infovis Tookit.

The other good news is that they gave me an ipod touch for this!

ipod

They also wrote an inscription at the back of the ipod: “Appreciation to Nico. A gift from Platform”.

Thanks a lot guys, it really feels good to know that you appreciate my work :)

Visualizing Linux package dependencies

Published
by
admin
on November 2, 2008
in JavaScript information visualization toolkit (JIT), javascript, python and tutorial
. 5 Comments

I’ve been building a Linux package dependency visualizer with Python and the JavaScript Infovis Toolkit that gathers all dependencies for a linux package and displays them in an interactive tree visualization.

So, let’s say your query is wine and you want to see dependencies for that package. The visualization will display wine as the centered node, laying its dependencies on outer concentric circles like this:

rg1

By clicking on xbase-clients you’ll set this node as root:

rg2

Then, the visualization will query for xbase-clients dependencies, morphing its state into the new node’s perspective:

rg3

You can play with the example here.

I’ll explain how to build this in case you want your own at home.
I guess this is going to be also a nice tutorial on how to configure the RGraph visualization to run advanced examples, including the new morphing animations in version 1.0.7a.

Server Side

Server side we need to build a service that can transform the apt-rdepends output for package dependencies into a JSON tree structure.

The apt-rdepends is a linux tool (which you can install with apt-get install apt-rdepends) that displays a hierarchy of package dependencies for a given package. Here’s an example when querying for erlang:

cmd1

You can either use popen2 or commands.getoutput to fetch the output for a system call in Python, I’ll do the latter.
The main function that makes the system call and returns the answer could be something like this:

def get_dependency_tree(package=''):
    out = commands.getoutput("apt-rdepends " + package).split("\n")
    ans = []
    #if dependencies were found for this package.
    if len(out) > 3 and out[3].strip() == package:
        ans = out[3:]
    else:
        ans = [package]
    return make_tree(package=ans[0].strip(), source=ans, level=2)

The make_tree function will create the tree structure that will then be serialized into JSON to be processed client side.

We will first need a make_tree_node function that creates a tree node structure from a package’s name:

#returns a tree node
def make_tree_node(id, node_name):
    node_name = node_name.strip()
    return {
            'id': id,
            'name': node_name,
            'children': [],
            'data': []
    }

As you can see, this is the same tree node as the JSON tree structure defined for the JIT:

var json = {
	"id": "aUniqueIdentifier",
	"name": "usually a nodes name",
	"data": [
	    {key:"some key",       value: "some value"},
		{key:"some other key", value: "some other value"}
	],
	children: [/* other nodes or empty */]
};

Our make_tree function will receive as formal parameters the root package, the response from the apt-rdepends call, an integer that will specify the max depth for the tree (in case we want to prune it to some level) and an id prefix that will be set for each node:

def make_tree(package='', source=[], level=1, prefix=''):
    node = make_tree_node(package + '_' + prefix, package)
    if level > 0:
        deps = get_package_deps(package, source)
        [node['children'].append(make_tree(elem, source, level -1, package)) for elem in deps]
    return node

As you can see, make_tree recursively creates nodes and appends them to their parent children property.

Finally, I also made a get_package_deps function that retrieves all children for a given package, parsing source:

def get_package_deps(package_name='', source=[]):
    ans, found_package_name = [], False
    #test if is a dependency line
    dependency = lambda package: package.strip().startswith('Depends:')
    for line in source:
        #package name line
        if not found_package_name and package_name == line.strip():
            found_package_name = True
        #it's a package dependency, add its name to the answer
        elif found_package_name and dependency(line):
            ans.append(line.split("Depends: ")[1].split("(")[0].strip())
        #end of dependency lines
        elif found_package_name and not dependency(line):
            return ans
    return ans

If you used Django, then you could expose your service in the views.py file like this:

def apt_dependencies(request, mode, package):
    json = aptdependencies.get_dependency_tree(package)
    json_string = simplejson.dumps(json)
    return render_to_response('raw.html', { 'json' : json_string })

Client Side

All the JavaScript Infovis Toolkit visualizations are customizable via controller methods.
If this is the first time you use this library, perhaps it would be better to start with the RGraph quick tutorial first.

First we define a simple Log object, that will write the current state of the graph to a label (like loading… or stuff like that).

I’ll use Mootools, but you can use whatever you want.

var Log = {
	elem: false,
	getElem: function() {
		return this.elem? this.elem : this.elem = $('log');
	},

	write: function(text) {
		var elem = this.getElem();
		elem.set('html', text);
	}
};

Then we can define an init function, that instanciates the RGraph object and returns it.
We will pass a controller to this object, that implements the onBeforeCompute, onAfterCompute, onPlaceLabel and onCreateLabel methods.
I’ll also define some utility methods, like requestGraph and preprocessTree:

function init() {
  //Set node radius to 3 pixels.
  Config.nodeRadius = 3;

  //Create a canvas object.
  var canvas= new Canvas('infovis', '#ccddee', '#772277');

  //Instanciate the RGraph
  var rgraph= new RGraph(canvas,  {
	//Here will be stored the
	//clicked node name and id
  	nodeId: "",
  	nodeName: "",

  	//Refresh the clicked node name
	//and id values before computing
	//an animation.
	onBeforeCompute: function(node) {
  		Log.write("centering " + node.name + "...");
		this.nodeId = node.id;
  		this.nodeName = node.name;
  	},

  //Add a controller to assign the node's name
  //and some extra events to the created label.
  	onCreateLabel: function(domElement, node) {
  		var d = $(domElement);
  		d.setOpacity(0.6).set('html', node.name).addEvents({
  			'mouseenter': function() {
  				d.setOpacity(1);
  			},
  			'mouseleave': function() {
  				d.setOpacity(0.6);
  			},
  			'click': function() {
				if(Log.elem.innerHTML == "done") rgraph.onClick(d.id);
  			}
  		});
  	},

	//Once the label is placed we slightly
	//change the positioning values in order
	//to center or hide the label
  	onPlaceLabel: function(domElement, node) {
		var d = $(domElement);
		d.setStyle('display', 'none');
		 if(node._depth <= 1) {
			d.set('html', node.name).setStyles({
				'width': '',
				'height': '',
				'display':''
			}).setStyle('left', (d.getStyle('left').toInt()
				- domElement.offsetWidth / 2) + 'px');
		}
	},

	//Once the node is centered we
	//can request for the new dependency
	//graph.
	onAfterCompute: function() {
		Log.write("done");
		this.requestGraph();
	},

	//We make our call to the service in order
	//to fetch the new dependency tree for
	//this package.
   	requestGraph: function() {
  		var that = this, id = this.nodeId, name = this.nodeName;
  		Log.write("requesting info...");
  		var jsonRequest = new Request.JSON({
  			'url': '/service/apt-dependencies/tree/'
					+ encodeURIComponent(name) + '/',

  			onSuccess: function(json) {
  				Log.write("morphing...");
				//Once me received the data
				//we preprocess the ids of the nodes
				//received to match existing nodes
				//in the graph and perform a morphing
				//operation.
  				that.preprocessTree(json);
				GraphOp.morph(rgraph, json, {
  					'id': id,
  					'type': 'fade',
  					'duration':2000,
  					hideLabels:true,
  					onComplete: function() {
						Log.write('done');
					},
  					onAfterCompute: $empty,
  					onBeforeCompute: $empty
  				});
  			},

  			onFailure: function() {
  				Log.write("sorry, the request failed");
  			}
  		}).get();
  	},

	//This method searches for nodes that already
	//existed in the visualization and sets the new node's
	//id to the previous one. That way, all existing nodes
	//that exist also in the new data won't be deleted.
 	preprocessTree: function(json) {
  		var ch = json.children;
  		var getNode = function(nodeName) {
  			for(var i=0; i<ch.length; i++) {
  				if(ch[i].name == nodeName) return ch[i];
  			}
  			return false;
  		};
  		json.id = rgraph.root;
		var root = rgraph.graph.getNode(rgraph.root);
  		GraphUtil.eachAdjacency(root, function(elem) {
  			var nodeTo = elem.nodeTo, jsonNode = getNode(nodeTo.name);
  			if(jsonNode) jsonNode.id = nodeTo.id;
  		});
  	}

  });

  return rgraph;
}

I did say advanced example.
You can always go to a simpler example to begin here.

Finally we have to initialize the visualization when the page loads, so we’ll attach an initialization function like this:

window.addEvent('domready', function() {
	var rgraph = init();
	new Request.JSON({
	  	'url':'/service/apt-dependencies/tree/wine/',
	  	onSuccess: function(json) {
			  //load wine dependency tree.
			 rgraph.loadTreeFromJSON(json);
			  //compute positions
			  rgraph.compute();
			  //make first plot
			  rgraph.plot();
			  Log.write("done");
			  rgraph.controller.nodeName = name;
	  	},

	  	onFailure: function() {
	  		Log.write("failed!");
	  	}
	}).get();

HTML and CSS

These are the HTML and CSS files I used to make this example/tutorial.
The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>

Linux package dependency visualizer

</title>
<link type="text/css" href="/static/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="/static/js/mootools-1.2.js"></script>

<!--[if IE]>
<script language="javascript" type="text/javascript" src="/static/js/excanvas.js"></script>
<![endif]-->
<script language="javascript" type="text/javascript" src="/static/js/core/RGraph.js"></script>
<script language="javascript" type="text/javascript" src="/static/js/example/example-rgraph.js"></script>

</head>

<body onload="">

<canvas id="infovis" width="900" height="500"></canvas>
<div id="label_container"></div>

</body>
</html>
<div id="log"></div>

Note: You’ll probably have to change the path to the CSS and JavaScript files.

and the CSS file:

html,body {
	width:100%;
	height:100%;
	margin:0;padding:0;
	background-color:#333;
	text-align:center;
	font-size:0.94em;
	font-family:"Trebuchet MS",Verdana,sans-serif;
}

#infovis {
	width:900px;
	height:500px;
	background-color:#222;

}

.node {
	color: #fff;
	background-color:#222;
	font-weight:bold;
	padding:1px;
	cursor:pointer;
	font-size:0.8em;
}

.hidden {
	display:none;
}

Remarks

Although still in alpha, the JavaScript Infovis Toolkit can be used to perform advanced animations, customizing your visualization via a controller and not messing with the code.
This example also shows that it can be used to do more advanced things that only plotting static animations, interacting with services and handling pretty well visualizations where the dataset changes over time.
You can download the library here, latest version is 1.0.7a.
You can also go to the main project page to know more.

Hope it was useful.
Feel free to post any comment or questions.
Bye!

Graph Operations

Published
by
admin
on October 31, 2008
in JavaScript information visualization toolkit (JIT) and javascript
. 2 Comments

I’ve been working on the JavaScript Infovis Toolkit lately, fixing bugs, working on performance improvements and adding a new feature for Spacetrees, Hyperbolic Trees and RGraphs that I’ve found very interesting.

Mutable data

The JavaScript Infovis Toolkit is a JS Information Visualization library that includes radial layout of trees with animations, Treemaps, Hyperbolic Trees and Spacetrees.

Not so long ago I worked on adapting these tree layouts to support graph layouts as well, also including weighted nodes and edges, as you can see in this example.

However, one of the most challenging features I wanted to add to these visualizations was the possibility of dealing with mutable data. This way visualizations would also be useful to show how data changes over time, and updates to this data would be translated into smooth animations from one state of the graph to another.

The user could also interact at a deeper level with the visualizations, not only exploring the data, but also altering it, making updates to the information and seeing the results in real time.

The GraphOp object

The first thing that came into my mind when thinking on adding support for mutable data was prototyping the addSubtree and removeSubtree methods.
These operations seem suitable for the Spacetree, (and have been implemented for this visualization), but what about applying transformations to graphs?
Since the JIT adds support for graphs and trees in the RGraph and Hyperbolic Tree visualizations, both use cases should be well covered: adding and deleting subtrees as well as adding/deleting nodes, edges, and performing more general binary graph operations, such as graph sum and the one which I’m most proud of, morphing.

So this new release of the library comes with the addSubtree and removeSubtree methods for the Spacetree, and also with the GraphOp object for the Hypertree and RGraph visualizations, which includes unary and binary operations such as:

  • removeNode Multiple nodes can be removed from the visualization. You can choose up to four different animations for doing that.
  • removeEdge Multiple edges can be removed from the visualization. Supports many animations also.
  • sum Performs a sum of two graphs, morphing the result with sequential or concurrent animations of movement and fading.
  • morph A very useful operation in which you specify the resulting graph, and the visualization morphs the current graph state into that one.

Examples

I chose to make two real life examples. With real life I mean small apps that not only show the potential of these graph operations, but can also be actually useful to explore.

1.- Linux module dependency visualizer
It uses the RGraph visualization with the morphing operation to show dependencies between different modules you might find with the apt-get tool.
When clicking on a node you’ll set this node as root. Then the graph will perform a second animation, updating the dependencies for the new centered module.
Many details about the package are also provided under the Details toggler. You can also go to previous visited modules by using the History toggler.

These examples load data dynamically, so please be patient when loading the data.

rgraph

2.- Visualizing relations between artists and bands dinamically
Just as the old demos I made an app that relates bands and artists by common performances on bands, discs, songs, etc.
Clicking on a label will set the node as root. Then a second animation will take place, morphing the tree into the new node’s perspective.

Just as the previous example, you can find some information about the artists in the Details toggler. You can also browse previous visited nodes by clicking in the History toggler.

hypertree

All tutorials and posts have been updated for this new release. You can find more information in the project page and in the google group.

Although this library is still in alpha, some companies and products are already using it, such as OpenCRX and Platform Computing.

I’ll be writing a more technical overview of these features in further posts.

Hope you liked it :)

Weighted nodes, weighted edges

Published
by
admin
on August 5, 2008
in JavaScript information visualization toolkit (JIT), tutorial and version
. 2 Comments

I’ve been doing some work on the JIT lately, fixing some bugs and adding some new features.
Some important changes to mention are:

  • A complete refactoring of the Spacetree. That code was not clear. I also binded the ST to the Animation object used by the Hypertree and RGraph. This allows it to have easeIn and easeOut transitions. I also updated the documentation for this class.
    Main functionality is now packaged under the Tree Class, making a good distinction between generic code (say Tree.Util for example) and more specific code (like the Tree.Geometry object, or Tree.Label).
    Here’s the old example of an “infinite” spacetree, done with the “new code”.
  • Hypertree and RGraphs can now handle weighted nodes and edges in trees and graphs. The same goes for the Spacetree, although I have not tested that yet.

    Weighted nodes:
    This goes only for the RGraph and the Hypertree, since I don’t see a clear representation of weighted nodes in the Spacetree, and the Treemap already represents weight either with size or color.
    Weighted nodes are enabled when setting Config.allowVariableNodeDiameters = true.
    Remember what a dataset is? A dataset is a reference to the property data of a JSON node representation. There you can store data by appending { key:’someKey’, value:’someValue’} objects to the data array property.
    The value of the first object of the data property will be taken in account to calculate the nodes diameters. You will also want to specify two properties of the config object, the nodeRangeDiameters property:

    		//Property: nodeRangeDiameters
		//Diameters range. For variable node weights.
		nodeRangeDiameters: {
			min: 10,
			max: 35
		},

    Which specifies the specific range of your nodes diameters. Nodes will range from 10px to 35px as default. The other property is the nodeRangeValues:

    		//Property: nodeRangeValues
		// The interval of the values of the first object of your dataSet.
		// A superset of the values can also be specified.
		nodeRangeValues: {
			min: 1,
			max: 35
		},

    You’ll need to specify range values for your first dataset object value. This is all the information we need to know in order to plot a RGraph or Hypertree with weighted nodes. Here’s an example of a K6 Hypergraph with variable node diameters (and weighted edges).

    A note on usability
    There’s an extra property for the Hypertree Config object called Config.transformNodes. When applying a moebius transformation of the tree (that is, when the tree moves), tree nodes and edges change their proportion. This is not a good feature if you’re planning to add weighted nodes in your Hypertree, since they will be deformed and thus the user won’t be able to tell which node is bigger than which. You can set this property to false when using weighted nodes on your visualization.

    Weighted edges
    Two new methods have been included in the controller object, these are onBeforePlotLine(adj); and onAfterPlotLine(adj);. Both receive an adjacency object, which has the following structure:

    var adj = {
	nodeFrom: ""/* A node connected with this adjacence */,
	nodeTo: ""/* Other node connected with this adjacence */,
	data: { //An object storing your custom information.
		weight: w
	}
};

    Use the two controller methods to change the canvas lineWidth property or the stroke color (more information on that here). For example,

    /* some code... */

 var rgraph= new RGraph(canvas,  {
  	//Use onBeforePlotLine and onAfterPlotLine controller
  	//methods to adjust your canvas lineWidth
  	//parameter in order to plot weighted edges on
  	//your graph. You can also change the color of the lines.
  	onBeforePlotLine: function(adj) {
  			lineW = canvas.getContext().lineWidth;
  			canvas.getContext().lineWidth = adj.data.weight;
  	},

  	onAfterPlotLine: function(adj) {
  			canvas.getContext().lineWidth = lineW;
  	},

/* some other code*/

    Ok, but how do I store edge weights?
    The JSON Graph structure has been extended to the following form (notice that the old Graph structure is still accepted).

    var json = [
{
	"id": "aUniqueIdentifier",
	"name": "usually a nodes name",
	"data": [
	    {key:"some key",       value: "some value"},
		{key:"some other key", value: "some other value"}
	],
	"adjacencies": [
	{
		nodeTo:"aNodeId",
		data: {} //put whatever you want here
	}
	//more objects like these...
	]
} /* ... more nodes here ... */ ];

    JSON Tree structures
    For JSON Trees is simpler. If you have a Node A and B is a child of A, then store in Bs dataset a property concerning the weight of the edge A-B. These nodes will be stored in the adj object onBeforePlotLine and onAfterPlotLine. You can access them by doing adj.nodeFrom and adj.nodeTo.

    Here’s an example of a K6 RGraph with weighted nodes and edges.

  • The last example also shows a new feature for the RGraph, polar interpolation. You will notice that node transitions are different from previous examples. You can change the interpolation by setting Config.interpolation to ‘polar’ or ‘linear’. I’ll make a more detailed explanation for polar interpolation in some other post. If you want to know more about the cool features of the paper inspiring the RGraph, you can see this post.
  • API Changes
    These features introduced an api change that has already been updated in all tutorials, although I have not checked for errors yet (will do today and/or tomorrow). You should not set the controller property from the ST, RGraph, Treemaps and Hypertree instances. That is, you can’t do:

    var st = new ST(canvas);
st.controller = ; //the controller object

    Instead, you should do:

    var st = new ST(canvas, controller);
  • I updated all examples packaged with the library, also adding the two K6 examples showed above. Code that depends on the Mootools library (that is, the example files and the Treemap visualization) has been updated to the final 1.2 version of the Mootools library. This library is shipped as an extra with the JIT.

Special thanks to Rene Becker for pointing bugs and Daniel Herrero for suggesting cool performance improvements.
Remember that you can post any question, suggestion or comment on the JIT google group.

Get the library already!
Bye!

Feeding JSON graph structures to the JIT

Published
by
admin
on July 2, 2008
in JavaScript information visualization toolkit (JIT), javascript, tutorial and version
. 1 Comment

Version 1.0.3a of the JIT allows you to load graph structures to the RGraph and Hypertree objects. I chose a different JSON structure for graphs, since JSON tree structures don’t seem conceptually suitable for this task.
Hypertree and RGraph objects have a new method called loadGraphFromJSON(json [,i]) that takes a graph structure (described below) and optionally an index to set a particular node as root for the visualization. Please refer to the documentation for more information.

The graph structure

The JSON graph structure is an array of nodes, each having as properties:

  • id a unique identifier for the node.
  • name a node’s name.
  • data The data property contains a dataset. That is, an array of key-value objects defined by the user. Roughly speaking, this is where you can put some extra information about your node. You’ll be able to access this information at different stages of the computation of the JIT visualizations by using a controller.
  • adjacencies An array of strings each representing a nodes id.

For example,

var json = [
{
	"id": "aUniqueIdentifier",
	"name": "usually a nodes name",
	"data": [
	    {key:"some key",       value: "some value"},
		{key:"some other key", value: "some other value"}
	],
	"adjacencies": ["anotherUniqueIdentifier", "yetAnotherUniqueIdentifier" /* ... */]
} /* ... more nodes here ... */ ];

I did a small example of a K6 rendered with a RGraph. The JSON graph structure used for this example is:

var json= [
    {"id":"node0",
     "name":"node0 name",
     "data":[
        {"key":"some key",
         "value":"some value"},
        {"key":"some other key",
         "value":"some other value"}],
     "adjacencies":["node1","node2","node3","node4","node5"]},
    {"id":"node1",
     "name":"node1 name",
     "data":[
        {"key":"some key",
         "value":"some value"},
        {"key":"some other key",
         "value":"some other value"}],
     "adjacencies":["node0","node2","node3","node4","node5"]},
    {"id":"node2",
     "name":"node2 name",
     "data":[
        {"key":"some key",
         "value":"some value"},
        {"key":"some other key",
         "value":"some other value"}],
     "adjacencies":["node0","node1","node3","node4","node5"]},
    {"id":"node3",
     "name":"node3 name",
     "data":[
        {"key":"some key",
         "value":"some value"},
        {"key":"some other key",
         "value":"some other value"}],
     "adjacencies":["node0","node1","node2","node4","node5"]},
    {"id":"node4",
     "name":"node4 name",
     "data":[
        {"key":"some key",
         "value":"some value"},
        {"key":"some other key",
         "value":"some other value"}],
     "adjacencies":["node0","node1","node2","node3","node5"]},
    {"id":"node5",
     "name":"node5 name",
     "data":[
        {"key":"some key",
         "value":"some value"},
        {"key":"some other key",
         "value":"some other value"}],
     "adjacencies":["node0","node1","node2","node3","node4"]}];

You can post any question at the google group for this project.
Enjoy!

JIT version 1.0.2a

Published
by
admin
on June 8, 2008
in JavaScript information visualization toolkit (JIT), javascript and version
. 1 Comment

Just dropping by to say I just released version 1.0.2a of the javascript infovis toolkit. You can also download it from the main page.
It fixes some known bugs on the Spacetree and Hyperbolic Tree visualizations.
I’d like to thank OpenCRX and Charles D. Aylward for pointing those errors out.
I also used version 1.4 of Natural Docs to make the docs.
Please let me know if you find more errors.
Bye! :)

Animated exploration of Graphs with radial layout video

Published
by
admin
on June 2, 2008
in JavaScript information visualization toolkit (JIT) and Uncategorized
. Closed

I ran into this youtube video that presents all the features to be included in the RGraph visualization. Some of them were mentioned in the previous post (polar interpolation, child ordering), other are already included with the library (the first animation constraint mentioned in the video, ease-in and ease-out transitions, etc). Anyway, I thought this could be interesting.


If you can’t see the embedded video, please access the video by clicking here.

You can also see the “original” paper here.

Further work on JIT

Published
by
admin
on May 20, 2008
in JavaScript information visualization toolkit (JIT)
. 8 Comments

I’m very happy with this first JavaScript Infovis Toolkit release, and I’m already working on fixing some known bugs and adding features for the next release of this library.
For the next step I’ll be focusing on fixing bugs, refactoring code, adding some features and improving the documentation.
Some of the things you’ll find in my TODO list are:

  • For RGraphs:
    • Add polar interpolation in animations.
    • Mantain Child ordering during transitions.
    • Change node diameters based on the first dataset object value.
    • Graph support (trees with cycles…)
  • For the ST:
    • Code refactoring.
    • Performance improvements (bind with the Animation object).
    • Support for IE.
  • For Hypertrees:
    • Bug fix (node diameters, multilevel display).
    • Graph support, (although it might be supporting Graph structures already).
  • Treemaps
    • Bug fix (mostly on computing rectangles dimensions).

Before adding some radical features (binding visualizations with real time mutable data, etc.) I really want to have a strong API, and in order to do that, I must do some research on my own.
Don’t forget you have some quick tutorials on the visualizations. Also, the Hypertree, ST, RGraph and Treemap have some object references. Finally, there’s a Google Group about the JIT here.

RGraph quick tutorial

Published
by
admin
on May 7, 2008
in JavaScript information visualization toolkit (JIT), javascript and tutorial
. 3 Comments

This tutorial requires you to have read Feeding JSON tree structures to the JIT and on controllers first.

Hi, this is going to be a quick tutorial on how to set the RGraph up and running.

We are going to work with this tree JSON structure:

var json = {"id":"node02",
 "name":"0.2",
 "data":[
    {"key":"key1",
     "value":8},
    {"key":"key2",
     "value":-88}],
 "children":[
    {"id":"node13",
     "name":"1.3",
     "data":[
        {"key":"key1",
         "value":8},
        {"key":"key2",
         "value":74}],
     "children":[
        {"id":"node24",
         "name":"2.4",
         "data":[
            {"key":"key1",
             "value":10},
            {"key":"key2",
             "value":55}],
         "children":[]},
        {"id":"node25",
         "name":"2.5",
         "data":[
            {"key":"key1",
             "value":8},
            {"key":"key2",
             "value":67}],
         "children":[]},
        {"id":"node26",
         "name":"2.6",
         "data":[
            {"key":"key1",
             "value":5},
            {"key":"key2",
             "value":-50}],
         "children":[]},
        {"id":"node27",
         "name":"2.7",
         "data":[
            {"key":"key1",
             "value":8},
            {"key":"key2",
             "value":10}],
         "children":[]},
        {"id":"node28",
         "name":"2.8",
         "data":[
            {"key":"key1",
             "value":2},
            {"key":"key2",
             "value":-69}],
         "children":[]},
        {"id":"node29",
         "name":"2.9",
         "data":[
            {"key":"key1",
             "value":3},
            {"key":"key2",
             "value":98}],
         "children":[]},
        {"id":"node210",
         "name":"2.10",
         "data":[
            {"key":"key1",
             "value":6},
            {"key":"key2",
             "value":12}],
         "children":[]},
        {"id":"node211",
         "name":"2.11",
         "data":[
            {"key":"key1",
             "value":2},
            {"key":"key2",
             "value":-95}],
         "children":[]}]},
    {"id":"node112",
     "name":"1.12",
     "data":[
        {"key":"key1",
         "value":1},
        {"key":"key2",
         "value":96}],
     "children":[
        {"id":"node213",
         "name":"2.13",
         "data":[
            {"key":"key1",
             "value":6},
            {"key":"key2",
             "value":-58}],
         "children":[]},
        {"id":"node214",
         "name":"2.14",
         "data":[
            {"key":"key1",
             "value":9},
            {"key":"key2",
             "value":-42}],
         "children":[]},
        {"id":"node215",
         "name":"2.15",
         "data":[
            {"key":"key1",
             "value":10},
            {"key":"key2",
             "value":92}],
         "children":[]},
        {"id":"node216",
         "name":"2.16",
         "data":[
            {"key":"key1",
             "value":7},
            {"key":"key2",
             "value":-15}],
         "children":[]},
        {"id":"node217",
         "name":"2.17",
         "data":[
            {"key":"key1",
             "value":3},
            {"key":"key2",
             "value":29}],
         "children":[]},
        {"id":"node218",
         "name":"2.18",
         "data":[
            {"key":"key1",
             "value":8},
            {"key":"key2",
             "value":-59}],
         "children":[]},
        {"id":"node219",
         "name":"2.19",
         "data":[
            {"key":"key1",
             "value":3},
            {"key":"key2",
             "value":21}],
         "children":[]},
        {"id":"node220",
         "name":"2.20",
         "data":[
            {"key":"key1",
             "value":2},
            {"key":"key2",
             "value":78}],
         "children":[]}]},
    {"id":"node121",
     "name":"1.21",
     "data":[
        {"key":"key1",
         "value":3},
        {"key":"key2",
         "value":53}],
     "children":[
        {"id":"node222",
         "name":"2.22",
         "data":[
            {"key":"key1",
             "value":5},
            {"key":"key2",
             "value":10}],
         "children":[]},
        {"id":"node223",
         "name":"2.23",
         "data":[
            {"key":"key1",
             "value":10},
            {"key":"key2",
             "value":21}],
         "children":[]},
        {"id":"node224",
         "name":"2.24",
         "data":[
            {"key":"key1",
             "value":6},
            {"key":"key2",
             "value":-32}],
         "children":[]},
        {"id":"node225",
         "name":"2.25",
         "data":[
            {"key":"key1",
             "value":5},
            {"key":"key2",
             "value":-42}],
         "children":[]},
        {"id":"node226",
         "name":"2.26",
         "data":[
            {"key":"key1",
             "value":2},
            {"key":"key2",
             "value":75}],
         "children":[]},
        {"id":"node227",
         "name":"2.27",
         "data":[
            {"key":"key1",
             "value":1},
            {"key":"key2",
             "value":-74}],
         "children":[]},
        {"id":"node228",
         "name":"2.28",
         "data":[
            {"key":"key1",
             "value":2},
            {"key":"key2",
             "value":52}],
         "children":[]},
        {"id":"node229",
         "name":"2.29",
         "data":[
            {"key":"key1",
             "value":10},
            {"key":"key2",
             "value":-49}],
         "children":[]}]},
    {"id":"node130",
     "name":"1.30",
     "data":[
        {"key":"key1",
         "value":9},
        {"key":"key2",
         "value":-29}],
     "children":[
        {"id":"node231",
         "name":"2.31",
         "data":[
            {"key":"key1",
             "value":6},
            {"key":"key2",
             "value":-23}],
         "children":[]},
        {"id":"node232",
         "name":"2.32",
         "data":[
            {"key":"key1",
             "value":10},
            {"key":"key2",
             "value":19}],
         "children":[]},
        {"id":"node233",
         "name":"2.33",
         "data":[
            {"key":"key1",
             "value":1},
            {"key":"key2",
             "value":92}],
         "children":[]}]},
    {"id":"node134",
     "name":"1.34",
     "data":[
        {"key":"key1",
         "value":9},
        {"key":"key2",
         "value":71}],
     "children":[
        {"id":"node235",
         "name":"2.35",
         "data":[
            {"key":"key1",
             "value":5},
            {"key":"key2",
             "value":-65}],
         "children":[]}]},
    {"id":"node136",
     "name":"1.36",
     "data":[
        {"key":"key1",
         "value":3},
        {"key":"key2",
         "value":-11}],
     "children":[
        {"id":"node237",
         "name":"2.37",
         "data":[
            {"key":"key1",
             "value":6},
            {"key":"key2",
             "value":-85}],
         "children":[]},
        {"id":"node238",
         "name":"2.38",
         "data":[
            {"key":"key1",
             "value":3},
            {"key":"key2",
             "value":-13}],
         "children":[]},
        {"id":"node239",
         "name":"2.39",
         "data":[
            {"key":"key1",
             "value":1},
            {"key":"key2",
             "value":80}],
         "children":[]},
        {"id":"node240",
         "name":"2.40",
         "data":[
            {"key":"key1",
             "value":10},
            {"key":"key2",
             "value":-69}],
         "children":[]}]},
    {"id":"node141",
     "name":"1.41",
     "data":[
        {"key":"key1",
         "value":10},
        {"key":"key2",
         "value":-4}],
     "children":[
        {"id":"node242",
         "name":"2.42",
         "data":[
            {"key":"key1",
             "value":8},
            {"key":"key2",
             "value":-27}],
         "children":[]},
        {"id":"node243",
         "name":"2.43",
         "data":[
            {"key":"key1",
             "value":9},
            {"key":"key2",
             "value":-44}],
         "children":[]},
        {"id":"node244",
         "name":"2.44",
         "data":[
            {"key":"key1",
             "value":9},
            {"key":"key2",
             "value":24}],
         "children":[]},
        {"id":"node245",
         "name":"2.45",
         "data":[
            {"key":"key1",
             "value":8},
            {"key":"key2",
             "value":-66}],
         "children":[]}]}]};

Put this HTML in your page:

<html>
	<head>

	<link type="text/css" rel="stylesheet" href="/static/css/example-rgraph.css" />

	<!--[if IE]>
		<script type="text/javascript" src="/static/js/excanvas.js"></script>
	<![endif]-->

	<script type="text/javascript" src="/static/js/rgraph/RGraph.js" ></script>
	<script type="text/javascript" src="/static/js/example/example-rgraph.js" ></script>

	</head>
	<body onload="init();">

         <canvas id="infovis" width="900" height="500"></canvas>
         <div id="label_container"></div>

	</body>
</html>

Note: You’ll probably have to change the paths to the css and javascript files.

Now, create a rgraph-example.css and put this code in it:

html,body {
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;padding:0;
	background-color:#333;
	text-align:center;
}

#infovis {
	width:900px;
	height:500px;
	background-color:#222;
}

.node {
	color: white;
	background-color:transparent;
	cursor:pointer;
	font-weight:bold;
	opacity:0.9;
	border:1px solid red;
}

.node:hover {
	cursor:pointer;
	color: #222;
	background-color:white;
	font-weight:bold;
	opacity:1;
}

Finally, create an example-rgraph.js file and put this code in it:
Note: I’ll be using the Mootools library to do this tutorial, just because I don’t want to spend time writing low level code that would make the code uglier. You can use any library you want (or none at all) though. You are provided with a Mootools library and excanvas library in the extras folder of the library. You can also download the mootools library here.

function init() {
	//Set node interpolation to linear (can also be 'polar')
	Config.interpolation = "linear";
	//Set distance for concentric circles
	Config.levelDistance = 100;
	//Set number of concentric circles, default's to six.
	Config.drawConcentricCircles = 4;

	var json= //data defined previously

	var canvas= new Canvas('infovis', '#ccddee', '#772277');

	var rgraph= new RGraph(canvas,  {
	  //Add a controller to make the tree move on click.
		onCreateLabel: function(domElement, node) {
			var d = $(domElement);
			d.addEvents({
				'click': function() {
					rgraph.onClick(d.id);
				}
			});
		}
	 });

	  //load tree from tree data.
	  rgraph.loadTreeFromJSON(json);
	  //compute positions
	  rgraph.compute();
	  //make first plot
	  rgraph.plot();
}

You should see a RGraph up and running. Click on the labels and the tree should move.

Some notes:

  • It’s mandatory to put the width and height properties on the canvas html tag.
    You could set those properties dynamically, of course, but what I mean is that setting only width and height style properties (as with CSS) isn’t enough.
  • You could change the label container id by setting the Config.labelContainer property to whatever id you like. Be sure to set that property before making a Canvas instance.
  • The Canvas constructor takes 3 parameters: the canvas id, the fillStyle property and the strokeStyle property. If you don’t know what those properties are, take a look at this section from the canvas tutorial.
  • You can take off the concentric circles by setting Config.drawConcentricCircles to false. Just be sure you do that before making a canvas or RGraph instance.

Customizing the Graph

Let’s add some labels!

First, strip off the border: 1px solid red; line from the .node class in your CSS file.
It should look like this:

.node {
	color: white;
	background-color:transparent;
	cursor:pointer;
	font-weight:bold;
	opacity:0.9;
}

Now we are going to add a javascript controller in order to put the name of the nodes into the labels. Since we only need to do this once, we’ll use the onCreateLabel method. If you don’t know what I’m talking about you should probably read the on controllers post first.

So the JavaScript file should look like this now:

function init() {
	//Set node interpolation to linear (can also be 'polar')
	Config.interpolation = "linear";
	//Set distance for concentric circles
	Config.levelDistance = 100;
	//Set number of concentric circles, default's to six.
	Config.drawConcentricCircles = 4;

	var json= //json data defined previously

	var canvas= new Canvas('infovis', '#ccddee', '#772277');

	var rgraph= new RGraph(canvas,  {
	  //Add a controller to assign a name to the created label.
		onCreateLabel: function(domElement, node) {
			var d = $(domElement);
			d.set('html', node.name).addEvents({
				'click': function() {
					rgraph.onClick(d.id);
				}
			});
		}
	 });

	  //load tree from tree data.
	  rgraph.loadTreeFromJSON(json);
	  //compute positions
	  rgraph.compute();
	  //make first plot
	  rgraph.plot();
}

You should see some labels now.
The thing is that… well, they are not centered. So we’ll just add an onPlaceLabel method to the controller in order to do that, since the onPlaceLabel method is called after labels have been placed.

So the js code should now look like:

function init() {
	//Set node interpolation to linear (can also be 'polar')
	Config.interpolation = "linear";
	//Set distance for concentric circles
	Config.levelDistance = 100;
	//Set number of concentric circles, default's to six.
	Config.drawConcentricCircles = 4;

	var json= //json data defined previously

	var canvas= new Canvas('infovis', '#ccddee', '#772277');

	var rgraph= new RGraph(canvas,  {
	  //Add a controller to assign a name to the label.
		onCreateLabel: function(domElement, node) {
			var d = $(domElement);
			d.set('html', node.name).addEvents({
				'click': function() {
					rgraph.onClick(d.id);
				}
			});
		},

	//Take off previous width and height styles and
	//add half of the *actual* label width to the left position
	// That will center your label (do the math man).
		onPlaceLabel: function(domElement, node) {
			domElement.innerHTML = '';
			domElement.innerHTML = node.name;
			var left = parseInt(domElement.style.left);
			domElement.style.width = '';
			domElement.style.height = '';
			var w = domElement.offsetWidth;
			domElement.style.left = (left - w /2) + 'px';
		}
	});

	  //load tree from tree data.
	  rgraph.loadTreeFromJSON(json);
	  //compute positions
	  rgraph.compute();
	  //make first plot
	  rgraph.plot();
}

You should see some centered labels now!

Labels already have the onclick event handler to move the graph. You set that onCreateLabel.

Remember there are lots of other controller methods!

Remember also that you can change the animation time and the frames per second in the animation with Config.animationTime and Config.fps.
Hope it was helpful.

ST quick tutorial

Published
by
admin
on May 7, 2008
in JavaScript information visualization toolkit (JIT), javascript and tutorial
. 1 Comment

This tutorial requires you to have read Feeding JSON tree structures to the JIT and on controllers first.

Hi, this is going to be a quick tutorial on how to set the ST up and running.

We are going to work with this tree JSON structure:

var json = {"id":"node02",
 "name":"0.2",
 "data":[
    {"key":"key1",
     "value":2},
    {"key":"key2",
     "value":-86}],
 "children":[
    {"id":"node13",
     "name":"1.3",
     "data":[
        {"key":"key1",
         "value":7},
        {"key":"key2",
         "value":73}],
     "children":[
        {"id":"node24",
         "name":"2.4",
         "data":[
            {"key":"key1",
             "value":2},
            {"key":"key2",
             "value":-49}],
         "children":[
            {"id":"node35",
             "name":"3.5",
             "data":[
                {"key":"key1",
                 "value":8},
                {"key":"key2",
                 "value":-10}],
             "children":[
                {"id":"node46",
                 "name":"4.6",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":74}],
                 "children":[]},
                {"id":"node47",
                 "name":"4.7",
                 "data":[
                    {"key":"key1",
                     "value":3},
                    {"key":"key2",
                     "value":-37}],
                 "children":[]}]},
            {"id":"node38",
             "name":"3.8",
             "data":[
                {"key":"key1",
                 "value":8},
                {"key":"key2",
                 "value":88}],
             "children":[
                {"id":"node49",
                 "name":"4.9",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":-67}],
                 "children":[]},
                {"id":"node410",
                 "name":"4.10",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":38}],
                 "children":[]},
                {"id":"node411",
                 "name":"4.11",
                 "data":[
                    {"key":"key1",
                     "value":5},
                    {"key":"key2",
                     "value":-77}],
                 "children":[]}]}]},
        {"id":"node212",
         "name":"2.12",
         "data":[
            {"key":"key1",
             "value":3},
            {"key":"key2",
             "value":-99}],
         "children":[
            {"id":"node313",
             "name":"3.13",
             "data":[
                {"key":"key1",
                 "value":9},
                {"key":"key2",
                 "value":48}],
             "children":[
                {"id":"node414",
                 "name":"4.14",
                 "data":[
                    {"key":"key1",
                     "value":8},
                    {"key":"key2",
                     "value":-19}],
                 "children":[]},
                {"id":"node415",
                 "name":"4.15",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":61}],
                 "children":[]},
                {"id":"node416",
                 "name":"4.16",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":83}],
                 "children":[]}]},
            {"id":"node317",
             "name":"3.17",
             "data":[
                {"key":"key1",
                 "value":4},
                {"key":"key2",
                 "value":-18}],
             "children":[
                {"id":"node418",
                 "name":"4.18",
                 "data":[
                    {"key":"key1",
                     "value":9},
                    {"key":"key2",
                     "value":-58}],
                 "children":[]},
                {"id":"node419",
                 "name":"4.19",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":-35}],
                 "children":[]},
                {"id":"node420",
                 "name":"4.20",
                 "data":[
                    {"key":"key1",
                     "value":1},
                    {"key":"key2",
                     "value":84}],
                 "children":[]},
                {"id":"node421",
                 "name":"4.21",
                 "data":[
                    {"key":"key1",
                     "value":1},
                    {"key":"key2",
                     "value":19}],
                 "children":[]}]}]},
        {"id":"node222",
         "name":"2.22",
         "data":[
            {"key":"key1",
             "value":7},
            {"key":"key2",
             "value":-3}],
         "children":[
            {"id":"node323",
             "name":"3.23",
             "data":[
                {"key":"key1",
                 "value":9},
                {"key":"key2",
                 "value":-53}],
             "children":[
                {"id":"node424",
                 "name":"4.24",
                 "data":[
                    {"key":"key1",
                     "value":4},
                    {"key":"key2",
                     "value":63}],
                 "children":[]},
                {"id":"node425",
                 "name":"4.25",
                 "data":[
                    {"key":"key1",
                     "value":8},
                    {"key":"key2",
                     "value":38}],
                 "children":[]},
                {"id":"node426",
                 "name":"4.26",
                 "data":[
                    {"key":"key1",
                     "value":5},
                    {"key":"key2",
                     "value":84}],
                 "children":[]}]}]}]},
    {"id":"node127",
     "name":"1.27",
     "data":[
        {"key":"key1",
         "value":4},
        {"key":"key2",
         "value":34}],
     "children":[
        {"id":"node228",
         "name":"2.28",
         "data":[
            {"key":"key1",
             "value":6},
            {"key":"key2",
             "value":-8}],
         "children":[
            {"id":"node329",
             "name":"3.29",
             "data":[
                {"key":"key1",
                 "value":4},
                {"key":"key2",
                 "value":-48}],
             "children":[
                {"id":"node430",
                 "name":"4.30",
                 "data":[
                    {"key":"key1",
                     "value":3},
                    {"key":"key2",
                     "value":-64}],
                 "children":[]},
                {"id":"node431",
                 "name":"4.31",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":-79}],
                 "children":[]},
                {"id":"node432",
                 "name":"4.32",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":18}],
                 "children":[]}]},
            {"id":"node333",
             "name":"3.33",
             "data":[
                {"key":"key1",
                 "value":1},
                {"key":"key2",
                 "value":96}],
             "children":[
                {"id":"node434",
                 "name":"4.34",
                 "data":[
                    {"key":"key1",
                     "value":4},
                    {"key":"key2",
                     "value":32}],
                 "children":[]},
                {"id":"node435",
                 "name":"4.35",
                 "data":[
                    {"key":"key1",
                     "value":3},
                    {"key":"key2",
                     "value":-52}],
                 "children":[]}]},
            {"id":"node336",
             "name":"3.36",
             "data":[
                {"key":"key1",
                 "value":6},
                {"key":"key2",
                 "value":81}],
             "children":[
                {"id":"node437",
                 "name":"4.37",
                 "data":[
                    {"key":"key1",
                     "value":4},
                    {"key":"key2",
                     "value":-51}],
                 "children":[]},
                {"id":"node438",
                 "name":"4.38",
                 "data":[
                    {"key":"key1",
                     "value":9},
                    {"key":"key2",
                     "value":14}],
                 "children":[]},
                {"id":"node439",
                 "name":"4.39",
                 "data":[
                    {"key":"key1",
                     "value":8},
                    {"key":"key2",
                     "value":18}],
                 "children":[]},
                {"id":"node440",
                 "name":"4.40",
                 "data":[
                    {"key":"key1",
                     "value":7},
                    {"key":"key2",
                     "value":-3}],
                 "children":[]}]},
            {"id":"node341",
             "name":"3.41",
             "data":[
                {"key":"key1",
                 "value":9},
                {"key":"key2",
                 "value":-56}],
             "children":[
                {"id":"node442",
                 "name":"4.42",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":56}],
                 "children":[]},
                {"id":"node443",
                 "name":"4.43",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":-90}],
                 "children":[]},
                {"id":"node444",
                 "name":"4.44",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":-64}],
                 "children":[]},
                {"id":"node445",
                 "name":"4.45",
                 "data":[
                    {"key":"key1",
                     "value":7},
                    {"key":"key2",
                     "value":-82}],
                 "children":[]}]}]},
        {"id":"node246",
         "name":"2.46",
         "data":[
            {"key":"key1",
             "value":8},
            {"key":"key2",
             "value":-16}],
         "children":[
            {"id":"node347",
             "name":"3.47",
             "data":[
                {"key":"key1",
                 "value":8},
                {"key":"key2",
                 "value":-41}],
             "children":[
                {"id":"node448",
                 "name":"4.48",
                 "data":[
                    {"key":"key1",
                     "value":7},
                    {"key":"key2",
                     "value":17}],
                 "children":[]},
                {"id":"node449",
                 "name":"4.49",
                 "data":[
                    {"key":"key1",
                     "value":7},
                    {"key":"key2",
                     "value":24}],
                 "children":[]},
                {"id":"node450",
                 "name":"4.50",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":-11}],
                 "children":[]},
                {"id":"node451",
                 "name":"4.51",
                 "data":[
                    {"key":"key1",
                     "value":1},
                    {"key":"key2",
                     "value":-77}],
                 "children":[]}]},
            {"id":"node352",
             "name":"3.52",
             "data":[
                {"key":"key1",
                 "value":8},
                {"key":"key2",
                 "value":20}],
             "children":[
                {"id":"node453",
                 "name":"4.53",
                 "data":[
                    {"key":"key1",
                     "value":5},
                    {"key":"key2",
                     "value":20}],
                 "children":[]},
                {"id":"node454",
                 "name":"4.54",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":77}],
                 "children":[]},
                {"id":"node455",
                 "name":"4.55",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":52}],
                 "children":[]},
                {"id":"node456",
                 "name":"4.56",
                 "data":[
                    {"key":"key1",
                     "value":3},
                    {"key":"key2",
                     "value":41}],
                 "children":[]}]},
            {"id":"node357",
             "name":"3.57",
             "data":[
                {"key":"key1",
                 "value":2},
                {"key":"key2",
                 "value":-17}],
             "children":[
                {"id":"node458",
                 "name":"4.58",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":4}],
                 "children":[]}]},
            {"id":"node359",
             "name":"3.59",
             "data":[
                {"key":"key1",
                 "value":10},
                {"key":"key2",
                 "value":-79}],
             "children":[
                {"id":"node460",
                 "name":"4.60",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":-55}],
                 "children":[]},
                {"id":"node461",
                 "name":"4.61",
                 "data":[
                    {"key":"key1",
                     "value":4},
                    {"key":"key2",
                     "value":92}],
                 "children":[]},
                {"id":"node462",
                 "name":"4.62",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":-40}],
                 "children":[]},
                {"id":"node463",
                 "name":"4.63",
                 "data":[
                    {"key":"key1",
                     "value":4},
                    {"key":"key2",
                     "value":57}],
                 "children":[]}]}]},
        {"id":"node264",
         "name":"2.64",
         "data":[
            {"key":"key1",
             "value":3},
            {"key":"key2",
             "value":91}],
         "children":[
            {"id":"node365",
             "name":"3.65",
             "data":[
                {"key":"key1",
                 "value":5},
                {"key":"key2",
                 "value":-51}],
             "children":[
                {"id":"node466",
                 "name":"4.66",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":50}],
                 "children":[]},
                {"id":"node467",
                 "name":"4.67",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":16}],
                 "children":[]}]},
            {"id":"node368",
             "name":"3.68",
             "data":[
                {"key":"key1",
                 "value":9},
                {"key":"key2",
                 "value":50}],
             "children":[
                {"id":"node469",
                 "name":"4.69",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":-22}],
                 "children":[]},
                {"id":"node470",
                 "name":"4.70",
                 "data":[
                    {"key":"key1",
                     "value":5},
                    {"key":"key2",
                     "value":-71}],
                 "children":[]}]}]},
        {"id":"node271",
         "name":"2.71",
         "data":[
            {"key":"key1",
             "value":3},
            {"key":"key2",
             "value":-40}],
         "children":[
            {"id":"node372",
             "name":"3.72",
             "data":[
                {"key":"key1",
                 "value":7},
                {"key":"key2",
                 "value":-7}],
             "children":[
                {"id":"node473",
                 "name":"4.73",
                 "data":[
                    {"key":"key1",
                     "value":8},
                    {"key":"key2",
                     "value":-35}],
                 "children":[]},
                {"id":"node474",
                 "name":"4.74",
                 "data":[
                    {"key":"key1",
                     "value":8},
                    {"key":"key2",
                     "value":92}],
                 "children":[]},
                {"id":"node475",
                 "name":"4.75",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":64}],
                 "children":[]},
                {"id":"node476",
                 "name":"4.76",
                 "data":[
                    {"key":"key1",
                     "value":7},
                    {"key":"key2",
                     "value":-95}],
                 "children":[]}]},
            {"id":"node377",
             "name":"3.77",
             "data":[
                {"key":"key1",
                 "value":3},
                {"key":"key2",
                 "value":-46}],
             "children":[
                {"id":"node478",
                 "name":"4.78",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":56}],
                 "children":[]},
                {"id":"node479",
                 "name":"4.79",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":-40}],
                 "children":[]},
                {"id":"node480",
                 "name":"4.80",
                 "data":[
                    {"key":"key1",
                     "value":2},
                    {"key":"key2",
                     "value":-88}],
                 "children":[]}]},
            {"id":"node381",
             "name":"3.81",
             "data":[
                {"key":"key1",
                 "value":6},
                {"key":"key2",
                 "value":-81}],
             "children":[
                {"id":"node482",
                 "name":"4.82",
                 "data":[
                    {"key":"key1",
                     "value":7},
                    {"key":"key2",
                     "value":-14}],
                 "children":[]}]},
            {"id":"node383",
             "name":"3.83",
             "data":[
                {"key":"key1",
                 "value":4},
                {"key":"key2",
                 "value":32}],
             "children":[
                {"id":"node484",
                 "name":"4.84",
                 "data":[
                    {"key":"key1",
                     "value":6},
                    {"key":"key2",
                     "value":36}],
                 "children":[]},
                {"id":"node485",
                 "name":"4.85",
                 "data":[
                    {"key":"key1",
                     "value":9},
                    {"key":"key2",
                     "value":96}],
                 "children":[]},
                {"id":"node486",
                 "name":"4.86",
                 "data":[
                    {"key":"key1",
                     "value":10},
                    {"key":"key2",
                     "value":13}],
                 "children":[]},
                {"id":"node487",
                 "name":"4.87",
                 "data":[
                    {"key":"key1",
                     "value":4},
                    {"key":"key2",
                     "value":96}],
                 "children":[]}]}]}]}]};

Put this HTML in your page:

<html>
	<head>

	<link type="text/css" rel="stylesheet" href="/static/css/example-spacetree.css" />

	<script type="text/javascript" src="/static/js/spacetree/Spacetree.js" ></script>
	<script type="text/javascript" src="/static/js/example/example-spacetree.js" ></script>

	</head>
	<body onload="init();">

<canvas id="infovis" width="900" height="500"></canvas>
<div id="label_container" />

	</body>
</html>

Note: You’ll probably have to change the paths to the css and javascript files.

Now, create a spacetree-example.css and put this code in it:

html, body {
	width:100%;
	height:100%;
	background-color:#444;
	text-align:center;
	overflow:hidden;
	font-size:9px;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin:0;padding:0;
}

#infovis {
	background-color:#222;
	position:relative;
	width:900px;
	height:500px;
}

a, a:link, a:visited {
	color:#343439;
}

.node {
	background-color:transparent;
	font-weight:bold;
	overflow:hidden;
	text-decoration:none;
	position:absolute;
	text-align:center;
	padding:4px 1px 1px 1px;
}

.node:hover {
	color:#393434;
}

.hidden{
	display:none;
}

Note: the margin:0;padding:0; on html,body is pretty important to place well the ST labels.

Finally, create an example-spacetree.js file and put this code in it:

function init() {
	  var json= //data defined previously
	  //Create a new canvas instance.
	  var canvas= new Canvas('infovis');
	  //Create a new ST instance
	  st= new ST(canvas);
	  //load json data
	  st.loadFromJSON(json);
	  //compute node positions and layout
	  st.compute();
	  //optional: make a translation of the tree
	  Tree.Geometry.translate(st.tree, new Complex(-200, 0), "startPos");
	  //Emulate a click on the root node.
	  st.onClick(st.tree.id);
}

You should see a spacetree up and running (it may take a few seconds to load).

Some notes:

  • It’s mandatory to put the width and height properties on the canvas html tag.
    You could set those properties dynamically, of course, but what I mean is that setting only width and height style properties (as with CSS) isn’t enough.
  • You could change the label container id by setting the Config.labelContainer property to whatever id you like. Be sure to set that property before making a Canvas instance.
  • The Canvas constructor takes 1 parameter: the canvas id. To set the fillStyle and strokeStyle properties for nodes which are in path to root or nodes which aren’t you should refer to Config.Node.(strokeStyle|fillStyle|strokeStyleInPath|fillStyleInPath).
  • You can define how many levels to expand by setting Config.levelsToShow. However, if the expanded subtree height is greater than the canvas height, the spacetree might not show all levels. Unfortunately, this doesn’t happen when the width of the subtree expanded is greater than the canvas width (divided by two).

Customizing the Spacetree

The default layout for the spacetree is “left”. That means that the root node always lies at the left of the visualization. You can set the tree layout to “top” though.
So, put a checkbox in your HTML. Your HTML should look like this:

<html>
	<head>

	<link type="text/css" rel="stylesheet" href="/static/css/example-spacetree.css" />

	<script type="text/javascript" src="/static/js/spacetree/Spacetree.js" ></script>
	<script type="text/javascript" src="/static/js/example/example-spacetree.js" ></script>

	</head>
	<body onload="init();">

<input type="checkbox" id="switch"/>
<canvas id="infovis" width="900" height="500"></canvas>
<div id="label_container" />

	</body>
</html>

Note: You can add some style to the checkbox to put it somewhere else.

Now change the JS file to put a handler on the onchange event. It should look like this:

function init() {
	  var json= //data defined previously
	  //Create a new canvas instance.
	  var canvas= new Canvas('infovis');
	  //Create a new ST instance
	  st= new ST(canvas);
	  //load json data
	  st.loadFromJSON(json);
	  //compute node positions and layout
	  st.compute();
	  //optional: make a translation of the tree
	  Tree.Geometry.translate(st.tree, new Complex(-200, 0), "startPos");
	  //Emulate a click on the root node.
	  st.onClick(st.tree.id);

	//Add input handler to switch spacetree orientation.
  var checkbox = document.getElementById('switch');
  	checkbox.onchange = function () {
    	checkbox.disabled = true;
    	st.switchPosition({onComplete: function() {
        checkbox.disabled = false;
    }});
  };
}

Now if you click on the checkbox you should be able to switch the Spacetree orientation. Hows that!

Remember that you can also add controlers to the spacetree!. Take a look at the on controllers section and some examples with the hypertree.

Hope it was helpful!