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

View Comments to “JavaScript Mindmap”

  1. Benny Says:

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

  2. Jornica Says:

    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

  3. Lenni Says:

    Looking good!

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

    Is there any way to style the mindmap?

  4. Dzul Says:

    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?

  5. Elliot Says:

    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

  6. Guest Says:

    I wrote something similar.  Check it out :

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

  7. Guest Says:

    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.

  8. Kenneth Says:

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

  9. Lou Says:

    effing awesome.

  10. Website Design Portugal Says:

    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.

  11. Kenneth Kufluk Says:

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

  12. Website Design Portugal Says:

    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.

  13. Website Design Portugal Says:

    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?

  14. Kenneth Kufluk Says:

    Sure. :) kenneth@kufluk.com

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

  15. Tim Says:

    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.

  16. kennethkufluk Says:

    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.

Leave a Reply

blog comments powered by Disqus