JavaScript Mindmap

Posted on 25th October 2008 by Kenneth

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 :)

This entry was posted in Projects, Proper Articles and tagged , . Bookmark the permalink.
  • http://www.bloggaul.com/ Benny

    Great code!
    That’s what i looking for!
    I’ll be waiting for your final project …
    Good.
    God bless you!

  • http://www.bloggaul.com Benny

    Great code!
    That’s what i looking for!
    I’ll be waiting for your final project …
    Good.
    God bless you!

  • http://jornica.blogspot.com/2009/02/emp-mindmap.html Jornica

    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

  • http://jornica.blogspot.com/2009/02/emp-mindmap.html Jornica

    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

  • http://kenneth.kufluk.com/canvas.html?site=15567960826593299132&profileId=05487501801662696802 Lenni

    Looking good!

    Just what I needed after I talked a client out of using Flash.

    Is there any way to style the mindmap?

  • http://kenneth.kufluk.com/canvas.html?site=15567960826593299132&profileId=05487501801662696802 Lenni

    Looking good!

    Just what I needed after I talked a client out of using Flash.

    Is there any way to style the mindmap?

  • http://www.mdzulqarnain.co.cc/ Dzul

    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?

  • http://www.mdzulqarnain.co.cc Dzul

    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?

  • http://www.oneprofession.com/ Elliot

    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 :D

  • http://www.oneprofession.com Elliot

    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 :D

  • Guest

    I wrote something similar.  Check it out :

    http://cliffordmeece.com/content/mindmap-demo

  • Guest

    I wrote something similar.  Check it out :

    http://cliffordmeece.com/content/mindmap-demo

  • Guest

    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.

  • Guest

    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.

  • http://kenneth.kufluk.com/ Kenneth

    Yes, shouldn’t be a major issue to fix that I think. Will get onto it…

  • http://kenneth.kufluk.com Kenneth

    Yes, shouldn’t be a major issue to fix that I think. Will get onto it…

  • Lou

    effing awesome.

  • http://quintalinda.com/ Website Design Portugal

    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.

  • http://twitter.com/kennethkufluk Kenneth Kufluk

    Hello
    Can you give me some example code that you'd like to put it in? I'll have a go.
    K

  • http://quintalinda.com/ Website Design Portugal

    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.

  • http://quintalinda.com/ Website Design Portugal

    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?

  • http://twitter.com/kennethkufluk Kenneth Kufluk

    Sure. :) kenneth@kufluk.com

    Can't promise anything, but I'll do my best.

  • Tim

    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.

  • kennethkufluk

    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.

  • http://rjsteinert.com/ rjstatic

    Rad sauce! BTW this page makes me nauseous :/ 

  • Pingback: [??]web????:???? - ElfTail

  • Anonymous

    Very cool!  Forgive my ignorance in such matters as I am very new to this universe, but why is it that when I click on a node that references a link (a href) the link does not open?  I can right click and open the link in a new window….what am I failing to understand?

  • Ozark

    I had fun playing around with this. One thing I can’t figure out, is how to link two child nodes or how to link nodes from different child lists, so that anything linked in the parent would remain visible when clicking the linked node. Any ideas?