Review: 4 supercool JavaScript tools for data visualization

Free, open source D3, InfoViz, Processing.js, and Recline.js bring dynamic, interactive -- and jaw-dropping -- data-driven graphics to the Web browser

New graphical elements in HTML5 and the blossoming of JavaScript libraries have sparked a positive renaissance in interactive data display techniques. Today's Web browsers not only function as a rich user interface with responsive and eye-pleasing graphical controls, but serve as a data visualization playground of moving histograms, frothing bubble charts, wind-blown graphs, and colorful maps whose boundaries swell and shrink.

Delivered to your desktop from around the Web, this seemingly endless variety of dynamic and interactive graphics allow news outlets and bloggers and merchants -- anyone with a website and access to a data source -- to present data in dynamic ways you'd never expect to see in a lowly browser.

[ Also on InfoWorld: The triumph of JavaScript | Test your JavaScript mettle in InfoWorld's JavaScript IQ test | Keep up with the latest developer news with InfoWorld's Developer World newsletter. ]

This age of interactive data visualization rests largely on capabilities provided by JavaScript libraries designed specifically for the task. In this article, we'll look at four such libraries: D3, InfoVis, Processing.js, and Recline.js. All of these libraries can be used to adorn your Web page with dynamic data visualizations, but each takes a different approach to providing that capability. And all four are free to use and redistribute under open source licenses.

D3 takes a sort of "ground-up" approach, combining the data structures already found in the DOM representation of a Web page with some of JavaScript's more esoteric capabilities. The result is both powerful and eye opening.

InfoVis follows a more conservative path. Its API is clearly delineated, and its use is easily grasped: Insert the chart objects and feed them data; InfoViz does the rest.

Processing.js, the JavaScript version of an initially Java-based graphical system, is not content to provide merely data visualizations, but is fully capable of the sort of animations you might find in video games.

Finally, Recline.js treats data visualization as one aspect of data exploration. While it prefers its data organized into fields and records, it is nonetheless happy to provide you with timelines, line graphs, or even geographical visualizations.

JavaScript libraries for data visualization

  Pros Cons
D3
  • Abundance of examples
  • Uses standard DOM objects; easily debugged
  • Can be extended to create almost any data visualization you can dream up
  • Steep learning curve
  • Data "lifecycle model" not straightforward
  • Optimal use requires deep understanding of JavaScript
InfoVis
  • API is easy to comprehend
  • Hookable calls to enhance interactivity
  • Mainly a charting library; less flexible than others
  • Not as easily extended as other tools
Processing.js
  • Can be used to create animations
  • Largely compatible with original Processing Java tool
  • IDE and online test platforms available
  • Requires learning the Processing language
  • Passing data into engine requires some gymnastics
Recline.js
  • Online exerciser
  • Excellent integration with other JavaScript libraries
  • Sees the world through "relational database" eyes
  • Limited out-of-the-box charts
  • Documentation needs work
1 2 3 4 5 6 7 8 9 10 11 Page 1
Page 1 of 11