RedRaphael Part 1 – A JavaScript Graphics Library on Steroids

Last week, in a JavaScript conference, JSFoo, we took the wraps off a new open-source project we’ve been working on, that we call RedRaphael, and touted it as a JavaScript graphics library on steroids. We also promised a detailed series of blog posts to explain what RedRaphael is, and what it can do for you. Today, we’re kickstarting that series, and intend to tell you all you need to know about RedRaphael.

To get some background on how we got to this point of building RedRaphael, I’d suggest you glance through one of our previous posts titled ‘Embracing Raphael: A Look in the Rearview Mirror’. It talks about the thought that went behind choosing Raphael.js as the visualization platform for our FusoinCharts Suite XT line of products.

What is Raphael?

It’s a JavaScript graphics library that renders visualizations primarily in SVG, and has a fallback option for rendering in VML in older browsers that don’t support HTML5. You can check out the gallery to get a glimpse of the many types of visualizations possible with it.

Advantages over D3

First, and probably the most convincing advantage Raphael has over D3 is how easy it is to learn and implement. If you’ve tried creating visualizations with D3, you’ll be aware of how difficult it is to grasp its data binding models, which is necessary before you can get started building a customized chart that looks just the way you want it to. Sure, there are lots of samples in the D3 demo gallery that you can tweak for your usage, but as easy as that sounds, you’ll still have to learn the basics if you’re even close to serious about the visuals.

Another advantage Raphael has over D3, is that it renders in VML in older browsers like Internet Explorer 8 and below. Now you’re probably thinking, ‘who cares about IE, the world’s moved to Chrome and FireFox, right?’ Well, it turns out at least 12% of the world still uses IE 8 and below. If for nothing else, a kitten dies somewhere when you don’t support a browser that’s still used.

Painting Raphael red

So, you probably think after finding Raphael our job was done. On the contrary, we found that while Raphael was very extensible, had an active community of developers, and was friendly with older versions of IE, it still had some flaws when rendering certain advanced visualizations and interactive features. Also, from our experience with FusionCharts, there were a ton of new ideas we had that could further extend on Raphael’s strengths. We got to work creating our own fork of Raphael, and so was born RedRaphael.

While Raphael could handle advanced graphics in a lot of scenarios, RedRaphael is built from the ground-up for advanced graphic visualizations. Many operations that would take a mammoth effort in Raphael would become a breeze in RedRaphael.

RedRaphael – An overview

In this series, we’ll be deep diving into each of the new features that RedRaphael introduces, with code samples that you can play around with. For now, I’d like to list the key features with a brief description, without getting into the minute details right away.

Groups: Collections in Raphael, called Sets, are useful for simple use cases but when it comes to more complex operations like performing a transformation (e.g rotation) on the collection as a whole it can be very unintuitive and a hard nut to crack. RedRaphael makes working with collections simpler by harnessing the power of the group DOM element. Now working with collections is extremely simple.

Followers & stalkers: When you have objects that do very similar operations, you most often end up duplicating commands across the objects. With followers and stalkers, you can avoid duplication of tasks, element’s behavior depend on another element, and also follow the element around the DOM tree.

Custom attributes: In Raphael, custom attributes are applied at the paper level, making the attribute available across all the elements of the paper. RedRaphael goes a step further, allowing you to modify and manipulate shapes using custom attributes at the element level. This allows for extensive customization.

Custom shapes using Raphael.define: Raphael.define is an API we’ve provided to do detailed customizations like create new shape types, new graphical components, and have behaviors associated to them. Think of it as a one-stop-shop for all your extension needs.

If this post has got you interested, or at least curious about RedRaphael, we invite you to contribute to the project on GitHub.

If you can’t wait to see RedRaphael in action, check out this video from JSFoo: