Trigger Graph

 

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.