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 |
|
|
InfoVis |
|
|
Processing.js |
|
|
Recline.js |
|
|