05/10/2008 IMPORTANT UPDATE:
-
This library is now part of the JavaScript Information Visualization Toolkit. Changes will no longer be published on this page.
What's a Hyperbolic Tree?
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.
How does it work?
The HT algorithm plots a tree in what's called the Poincaré Disk model of Hyperbolic Geometry, a kind of non-Euclidean geometry. Roughly speaking, the HT algorithm applies a moebius transformation to the tree in order to display it with a magnifying glass effect.
How to Browse?Just click anywhere on the tree to change its focus.
Integrating the HT with "real data":
tree.musictrails is a web app
that relates artists by common performances
on bands, discs, compilations, etc.
This way you can inter-relate artists/bands to other artists/bands
the same way you'd do with actors at
the "six degrees of separation" game.
See for example a Pearl Jam query. I'll wait for you right here.
See what happened? The page queried all Pearl Jam's related artists
(mainly the members of the band) and then connected those artists
to other bands they took part.
Well, I use this data to make a music recommendation engine that allows you to (hyperbolic) browse through bands and related artists in order to get to know new music as fast as possible.
Once the HT is loaded, there are just two rules for browsing it:
- Click on a yellow label to load the band's hyperbolic tree, or...
- Click anywhere else on the tree to get proper focus. Only the centered node and its children will display their names. (see image below)
Just click on "Hyperbolic Browse this" to see the corresponding hyperbolic tree of the musictrails recommendation. Liked it?
Musictrails is an advanced tool for music recommendations based on lastfm user tastes and the tree.musictrails "six degrees" method mentioned above. Just go to our home page, search for a band, and click on the results to watch recommended bands' youTube videos.
Are you a lastfm user and would you like to play with your lastfm stats?
Musictrails is more than just a music recommendation engine.
We use JavaScript sql-like queries to retrieve your lastfm music stats and display them in innovating and interesting ways.
You only have to sign up with your lastfm username (no lastfm password needed).
Try it out, I promise you won't regret it.
This work is based on
- A Focus+Context Technique Based on Hyperbolic Geometry for Visualizing Large Hierarchies.
- On Interactive Visualization of High-dimensional Data using the Hyperbolic Plane
This code works fine with Firefox1.5+, Opera 9.5 and Safari. Haven't tested it on IE with the excanvas library yet :P.
Get more information on how to use the hyperbolic tree here.
Post to: 
41 responses so far ↓
this is good, very much in line with the meta tagging and media streams movements. You should apply this to a browser plugin. Learn & Review programming languages: <a href='http://www.codesplunk.com'>http://www.codesplunk.com</a>
good help for bigginer
hi!
Hi, sorry, the new version is here: http://thejit.org bye!
posted on: 5/4/2008 - Yes it is. But if you wait until next week it will no longer be like that. How is it going with your new version? I still see v1.0 only available?
Hi, I need you help. I have faced a weired problem while using this old API. Whenever I call loadTree() after adding nodes and adjacencies, the plotting of nodes goes infinite. I guess, it is a problem with setInterval() and clearInterval() thing. Can you plzz, provide me your e-mail to discuss it further. Also, can't use new API as its loadTree() takes only JSON as parameter. Please, reaply at the earliest.
Yes it is. But if you wait until next week it will no longer be like that.
Would I be correct in understanding that the "loadTreeByJSON" function is limited to three levels? Root, Child, and Grandchild?
Hi, in a couple of weeks I'll be releasing a new version of the hyperbolic tree. This version will have a modular, clearer code, and a lot of performance improvements. If you are interested please give me your e-mail and I'll contact you. You can also email me at musictrails[at]gmail[dot]com. Stay tuned, I promise you won't regret having waited a couple of weeks for this.
Can you give clear step-by-step example of adding nodes and label them? Example may be - root node = world 1st children = asia,Europe, America grand Children = USA,India,England
it is not visible in safari on the ipod.
Looks very nice, how many nodes can be rendered in 10 seconds and how does it scale with increasing nodes..
Very great and useful tool! But how to define where the data is coming from? Is it possible to add textfiles, a MySQL-database or xml-files (feeds) where this tree can get it's information from? I can't find this in the Javascript-file...
Sorry, I don't work with .NET technologies :-(
Dear, I'm looking for the .Net objects to work with hyperbolic maps. Do you have some news about that? Or you work only with JavaScript tecnologies? Att, erfelipe@hotmail.com
That way, by calling the method loadTreeByJSON you can add labeled nodes to your tree. You should take also a look at the "objects" section of the API reference mentioned a the top of the page.
Hi, JSON generated trees are always 2-level trees. Take a Pearl Jam query: {"Pearl Jam":{"Pearl Jam & Cypress Hill":["Cypress Hill"],"Neil Young & Pearl Jam":["Neil Young"],"Jeff Ament":["Temple of the Dog","Mother Love Bone","Green River","M.A.C.C.","Three Fish","Gossman Project"],"Stone Gossard":["Temple of the Dog","Mother Love Bone","Brad","Green River","Gossman Project"],"Eddie Vedder":["Temple of the Dog","Eddie Vedder & Zeke","Bad Radio","Beck & Eddie Vedder"],"Mike McCready":["Mad Season","Temple of the Dog","$10,000 Gold Chain","M.A.C.C.","The Rockfords","Gossman Project"],"Matt Cameron":["Soundgarden","Temple of the Dog","Eleven","Queens of the Stone Age","Wellwater Conspiracy","M.A.C.C.","Tone Dogs"],"Dave Krusen":["Candlebox"],"Matt Chamberlain":["Critters Buggin","Edie Brickell and New Bohemians"],"Dave Abbruzzese":["Green Romance Orchestra"],"Jack Irons":["Redd Kross","Eleven","Red Hot Chili Peppers","Anthym","What Is This?"]}}
how do you insert labels in the nodes? Do you have sample data to show? By the way its awesome.
supperbe.tushar lashkari...lashkaritushra@gmail.com
gorgeous !!
Very cool, Thumb up!
Hey, thanks!
This works with Internet Explorer if you include this script http://excanvas.sourceforge.net/ and remove the test for HTMLCanvasElement in the Canvas constructor. A little slower though.
nice
Alles Torfnasen!
Very cool man. Next thing would be to package it up as a download with an easy to follow sample. Nice work!
Amzing Dude. Hats off..
at gmail dot com
Hi, Boris. It's like 5am in Argentina and I was looking forward to get some sleep, so I'll look into it tomorrow and tell you what I think. You can e-mail me at: musictrails
Hello, this is a great tool. I'd like to implement something like this for my project - memory bank of Humankind: you can find more info here: www.memorycemetery.com/about; so let's say clicking on a tag associated with dream or memory will show related deposits (containing same tag) and their authors, and clicking further on one of those deposits will show other posts by same author: it would be great if we could explore relationships between different people's reality perception...unfortunately I'm an artist, not a programmer :0...If you could help me with that (provided with credits and eternal gratitude), your help will be very appreciated. Sorry for posting it here: I couldn't find your email on the site. Once again, great project. Thanks, Boris. Please contact me on boris@memorycemetery.com if you'd be interested in giving me hand in developing this project and collaboration. Cheers
hahahhahahahahahaha
very exciting. is it possible in rectangular form amitesingh@gmail.com
very exciting. is it possible in rectangular form amitesingh@gmail.com
very exciting. is it possible in rectangular form amitesingh@gmail.com
very exciting. is it possible in rectangular form amitesingh@gmail.com
very impressive.
cleaver and interesting
Throwing lots of JS errors in FF2 on a Mac. "An invalid or illegal string was specified" code: "12"
I'm not selling it, so...
patented, though?
cool!
Comments