I’ve recently been looking around the Canvas and SVG development space and things have changed. Many amazing drawing and charting libraries are now available. The one in particular that caught my eye was Raphael. As the site says, “Raphael is a small JavaScript library that should simplify your work with vector graphics on the web” and it does.
I decided to try out the library by building a force directed graph. Mine is a pretty simple one and I probably didn’t get all the calculations exactly correct but the point wasn’t really the graph. It was trying out the library and I’m really glad I did. Here is what the graph looks like. Hopefully you saw a working example at the top of this post.
As you can see it’s rendered in SVG for supported browsers and VML in IE. I’ve only tested this in the latest versions of Google, Firefox, and IE so sorry if all you see is a broken element or script error.
What I really like about the library is it does not focus on one particular thing like charts or plotting. It’s just a drawing library. It has a great focus on providing easy to use shapes and paths. I was able to prototype the graph very quickly. I was shocked at how well it worked across all the browsers.
So I encourage you to go try the Raphael library. You will be building interesting scalable images in no time.
Nice work, especially adding the spreading. Have you tried spreading cyclic graphs? :)
I think a lot of people could use this if the nodes were skinnable (add labels etc) and selectable. How would you feel about this being iterated on?
I’ll have to look at cyclic graphs.
I would love to fix this up someday. I’m having a hard time getting the different node weights to work correctly. I think that would be my biggest challenge.