JavaScript Mindmap
I’ve been writing a JavaScript Mindmap.
It’s got very few dependancies: Mootools is used for dragging and the $ and $$ shortcuts. Also, excanvas gives IE canvas support.
UPDATE: it now uses jQuery instead of Mootools.
I tried to make it use “good juju”, by using good semantics. Therefore, it just builds out HTML lists.
And it’s fairly easy to see how it works.
Not sure what to call it. Called it Mindmap, called it spidermap, called it js-mindmap again.
http://code.google.com/p/js-mindmap
Demo:
http://kenneth.kufluk.com/google/js-mindmap/
The aim is to provide a nice example to play with, not for any commercial gain.
Check it out. Suggest improvements. Bleat about bugs. Put me down for my poor coding styles. Or otherwise ignore it 
Like it? Hate it? Correct it! Tweet it!
Tags: javascript, mindmap
January 20th, 2009 at 8:11 am
Great code!
That’s what i looking for!
I’ll be waiting for your final project …
Good.
God bless you!
February 2nd, 2009 at 11:02 pm
I’ve used js-mindmap to display hierarchical data (http://jornica.blogspot.com/2009/02/emp-mindmap.html) i.e. all employees. The code may not be perfect, but it works.
Just wondering, if you have a large amount of list data, how do you speed up the animation?
With kind regards,
Jornica
April 9th, 2009 at 12:44 pm
Looking good!
Just what I needed after I talked a client out of using Flash.
Is there any way to style the mindmap?
May 9th, 2009 at 6:34 pm
Awesome code!
Just what I’ve been looking for.
I’m wondering if there’s a way to add on a node on-the-fly without refreshing the page, possibly using AJAX?
May 15th, 2009 at 1:12 pm
I was just about to write something like this, and thought I’d take a look around! Thank god I did!
I want to use it to be a little more complex than you have, but perhaps I can extend it and give back the code, or do something similar. Nice work. I’m not a big fan of the constant jiggling around that it does though, perhaps it could settle down more quickly (is there a parameter?)… there’s my bleat
September 1st, 2009 at 9:58 am
I wrote something similar. Check it out :
http://cliffordmeece.com/content/mindmap-demo
September 4th, 2009 at 10:35 am
Very impressive. Alas, also very resource intensive. I wrote an XSL transform that turns my XHMTL resume into a js-mindmap display. If I leave it open in a tab in Firefox for Mac, or IE 7 (obviously not for Mac), my CPU usage maxes out. I’m not sure that it’s possible to do this without massive amounts of JavaScript. It’s a shame browsers handle it so poorly.
September 7th, 2009 at 11:20 am
Yes, shouldn’t be a major issue to fix that I think. Will get onto it…
February 16th, 2010 at 10:06 am
effing awesome.
March 3rd, 2010 at 10:17 am
Hi, I've got your mind map running on my site – however as noted below it's got my processor running full whack – also I'd like to position it relatively inside a floating div – that's to say, my layout floats to the middle – and I'd like it to be fixed within a set size div element in this layout – how can I achieve that?
thanks in advance and well done on this great project.
March 3rd, 2010 at 10:20 am
Hello
Can you give me some example code that you'd like to put it in? I'll have a go.
K
March 3rd, 2010 at 10:50 am
great – thanks for the swift reply
I'll get my code into a working state and upload something that you can check – if that's ok.
I'll post the name of the div I'd like it to sit inside and the dimensions.
thanks again.
March 3rd, 2010 at 11:02 am
Any chance I can post the URL to your email / IM – the site is not launched and I don't really want it to get indexed?
March 3rd, 2010 at 11:05 am
Sure.
kenneth@kufluk.com
Can't promise anything, but I'll do my best.
April 26th, 2010 at 2:45 pm
Hi, great script. I'm wondering if it is possible to make content clickable within the nodes. It would be great to add external links to the individual bubbles of the mindmap. Fo instance clicking the bubble will re-shape the mindmap, clicking the text would open a link.
April 28th, 2010 at 4:31 pm
Thanks. It's quite easy to make the bubbles double-click to link, but I agree that it's not ideal. It would be better to have a panel associated with each node, which could contain links, but I'm not sure how best to semantically represent that in the HTML.