Js info vis_toolkit

Term Paper for IT for Business
Intelligence

Java InfoVis
Toolkit
Data Visualization Tool

Submitted By:
Nikhil Yagnic (07AG3801)
A. Kranthi Kumar (10BM60001)

Table of Contents
Introduction .................................................................................................................................... 2
Feeding JSON tree structures to the JIT .......................................................................................... 2
On controllers ................................................................................................................................. 3
Exploring the Visualizations ............................................................................................................ 5
Area, bar and Pie Charts ............................................................................................................. 5
Sunburst ...................................................................................................................................... 6
Icicle ............................................................................................................................................ 6
Squarified Treemap..................................................................................................................... 7
SpaceTree .................................................................................................................................... 7
Tree Animation ........................................................................................................................... 8
Implementation – Hypertree .......................................................................................................... 8
Step1: Create your Data in JSON tree structure ......................................................................... 8
Step2: Add this HTML in your page ............................................................................................ 9
Step3: Create a JavaScript file ..................................................................................................... 9
Step4: Create a CSS file ............................................................................................................ 10
Step5: Update these paths in the HTML and refresh your browser ........................................ 10
Appendix 1 .................................................................................................................................... 11
Appendix 2 .................................................................................................................................... 15

Introduction
InfoVis is probably among the best known JavaScript visualization libraries. It is used in
publishing interactive data visualizations on the Web. The White House agrees: InfoVis was
used to create the Obama administration's Interactive Budget graphic.
What sets this tool apart from many others is the highly polished graphics it creates from just
basic code samples. InfoVis creator Nicolas García Belmonte, senior software architect at
Sencha Inc., clearly cares as much about aesthetic design as he does about the code, and it
shows.

Feeding JSON tree structures to the JIT
The tree structure that feeds the spacetree, hypertree, treemap and rgraph visualizations is
always the same. Roughly speaking, the JSON tree structure consists of tree 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.
 children An array of children nodes, or an empty array if the node is a leaf node.
For example,

varjson={
"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 */]
};

About datasets
Sometimes some dataset objects are read by the JIT classes to perform proper layouts. For
example, the treemap class reads the first object’s value for each node’s dataset to perform

calculations about the dimensions of the rectangles laid. Also, if you
enablethe Config.Color.allow property, the treemap will add colors on the layout, and these
colors will be based on your second dataset object value. RGraphs and Hyperbolic Trees also
read the firstdataset object value in order to compute node diameters and angular widths,
when setting Config.allowVariableNodeDiameters = true.

On controllers
Controllers are a straightforward way to customize the JavaScript infovis toolkit (JIT)
visualizations. A controller is a JavaScript object that “implements” an interface. The interface
methods will then be called at different stages of the visualization, allowing you to, for
example, place labels and add event handlers to them, performing actions before and after the
animation, making ajax - calls to load data dynamically to the tree, etc.
The controller interface is defined as:

varControllerInterface={

onCreateLabel:function(domElement,node){},

onPlaceLabel:function(domElement,node){},

onBeforePlotLine:function(adj){},

onAfterPlotLine:function(adj){},

onBeforeCompute:function(node){},

onAfterCompute:function(){}

request:function(nodeId,level,onComplete){},

};

where:
 onCreateLabel(domElement, node) is a method that receives the label domelement as
first parameter, and the homologue JSON tree node as second parameter. This method
will only be called on label creation. Note that a JSON tree node is a node from the input
tree you provided to the visualization. This method proves useful when adding events to
the labels used by the JIT.

 onPlaceLabel(domElement, node) is a method that receives the label dom element as
first parameter and the homologue JSON tree node as second parameter. This method
is called each time a label has been placed on the visualization, and thus it allows you to
update the labels properties, such as size or position. Note that onPlaceLabel will be
triggered after updating positions to the labels. That means that, for example,
the left and top css properties are allready updated to match the nodes positions.
 onBeforePlotLine(adj) is called right before plotting an edge. It provides an adjacence
object adj. This object contains two important
properties,adj.nodeFrom and adj.nodeTo which contain the graph nodes connected by
this edge. You can also assign extra information in an adjacency object, by using
the data property. This can be done when assigning weighted graph JSON structures to
the visualizations. To know more about weighted nodes and edges please check this
post.
 onAfterPlotLine(adj) behaves exactly like onBeforePlotLine except that this method is
called right after plotting the adj edge. This method can be useful to restore a lineWidth
state you've previously changedonBeforePlotLine.
 onBeforeCompute(node) is a method called right before performing all computation
and animations to the JIT visualization. In the case of treemaps this method will be
called after entering or exiting a tree level. In the case of Hyperbolic trees, RGraphs and
Spacetrees, this method will be triggered right before perfoming an animation. For
Treemap visualizations, the node parameter corresponds to the root node of the
subtree which will be laid out. For the Spacetree, Hypertree and RGraph visualizations,
the node parameter corresponds to the actual node being clicked or centered on the
canvas.
 onAfterCompute() is a method triggered right after all animations or computations for
the JIT visualizations ended.
 request(nodeId, level, onComplete) is a method only used by the Treemap and
Spacetree visualizations. You can use this method to "bufferize" information, so that not
all the JSON tree structure is loaded at once. The nodeId parameter is the node actually
being requested, thelevel parameter is the level of the subtree being requested, and the
onComplete handler is a function you must call after performing your request. A
common structure for the request method could be

request:function(nodeId,level,onComplete){
vardata;
//make a request call to fill the data object and on complete do:
onComplete(nodeId,data);
},

Note that you should not declare any of these methods on your controller object if you are not
going to use them. Note also that is not mandatory to provide a controller object to the main
classes.

Prerequisites
There are certain prerequisites to use this Javascript Infovis Toolkit.
1. Software
Download and Copy the Files
 Go to the website http://thejit.org/
 Download the current release from the website
 Make sure that the Jit-2.0.1 Zip file is downloaded
 Unzip the file and place the folder(Jit-2.0.1) in your working directory
 Go to the path ..Jit-2.0.1JitExamples and check for CSS folder
 Go to the path ..Jit-2.0.1JitExamples check for js files in all corresponding folders

Now you are ready with the scripts to display your data
2. Skills
 Expertise in Javascript
 Expertise in CSS and HTML

Exploring the Visualizations
Area, bar and Pie Charts
A static Area Chart example with gradients that displays tooltips when hovering the stacks. The
Bar Chart displays tooltips when hovering the stacks. A static Pie Chart example with gradients
that displays tooltips when hovering the stacks.

Sunburst
A static JSON Tree structure is used as input for this visualization. Tips are used to describe the
file size and its last modified date. Left click to rotate the Sunburst to the selected node and see
its details.
A static JSON Graph structure is used as input for this visualization. This example shows how
properties such as color, height, angular width and line width can be customized per node and
per edge in the JSON structure. Left click to select a node and show its relations.

Icicle
Some static JSON tree data is fed to this visualization. Left click to set a node as root for the
visualization. Right click to set the parent node as root for the visualization.

Squarified Treemap
In this example a static JSON tree is loaded into a Squarified Treemap. Left click to set a node as
root for the visualization. Right click to set the parent node as root for the visualization.

SpaceTree
A static JSON Tree structure is used as input for this animation. Click on a node to select it. You
can select the tree orientation by changing the select box in the right column. You can change
the selection mode from Normal selection (i.e. center the selected node) to Set as Root. Drag
and Drop the canvas to do some panning. Leaves color depend on the number of children they
actually have.
The second example shows how you can use the request controller method to create a
SpaceTree with on demand nodes. The basic JSON Tree structure is cloned and appended on
demand on each node to create an infinite large SpaceTree. You can select the tree orientation
by changing the select box in the right column.

Tree Animation
A static JSON Tree structure is used as input for this visualization. Click on a node to move the
tree and center that node. The centered node's children are displayed in a relations list in the
right column. Use the mouse wheel to zoom and drag and drop the canvas to pan.

Implementation – Hypertree
This is going to be a quick tutorial on how to set the hyperbolic tree up and running. We are
using data on twitter to show how hypertree can be used to demonstrate the relationship and
getting insights by visualizing in the best way.

Step1: Create your Data in JSON tree structure
The first step in building your tool is to input the data. JIT accepts the data in JSON tree format.
So you should build a JSON tree from your data. It is very simple and can be done manually or
by a PHP code.

JSON tree format needs following elements
ID: Unique Identifier
Name: Name of the Node
Data: you can give Key value pairs to store some info
Children: For relation
I have attached the JSON tree structure of the twitter data that I have created in Appendix 1
I have also attached a PHP script that can be used to convert SQL data into JSON structure.

Step2: Add this HTML in your page
To visualize the data in Hypertree format add the following code in your page.

<html>
<head>
<link type=”text/css” rel= “stylesheet” href=”csspath” />
<script type=”text/javascript” src=”path of hypertrees.js file” />
<script type=”text/javascript” src=”path of javascript file that you will create in
step3” />
</head>
<body onload=”init();”>
<div id=”infovis”></div>
</body>
</html>

Step3: Create a JavaScript file
Next step is to create a JavaScript file which processes the input JSON file. For this JIT has
readily developed JS files for every chart. One can use that JS file and replace the JSON tree
with their corresponding JSON tree.
Where to add our JSON tree?

Function init(){
//init data
Var json=
Remove the JSON after this till you see “//end” and place your JSON code.
And you can further modify the Javascript if you need using the functions that are already
available in the library.

I attached my JavaScript in Appendix 2

Step4: Create a CSS file
There is a default css file that is there with the JIT. You can use the same or edit that CSS file if
you need any change.

Step5: Update these paths in the HTML and refresh your browser
Give the paths of your JS and CSS file in the HTML that we added in the page and refresh the
browser.

Appendix 1
//init data
var json = {
"id": "347_0",
"name": "Coca Cola",
"children": [{
"id": "126510_1",
"name": "Marlo toigo",
"data": {
"band": "Coca Cola",
"relation": "Follower of brand"
},
"children": [{
"id": "52163_2",
"name": "MTV",
"data": {
"band": "Marlo toigo",
"relation": "Followed by User"},
"children": []
}, {
"id": "324134_3",
"name": "You Tube",
"data": {
"relation": "Followed by User"
},
"children": []
},
{
"id": "322134_4",
"name": "Music is Life",
"data": {
},
"children": []
},
{
"id": "324634_5",
"name": "Jhonny Deep",
"data": {
},
"children": []
}]
}, {
"id": "235951_6",
"name": "cristalle",
"data": {
},
"children": [{
"id": "2382_7",
"name": "Quotes about lifes",
"data": {
"band": "cristalle",
},

"children": []
}, {
"id": "2415_8",
"name": "Faith in God",
"data": {
},
"children": []
}, {
"id": "3963_9",
"name": "CNN",
"data": {
},
"children": []
}, {
"id": "7848_10",
"name": "I-Witness",
"data": {
},
"children": []
}]
}, {
"id": "2396_14",
"name": "Angler and wrangler",
"data": {
},
"children": [{
"id": "3963_15",
"name": "National Geographic",
"data": {
"band": "Angler and wrangler",
},
"children": []
}, {
"id": "32247_16",
"name": "US fish & wild Life",
"data": {
},
"children": []
}, {
"id": "83761_17",
"name": "Discover Boating gal",
"data": {
},
"children": []
}, {
"id": "133257_18",
"name": "Deer view horses",
"data": {

},
"children": []
}]
}, {
"id": "36352_19",
"name": "UNICEF Pakistan",
"data": {
},
"children": [{
"id": "1013_20",
"name": "World bank video",
"data": {
"band": "UNICEF Pakistan",
},
"children": []
}, {
"id": "3963_21",
"name": "Dr. Manmohan Singh",
"data": {
},
"children": []
}, {
"id": "5752_22",
"name": "UNDP Phillipine",
"data": {
},
"children": []
}, {
"id": "33602_23",
"name": "Cloud tweets",
"data": {
},
"children": []
}, {
"id": "40485_24",
"name": "UNICEF",
"data": {
},
"children": []
}, {
"id": "133257_25",
"name": "Exotic Birds",
"data": {
},
"children": []
}]
}, {
"id": "235955_32",
"name": "Bd Consulting",
"data": {

},
"children": [{
"id": "909_33",
"name": "Pepsico",
"data": {
"band": "Bd Consulting",
},
"children": []
}, {
"id": "1695_34",
"name": "Nestle",
"data": {
},
"children": []
}, {
"id": "1938_35",
"name": "P&G",
"data": {
},
"children": []
}, {
"id": "5138_36",
"name": "Saint Gobain",
"data": {
},
"children": []
}, {
"id": "53549_37",
"name": "Proco Global",
"data": {
},
"children": []
}, {
"id": "113510_38",
"name": "PPG Industries",
"data": {
},
"children": []
}, {
"id": "113512_39",
"name": "Ren",
"data": {
},
"children": []
}]
}],
"data": []
}

Appendix 2
var labelType, useGradients, nativeTextSupport, animate;

(function() {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText ==
'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
elem: false,
write: function(text){
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
}
};

function init(){
var json =
// your JSON code
var infovis = document.getElementById('infovis');
var w = infovis.offsetWidth - 50, h = infovis.offsetHeight - 50;

//init Hypertree
var ht = new $jit.Hypertree({
//id of the visualization container
injectInto: 'infovis',
//canvas width and height
width: w,
height: h,
//Change node and edge styles such as
//color, width and dimensions.
Node: {
dim: 9,
color: "#f00"
},
Edge: {
lineWidth: 2,
color: "#088"
},
onBeforeCompute: function(node){
Log.write("centering");
},
//Attach event handlers and add text to the
//labels. This method is only triggered on label
//creation

onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
$jit.util.addEvent(domElement, 'click', function () {
ht.onClick(node.id, {
onComplete: function() {
ht.controller.onComplete();
}
});
});
},
//Change node styles when labels are placed
//or moved.
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth <= 1) {
style.fontSize = "0.8em";
style.color = "#ddd";

} else if(node._depth == 2){
style.fontSize = "0.7em";
style.color = "#555";

} else {
style.display = 'none';
}

var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
},

onComplete: function(){
Log.write("done");

//Build the right column relations list.
//This is done by collecting the information (stored in the data property)
//for all the nodes adjacent to the centered node.
var node = ht.graph.getClosestNodeToOrigin("current");
var html = "<h4>" + node.name + "</h4><b>Connections:</b>";
html += "<ul>";
node.eachAdjacency(function(adj){
var child = adj.nodeTo;
if (child.data) {
var rel = (child.data.band == node.name) ? child.data.relation :
node.data.relation;
html += "<li>" + child.name + " " + "<div
class="relation">(relation: " + rel + ")</div></li>";
}
});
html += "</ul>";
$jit.id('inner-details').innerHTML = html;
}
});
//load JSON data.
ht.loadJSON(json);
//compute positions and plot.
ht.refresh();
//end
ht.controller.onComplete();
}

Js info vis_toolkit

More Related Content

What's hot (20)

Similar to Js info vis_toolkit (20)

Recently uploaded (20)

Js info vis_toolkit