Sorry

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.

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