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

},

http://blog.thejit.org/assets/jit-1.0a/doc/core/files/Hypertree-js.html#Graph.Adjacence

http://blog.thejit.org/assets/jit-1.0a/doc/core/files/Hypertree-js.html#Graph.Adjacence

http://blog.thejit.org/assets/jit-1.0a/doc/core/files/Hypertree-js.html#Graph.Node

http://blog.thejit.org/2008/08/05/weighted-nodes-weighted-edges/

http://blog.thejit.org/2008/08/05/weighted-nodes-weighted-edges/

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.1\Jit\Examples and check for CSS folder

Go to the path ..\Jit-2.0.1\Jit\Examples 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.

http://thejit.org/

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

Business

Transcript of Js info vis_toolkit