Nicolas Garcia Belmonte has written a JavaScript Information Visualization Toolkit (JIT). The JIT features information visualizations such as Treemaps, Spacetrees, Hyperbolic Trees, and a radial layout of trees with advanced animations (RGraph).
A Hyperbolic Tree (HT) is a focus+context information visualization technique used to display large amount of inter-related data. This technique was originally developed (and patented) at Xerox PARC.
The HTML page
<html> <head> <title>Pac 10 Coaching</title> <link type="text/css" rel="stylesheet" href="example-hypertree.css" /> <!--[if IE]> <script type="text/javascript" src="/static/js/excanvas.js"></script> <![endif]--> <script type="text/javascript" src="mootools-1.2.js" ></script> <script type="text/javascript" src="Hypertree.js" ></script> <script type="text/javascript" src="pacTen.js" ></script> </head> <body onload="init();"> <div id="myBox" style="margin-left: auto; margin-right: auto; width: 400px; height: 50px; background-color: cyan; border: solid medium orange"></div> <canvas id="infovis" width="900" height="500" style="background-color: orange; padding: 10px"></canvas> <div id="label_container"></div> </body> </html>
The JSON object within "pacTen.js"
var json =
{"id":"node00", "name":"Pac Ten Coaches",
"data":[{"key":"key1","value":""},{"key":"key2","value": ""}],
"children":
[
/***************************************************************************************/
{"id":"node99","name":"Bruins",
"data":[{"key":"key1","value":"University of California, Los Angeles"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node90","name":"Wild Cats",
"data":[{"key":"key1","value":"University of Arizona"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node80","name":"Trojans",
"data":[{"key":"key1","value":"University of Southern California"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node70","name":"Bears",
"data":[{"key":"key1","value":"University of California, Berkeley"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node60","name":"Sun Devils",
"data":[{"key":"key1","value":"Arizona State University"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node50","name":"Cardinal",
"data":[{"key":"key1","value":"Stanford University"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node40","name":"Beavers",
"data":[{"key":"key1","value":"Oregon State University"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node30","name":"Ducks",
"data":[{"key":"key1","value":"University of Oregon"},{"key":"key2","value":""}],
"children":[]},
/***************************************************************************************/
{"id":"node20","name":"Cougars",
"data":[{"key":"key1","value": "Washington State University"},{"key":"key2","value":""}],
"children":
[
{"id":"node201","name":"Paul Wulff",
"data":[{"key":"key1","value": "Head coach"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node202","name":"Chris Ball",
"data":[{"key":"key1","value": "Assistant head coach"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node203","name":"Steve Broussard",
"data":[{"key":"key1","value": "Special teams"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node204","name":"Harold Etheridge",
"data":[{"key":"key1","value": "Offensive line"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node205","name":"Mike Levenseller",
"data":[{"key":"key1","value": "Wide receivers"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node206","name":"Travis Niekamp",
"data":[{"key":"key1","value": "Linebackers"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node207","name":"Rich Rasmussen",
"data":[{"key":"key1","value": "Tight ends"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node208","name":"Malik Roberson",
"data":[{"key":"key1","value": "Defensive line"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node209","name":"Jody Sears",
"data":[{"key":"key1","value": "Cornerbacks"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node2010","name":"Todd Sturdy",
"data":[{"key":"key1","value": "Quarterbacks"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node2011","name":"Nick Lucey",
"data":[{"key":"key1","value": "Graduate assistant coach"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node2012","name":"Ryan Smaha",
"data":[{"key":"key1","value": "Graduate assistant coach"},{"key":"key2","value": "3rd year"}],
"children":[]}
]},
/******************************************************************************************/
{"id":"node10","name":"Huskies",
"data":[{"key":"key1","value": "University of Washington"},{"key":"key2","value": ""}],
"children":
[
{"id":"node101","name":"Tyrone Willingham",
"data":[{"key":"key1","value": "Head Coach"},{"key":"key2","value": "4th Season"}],
"children":[]},
{"id":"node102","name":"Ed Donatell",
"data":[{"key":"key1","value": "Defensive Coordinator"},{"key":"key2","value": "1st year"}],
"children":[]},
{"id":"node103","name":"Tim Lappano",
"data":[{"key":"key1","value": "Offensive coach"},{"key":"key2","value": "3rd year"}],
"children":[]},
{"id":"node104","name":"Charlie Baggett",
"data":[{"key":"key1","value": "Wide receivers coach"},{"key":"key2","value":"2nd year"}],
"children":[]},
{"id":"node105","name":"Mike Denbrock",
"data":[{"key":"key1","value": "Offensive line coach"},{"key":"key2","value": "3rd year"}],
"children":[]},
{"id":"node106","name":"Steve Gervais",
"data":[{"key":"key1","value": "Running backs coach"},{"key":"key2","value": "1st year"}],
"children":[]},
{"id":"node107","name":"Randy Hart",
"data":[{"key":"key1","value": "Defensive line coach"},{"key":"key2","value": "20th year"}],
"children":[]},
{"id":"node108","name":"Chris Tormey",
"data":[{"key":"key1","value": "Linebackers"},{"key":"key2","value": "4th year"}],
"children":[]},
{"id":"node109","name":"Brian White",
"data":[{"key":"key1","value":"Tight ends"},{"key":"key2","value": "1st year"}],
"children":[]},
{"id":"node110","name":"J.D. Williams",
"data":[{"key":"key1","value": "Secondary coach"},{"key":"key2","value": "2nd year"}],
"children":[]},
{"id":"node111","name":"Luke Huard",
"data":[{"key":"key1","value": "Graduate assistant"},{"key":"key2","value": "1st year"}],
"children":[]},
{"id":"node112","name":"Torrey Myers",
"data":[{"key":"key1","value": "Graduate assistant coach"},{"key":"key2","value":"1st year"}],
"children":[]},
{"id":"node113","name":"Erica Genise",
"data":[{"key":"key1","value": "FB operations director"},{"key":"key2","value": "3rd year"}],
"children":[]}
]
}
]
};