JavaScript Visualization SL

Few months ago I thought that complex graphics in the browser are science fiction. Something we all wish for, yet too far away to think about it seriously. I completely changed my view recently. Not only that JavaScript engines are now fast enough (especially in Chrome), various tools for all kinds of visualization are readily available.

In fact so many of different tools exist that it was hard to choose the best for our problem. Most of them are build on top of one of four JavaScript visualization frameworks. There is no best (universal) framework though, as each have its strengths and weaknesses.

D3.js is a JavaScript library for manipulating documents based on data. It is the most general framework and, in comparison to other frameworks, the vocabulary of marks comes directly from web standards: HTML, SVG and CSS. It is a powerful framework, but hard to comprehend. D3.js builds on many of the concepts in Protovis, a previous visualization library developed by the same team.
The toolkit implements advanced features of information visualization like TreeMaps, an adapted visualization of trees based on the SpaceTree, a focus+context technique to plot Hyperbolic Trees, a radial layout of trees with advanced animations, called RGraph, and other visualizations. I did not try the InfoVis as other tools seemed more promising.
Processing.js recreates the methods and functionality (mostly) in the original java version of Processing.
A small JavaScript library to work with vector graphics on the web. It uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.
  • gRaphaël is a Raphaël based library to create interactive charts.

Besides the specialized frameworks, many visualization tools are built on top of general JavaScript libraries:

  • Flot is an excellent library, with support for plotting points, curve, bars, and areas. It is one of the fastest we tried, being able to visualize more than 100.000 points (in Chrome; Firefox is rather slow, even for 10.000 points).
  • jQuery SVG
  • jqPlot an alternative to Flot. The author was a long time Flot user.
  • Flotr a Prototype based alternative to Flot.
  • Dojo GFX is a cross-browser 2D vector graphics API that enables development of rich graphic web application.

While playing with different visualization tools in different browsers I noted that JavaScript runs much faster in Chrome than in Firefox (on Linux OS). Try to open this example of a graph visualization in several browser and share your experience with us.