http://blog.thejit.org A blog about the JIT Wed, 02 Jul 2008 19:51:18 +0000 http://backend.userland.com/rss092 en 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 ... http://blog.thejit.org/2008/07/02/feeding-json-graph-structures-to-the-jit/ 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 ... http://blog.thejit.org/2008/06/08/jit-version-102a/ 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, ... http://blog.thejit.org/2008/06/02/animated-exploration-of-graphs-with-radial-layout-video/ 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 ... http://blog.thejit.org/2008/05/20/further-work-on-jit-10a/ 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":[ ... http://blog.thejit.org/2008/05/07/rgraph-quick-tutorial/ 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":[ ... http://blog.thejit.org/2008/05/07/st-quick-tutorial/ 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 treemap up and running. Note: You could change all calls to TM.Squarified to TM.SliceAndDice and it should also work. We are ... http://blog.thejit.org/2008/05/07/treemap-quick-tutorial/ 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 hyperbolic tree up and running. We are going to work with this tree JSON structure: var json = {"id":"node02", "name":"0.2", "data":[ {"key":"key1", "value":9}, {"key":"key2", "value":71}], "children":[ {"id":"node13", "name":"1.3", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":-9}], "children":[ {"id":"node24", "name":"2.4", "data":[ {"key":"key1", "value":3}, {"key":"key2", "value":-42}], "children":[]}, {"id":"node25", "name":"2.5", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":59}], "children":[]}, {"id":"node26", "name":"2.6", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":-50}], "children":[]}, {"id":"node27", "name":"2.7", "data":[ {"key":"key1", "value":3}, {"key":"key2", "value":-78}], "children":[]}]}, {"id":"node18", "name":"1.8", "data":[ {"key":"key1", "value":1}, {"key":"key2", "value":79}], "children":[ {"id":"node29", "name":"2.9", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":77}], "children":[]}, {"id":"node210", "name":"2.10", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":30}], "children":[]}, {"id":"node211", "name":"2.11", "data":[ {"key":"key1", "value":3}, {"key":"key2", "value":-44}], "children":[]}]}, {"id":"node112", "name":"1.12", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":94}], "children":[ {"id":"node213", "name":"2.13", "data":[ {"key":"key1", "value":3}, {"key":"key2", "value":99}], "children":[]}, {"id":"node214", "name":"2.14", "data":[ {"key":"key1", "value":4}, {"key":"key2", "value":-72}], "children":[]}, {"id":"node215", "name":"2.15", "data":[ {"key":"key1", "value":10}, {"key":"key2", "value":17}], "children":[]}, {"id":"node216", "name":"2.16", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":53}], "children":[]}, {"id":"node217", "name":"2.17", "data":[ {"key":"key1", "value":4}, {"key":"key2", "value":-96}], "children":[]}, {"id":"node218", "name":"2.18", "data":[ {"key":"key1", "value":10}, {"key":"key2", "value":-84}], "children":[]}, {"id":"node219", "name":"2.19", "data":[ {"key":"key1", "value":9}, {"key":"key2", "value":-4}], "children":[]}, {"id":"node220", "name":"2.20", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":66}], "children":[]}]}, {"id":"node121", "name":"1.21", "data":[ {"key":"key1", "value":10}, {"key":"key2", "value":0}], "children":[ {"id":"node222", "name":"2.22", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":66}], "children":[]}, {"id":"node223", "name":"2.23", "data":[ {"key":"key1", "value":10}, {"key":"key2", "value":-78}], "children":[]}, {"id":"node224", "name":"2.24", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":-91}], "children":[]}, {"id":"node225", "name":"2.25", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":-51}], "children":[]}, {"id":"node226", "name":"2.26", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":25}], "children":[]}, {"id":"node227", "name":"2.27", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":30}], "children":[]}, {"id":"node228", "name":"2.28", "data":[ {"key":"key1", "value":3}, {"key":"key2", "value":-43}], "children":[]}]}, {"id":"node129", "name":"1.29", "data":[ {"key":"key1", "value":3}, {"key":"key2", "value":-89}], "children":[ {"id":"node230", "name":"2.30", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":96}], "children":[]}, {"id":"node231", "name":"2.31", "data":[ {"key":"key1", "value":1}, {"key":"key2", "value":-21}], "children":[]}, {"id":"node232", "name":"2.32", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":17}], "children":[]}, {"id":"node233", "name":"2.33", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":42}], "children":[]}]}, {"id":"node134", "name":"1.34", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":84}], "children":[ {"id":"node235", "name":"2.35", "data":[ {"key":"key1", "value":9}, {"key":"key2", "value":-14}], "children":[]}, {"id":"node236", "name":"2.36", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":60}], "children":[]}, {"id":"node237", "name":"2.37", "data":[ {"key":"key1", "value":1}, {"key":"key2", "value":-71}], "children":[]}]}, {"id":"node138", "name":"1.38", "data":[ {"key":"key1", "value":9}, {"key":"key2", "value":-70}], "children":[ {"id":"node239", "name":"2.39", "data":[ {"key":"key1", "value":10}, {"key":"key2", "value":-69}], "children":[]}, {"id":"node240", "name":"2.40", "data":[ {"key":"key1", "value":4}, {"key":"key2", "value":-31}], "children":[]}, {"id":"node241", "name":"2.41", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":-5}], "children":[]}, {"id":"node242", "name":"2.42", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":62}], "children":[]}, {"id":"node243", "name":"2.43", "data":[ {"key":"key1", "value":9}, {"key":"key2", "value":91}], "children":[]}]}, {"id":"node144", "name":"1.44", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":10}], "children":[ {"id":"node245", "name":"2.45", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":-2}], "children":[]}, {"id":"node246", "name":"2.46", "data":[ {"key":"key1", "value":1}, {"key":"key2", "value":93}], "children":[]}, {"id":"node247", "name":"2.47", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":70}], "children":[]}, {"id":"node248", "name":"2.48", "data":[ {"key":"key1", "value":4}, {"key":"key2", "value":-40}], "children":[]}]}, {"id":"node149", "name":"1.49", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":-58}], "children":[ {"id":"node250", "name":"2.50", "data":[ {"key":"key1", "value":4}, {"key":"key2", "value":-41}], "children":[]}, {"id":"node251", "name":"2.51", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":-91}], "children":[]}, {"id":"node252", "name":"2.52", "data":[ {"key":"key1", "value":5}, {"key":"key2", "value":-21}], "children":[]}, {"id":"node253", "name":"2.53", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":-69}], "children":[]}, {"id":"node254", "name":"2.54", "data":[ {"key":"key1", "value":10}, {"key":"key2", "value":5}], "children":[]}, {"id":"node255", "name":"2.55", "data":[ {"key":"key1", "value":5}, {"key":"key2", "value":-43}], "children":[]}, {"id":"node256", "name":"2.56", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":64}], "children":[]}, {"id":"node257", "name":"2.57", "data":[ {"key":"key1", "value":10}, {"key":"key2", "value":-60}], "children":[]}]}, {"id":"node158", "name":"1.58", "data":[ {"key":"key1", "value":7}, {"key":"key2", "value":-63}], "children":[ {"id":"node259", "name":"2.59", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":86}], "children":[]}, {"id":"node260", "name":"2.60", "data":[ {"key":"key1", "value":4}, {"key":"key2", "value":13}], "children":[]}, {"id":"node261", "name":"2.61", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":-70}], "children":[]}, {"id":"node262", "name":"2.62", "data":[ {"key":"key1", "value":5}, {"key":"key2", "value":-83}], "children":[]}, {"id":"node263", "name":"2.63", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":-98}], "children":[]}, {"id":"node264", "name":"2.64", "data":[ {"key":"key1", "value":2}, {"key":"key2", "value":-79}], "children":[]}, {"id":"node265", "name":"2.65", "data":[ {"key":"key1", "value":9}, {"key":"key2", "value":10}], "children":[]}, {"id":"node266", "name":"2.66", "data":[ {"key":"key1", "value":6}, {"key":"key2", "value":17}], "children":[]}, {"id":"node267", "name":"2.67", "data":[ {"key":"key1", "value":8}, {"key":"key2", "value":26}], "children":[]}]}]}; Put this HTML ... http://blog.thejit.org/2008/05/07/hypertree-quick-tutorial/ 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 ... http://blog.thejit.org/2008/04/27/on-controllers/ 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 ... http://blog.thejit.org/2008/04/27/feeding-json-tree-structures-to-the-jit/