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