Your SlideShare is downloading. ×
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Js info vis_toolkit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Js info vis_toolkit

3,162

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,162
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Term Paper for IT for Business IntelligenceJava InfoVisToolkitData Visualization ToolSubmitted By:Nikhil Yagnic (07AG3801)A. Kranthi Kumar (10BM60001)
  • 2. Table of ContentsIntroduction .................................................................................................................................... 2Feeding JSON tree structures to the JIT .......................................................................................... 2On controllers ................................................................................................................................. 3Exploring the Visualizations ............................................................................................................ 5 Area, bar and Pie Charts ............................................................................................................. 5 Sunburst ...................................................................................................................................... 6 Icicle ............................................................................................................................................ 6 Squarified Treemap..................................................................................................................... 7 SpaceTree .................................................................................................................................... 7 Tree Animation ........................................................................................................................... 8Implementation – 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 ........................................ 10Appendix 1 .................................................................................................................................... 11Appendix 2 .................................................................................................................................... 15
  • 3. IntroductionInfoVis is probably among the best known JavaScript visualization libraries. It is used inpublishing interactive data visualizations on the Web. The White House agrees: InfoVis wasused to create the Obama administrations Interactive Budget graphic.What sets this tool apart from many others is the highly polished graphics it creates from justbasic code samples. InfoVis creator Nicolas García Belmonte, senior software architect atSencha Inc., clearly cares as much about aesthetic design as he does about the code, and itshows.Feeding JSON tree structures to the JITThe tree structure that feeds the spacetree, hypertree, treemap and rgraph visualizations isalways the same. Roughly speaking, the JSON tree structure consists of tree nodes, each havingas properties:  id a unique identifier for the node.  name a nodes 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. Youll 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 datasetsSometimes some dataset objects are read by the JIT classes to perform proper layouts. Forexample, the treemap class reads the first object’s value for each node’s dataset to perform
  • 4. calculations about the dimensions of the rectangles laid. Also, if youenablethe Config.Color.allow property, the treemap will add colors on the layout, and thesecolors will be based on your second dataset object value. RGraphs and Hyperbolic Trees alsoread the firstdataset object value in order to compute node diameters and angular widths,when setting Config.allowVariableNodeDiameters = true.On controllersControllers are a straightforward way to customize the JavaScript infovis toolkit (JIT)visualizations. A controller is a JavaScript object that “implements” an interface. The interfacemethods will then be called at different stages of the visualization, allowing you to, forexample, place labels and add event handlers to them, performing actions before and after theanimation, 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.
  • 5.  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 youve 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 berequest:function(nodeId,level,onComplete){vardata;//make a request call to fill the data object and on complete do:onComplete(nodeId,data);},
  • 6. Note that you should not declare any of these methods on your controller object if you are notgoing to use them. Note also that is not mandatory to provide a controller object to the mainclasses.PrerequisitesThere 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 foldersNow you are ready with the scripts to display your data 2. Skills  Expertise in Javascript  Expertise in CSS and HTMLExploring the VisualizationsArea, bar and Pie ChartsA static Area Chart example with gradients that displays tooltips when hovering the stacks. TheBar Chart displays tooltips when hovering the stacks. A static Pie Chart example with gradientsthat displays tooltips when hovering the stacks.
  • 7. SunburstA static JSON Tree structure is used as input for this visualization. Tips are used to describe thefile size and its last modified date. Left click to rotate the Sunburst to the selected node and seeits details.A static JSON Graph structure is used as input for this visualization. This example shows howproperties such as color, height, angular width and line width can be customized per node andper edge in the JSON structure. Left click to select a node and show its relations.IcicleSome static JSON tree data is fed to this visualization. Left click to set a node as root for thevisualization. Right click to set the parent node as root for the visualization.
  • 8. Squarified TreemapIn this example a static JSON tree is loaded into a Squarified Treemap. Left click to set a node asroot for the visualization. Right click to set the parent node as root for the visualization.SpaceTreeA static JSON Tree structure is used as input for this animation. Click on a node to select it. Youcan select the tree orientation by changing the select box in the right column. You can changethe selection mode from Normal selection (i.e. center the selected node) to Set as Root. Dragand Drop the canvas to do some panning. Leaves color depend on the number of children theyactually have.The second example shows how you can use the request controller method to create aSpaceTree with on demand nodes. The basic JSON Tree structure is cloned and appended ondemand on each node to create an infinite large SpaceTree. You can select the tree orientationby changing the select box in the right column.
  • 9. Tree AnimationA static JSON Tree structure is used as input for this visualization. Click on a node to move thetree and center that node. The centered nodes children are displayed in a relations list in theright column. Use the mouse wheel to zoom and drag and drop the canvas to pan.Implementation – HypertreeThis is going to be a quick tutorial on how to set the hyperbolic tree up and running. We areusing data on twitter to show how hypertree can be used to demonstrate the relationship andgetting insights by visualizing in the best way.Step1: Create your Data in JSON tree structureThe 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 orby a PHP code.
  • 10. JSON tree format needs following elementsID: Unique IdentifierName: Name of the NodeData: you can give Key value pairs to store some infoChildren: For relationI have attached the JSON tree structure of the twitter data that I have created in Appendix 1I have also attached a PHP script that can be used to convert SQL data into JSON structure.Step2: Add this HTML in your pageTo 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 instep3” /></head><body onload=”init();”><div id=”infovis”></div></body></html>Step3: Create a JavaScript fileNext step is to create a JavaScript file which processes the input JSON file. For this JIT hasreadily developed JS files for every chart. One can use that JS file and replace the JSON treewith their corresponding JSON tree.Where to add our JSON tree?Function init(){//init dataVar 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 alreadyavailable in the library.
  • 11. I attached my JavaScript in Appendix 2Step4: Create a CSS fileThere is a default css file that is there with the JIT. You can use the same or edit that CSS file ifyou need any change.Step5: Update these paths in the HTML and refresh your browserGive the paths of your JS and CSS file in the HTML that we added in the page and refresh thebrowser.
  • 12. 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": { "band": "Marlo toigo", "relation": "Followed by User" }, "children": [] }, { "id": "322134_4", "name": "Music is Life", "data": { "band": "Marlo toigo", "relation": "Followed by User" }, "children": [] }, { "id": "324634_5", "name": "Jhonny Deep", "data": { "band": "Marlo toigo", "relation": "Followed by User" }, "children": [] }] }, { "id": "235951_6", "name": "cristalle", "data": { "band": "Coca Cola", "relation": "Follower of brand" }, "children": [{ "id": "2382_7", "name": "Quotes about lifes", "data": { "band": "cristalle", "relation": "Followed by User" },
  • 13. "children": [] }, { "id": "2415_8", "name": "Faith in God", "data": { "band": "cristalle", "relation": "Followed by User" }, "children": [] }, { "id": "3963_9", "name": "CNN", "data": { "band": "cristalle", "relation": "Followed by User" }, "children": [] }, { "id": "7848_10", "name": "I-Witness", "data": { "band": "cristalle", "relation": "Followed by User" }, "children": [] }]}, { "id": "2396_14", "name": "Angler and wrangler", "data": { "band": "Coca Cola", "relation": "Follower of brand" }, "children": [{ "id": "3963_15", "name": "National Geographic", "data": { "band": "Angler and wrangler", "relation": "Followed by User" }, "children": [] }, { "id": "32247_16", "name": "US fish & wild Life", "data": { "band": "Angler and wrangler", "relation": "Followed by User" }, "children": [] }, { "id": "83761_17", "name": "Discover Boating gal", "data": { "band": "Angler and wrangler", "relation": "Followed by User" }, "children": [] }, { "id": "133257_18", "name": "Deer view horses", "data": { "band": "Angler and wrangler", "relation": "Followed by User"
  • 14. }, "children": [] }]}, { "id": "36352_19", "name": "UNICEF Pakistan", "data": { "band": "Coca Cola", "relation": "Follower of brand" }, "children": [{ "id": "1013_20", "name": "World bank video", "data": { "band": "UNICEF Pakistan", "relation": "Followed by User" }, "children": [] }, { "id": "3963_21", "name": "Dr. Manmohan Singh", "data": { "band": "UNICEF Pakistan", "relation": "Followed by User" }, "children": [] }, { "id": "5752_22", "name": "UNDP Phillipine", "data": { "band": "UNICEF Pakistan", "relation": "Followed by User" }, "children": [] }, { "id": "33602_23", "name": "Cloud tweets", "data": { "band": "UNICEF Pakistan", "relation": "Followed by User" }, "children": [] }, { "id": "40485_24", "name": "UNICEF", "data": { "band": "UNICEF Pakistan", "relation": "Followed by User" }, "children": [] }, { "id": "133257_25", "name": "Exotic Birds", "data": { "band": "UNICEF Pakistan", "relation": "Followed by User" }, "children": [] }]}, { "id": "235955_32", "name": "Bd Consulting", "data": {
  • 15. "band": "Coca Cola", "relation": "Follower of brand" }, "children": [{ "id": "909_33", "name": "Pepsico", "data": { "band": "Bd Consulting", "relation": "Followed by User" }, "children": [] }, { "id": "1695_34", "name": "Nestle", "data": { "band": "Bd Consulting", "relation": "Followed by User" }, "children": [] }, { "id": "1938_35", "name": "P&G", "data": { "band": "Bd Consulting", "relation": "Followed by User" }, "children": [] }, { "id": "5138_36", "name": "Saint Gobain", "data": { "band": "Bd Consulting", "relation": "Followed by User" }, "children": [] }, { "id": "53549_37", "name": "Proco Global", "data": { "band": "Bd Consulting", "relation": "Followed by User" }, "children": [] }, { "id": "113510_38", "name": "PPG Industries", "data": { "band": "Bd Consulting", "relation": "Followed by User" }, "children": [] }, { "id": "113512_39", "name": "Ren", "data": { "band": "Bd Consulting", "relation": "Followed by User" }, "children": [] }] }], "data": []}
  • 16. Appendix 2var 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); //Im 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
  • 17. 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 + " " + "<divclass="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();}

×