Data Visualization Libraries: Your assistance and insights would be much appreciated.

[Hertzel Karbasi]

Hello

I'm in process of designing a data visualization service which renders/
visualizes data sources based on ready made (and user generated)
interactive infographics and charts templates.

In recent months i have been looked and red a lot of articles about
the following data visualization libraries:
thejit http://thejit.org/
rapaheljs http://raphaeljs.com/
processing.js http://processingjs.org/
highcharts http://www.highcharts.com/
jqplot http://www.jqplot.com/
d3.js http://mbostock.github.com/d3/
rgraph http://www.rgraph.net/
ggplot2 http://had.co.nz/ggplot2/ plotting system for R


Now i'm confused and would appreciate your directions and insights.
Could you please try briefly compare these libraries in following
aspects:
- Flexibility: non-trivial charts and infographics
- Performance: svg vs canvas
- Interactivity: clicks/hoover, events, animations, changing data
sources at runtime
- Scalability: thousands of data elements
- Browser support including apple devices:iphone,ipad

Best regards
Hertzel

[Chris Viau]

Flexibility

There is already a comparison between d3 and Processing.js on this thread. Raphaeljs encapsulates SVG and VML so you have less direct control over SVG but a free IE compatibility. JQuery.svg is also a good low level library, but is not maintained anymore, a bit slow on animations and with incomplete SVG support, but well documented and perfectly integrated with JQuery. A big difference with d3 is that d3 is data-driven. It is very good to map data to graphical elements or complete graphics and change data on the fly. Processing.js, Raphaeljs and d3 are low level librairies. You have to build your own visualizations (even if d3 is full of helper functions for this task). But all the other libraries in your list are more high level, describing common visualizations instead of building blocks.

Performance and scalability

It depends a lot on your rendering engine, but the performance is generally similar between both, according to my experience. But canvas is better where you have a lot of objects and svg where you want big scalable objects. That's because canvas will draw all the pixels all the time in a rendering loop, no matter how much shapes it defines. So it is more dependent on the size of the rendering area. SVG will add an element to the dom for each shape. So it can put it everywhere in your page and at any size. But a lot of element in the dom can be slow to render. 

Interactivity

You can not click on a canvas object out of the box. You have to use your own routines to track the events. SVG use the same dom events as everything else on the page. You can use both to change data at runtime by modifying elements dynamically with javascript. But d3 use a clever mapping between your model and your view to update it on the fly when data change. And high level libraries will free you to recompute all the layout each time you want to change the data. 

Browser support

You can track browser support on a lot of websites. But SVG support often come at the same time as canvas support. Even IE 9 have some sort of support for them. And, from my experience, IPhone is well supported, except for some workaround that you have to use for text support on canvas. Using a library help prevent these quirks. 

So the choice can be between:

-high level or low level libraries depending on your needs to build custom interactive visualizations or use traditional graphics. I choose low level because I'm a visualization designer, but you should maybe choose high level libraries. 

-vector graphics and retained mode vs pixel based and immediate mode. Libraries blur the differences between both. My opinion is it's a matter of taste. 

-wide or restricted browser support, especially if you want to support IE. Both need tweaks for this. Dropping browser support is a hard decision. But I think with a good targeting strategy, besides being much easier on developer, it educates browser user about using the right tool for the task. 

-interactivity is not a big problem since libraries can help you attach events even on canvas elements. But SVG have native event handling.

-canvas may be better for drawing a lot of elements on a small rendering area

In my sense, you could choose d3 if you need:

-data-driven documents ; )

-fluid animations

-low level building blocks but with high level helper functions

-a great community ; )

But you will need tweaks for IE to support SVG. 

But for your particular project, I would personally go with a well maintained, high level, cross-browser library as the JavaScript InfoVis Toolkit.

You want to build a tool like Many eyes?