Review: 4 supercool JavaScript tools for data visualization

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.

D3

You may have already seen D3 (short for Data-Driven Documents) in action — it’s the visualization library behind many of the interactive infographics on the New York Times online edition’s pages. Links to some of those articles are at the website of Michael Bostock — the principal author of D3, though he acknowledges considerable contributions from Jason Davies.

D3 is the offspring of an earlier project called Protovis. The evolution from Protovis to D3 — as well as an excellent overview of D3’s internals — can be found in the paper, “D3: Data-Driven Documents,” by Bostock, Vadim Ogievetsky, and Jeff Heer.

D3 is similar to jQuery in that it manipulates the DOM directly. This sets it apart from most other visualization tools, which execute in a separate set of objects and functions and call into the DOM through standard APIs. D3 employs entities already familiar to Web developers. For example, you can use CSS to style elements that D3 manipulates. Also, because D3 uses internally the same structures employed by the browser to represent the document, you can work with existing browser-based development and debugging tools with D3.

In D3’s world, selections are key. Selections allow you to easily and iteratively perform operations on sets of document nodes. To change the color of all paragraph elements:

d3.selectAll("p").style("color", "white");

This technique of “chaining” a pipeline of functions — each passing its results to the function appended to its right — will be familiar to users of jQuery and Prototype. D3 programmers use it to concisely express multiple actions in a compact space. Selectors make DOM node manipulations as simple as setting attributes and styles, or as complex as sorting nodes, adding nodes, and removing nodes.

D3 binds data to DOM nodes via the data() function. Typically chained after a select operation, data() builds data nodes and associates them with DOM nodes returned from the selection. You can think of the data as being “joined” to the DOM nodes. This joined data ultimately drives the visualization of the elements represented by the DOM nodes. It determines the height of bars in a bar chart, the size of bubbles in a bubble graph, the position of teardrop markers on a map, and so on.

Data joining is a key component of what D3 refers to as the “general update pattern.” A style of coding a D3 application, the general update pattern starts with a selection operation, which is then followed by operations that add elements corresponding to new data via D3’s enter() function, update existing elements (by modifying whatever element attributes need modification), and remove elements corresponding to data that is no longer part of the visualization, via D3’s exit() function. Although difficult to grasp initially, the general update pattern nicely manages a visualization’s entire lifecycle.

Data also drives D3’s transitions, allowing the tool to produce dynamic displays, as opposed to simply painting static graphics. The relative size of bubbles in a bubble graph swell or shrink, and bar charts rise and fall, as new data enters the visualization and old data exits.

In D3, a transition is implemented as a key-frame animation of two frames: starting and ending. The starting frame is a visual element’s current state. The ending frame is defined by data that specifies the values of attributes to be applied to that element. D3’s interpolator functions handle the transition. D3 supplies interpolators for things like numbers and colors; it’s smart enough to peek into strings and locate and interpolate embedded values such as the font size in a font specification. You can define your own interpolator functions; D3 even integrates with CSS3 transitions.

Where does the data come from? Although you can embed it directly into your application, D3 has functions for reading data from external sources: text files, CSV files, JSON documents, and others. It can even read an HTML document and parse its contents into a document tree.

D3’s documentation is voluminous, though it’s scattered throughout links on the Web page. The API documentation is excellent, with code sample interwoven among the explanations. While the links in the API docs are to specific functions, everything is organized by activity with each of D3’s modules. The Web page also leads to piles of tutorials and presentations on other websites.

You’ll have the most fun by exploring the Examples Gallery, which drops you into a treasure trove of sample D3 visualizations. Many of the gallery’s examples are accompanied by commentary, as well as annotated source code. You could spend days exploring all the chart types and visualization techniques presented.

D3 has a relatively steep learning curve. Its mechanism for handling a visualization’s changing data set — existing data elements being modified, new data elements being added, and old data elements being removed — requires careful study (and a good understanding of JavaScript) to fully comprehend. Luckily, the available tutorials are top quality, and just trying a few of the visualizations made possible by D3 proves that time spent wrestling with the library will be well rewarded.

D3 harnesses what’s available in HTML5 and the DOM, and it couples that with a keen understanding of JavaScript’s capabilities. It enables the eloquent manipulation of standard document objects to generate data visualizations. Oddly, D3 has almost no specifically graphical side — it doesn’t even know how to draw circles (it employs the circle-drawing capabilities already in HTML5). D3’s real power is in its ability to transform a document (as in the DOM) based on data — Data-Driven Documents.

InfoVis

The JavaScript InfoVis Toolkit, or InfoVis for short, is the creation of Nicolas Garcia Belmonte. Although the toolkit is now owned by Sencha, it retains an open source (BSD) license.

InfoVis is primarily a charting library that makes heavy use of JSON. Data that is passed to InfoVis’s charting functions does so in the form of JSON objects. Also, when a chart is initialized (that is, the chart object, such as an area chart, is created) the chart’s parameters are specified as elements in a JSON object that’s passed to the initialization function. In effect, the JSON objects serve as named parameters to InfoVis’s function calls.

InfoVis’s stable of graphs include area, bar, and pie charts; tree maps; space and hyper trees; sunbursts; radial graphs; and force-directed graphs. You can also form visualizations that are compositions of multiple graph types (one of the demonstrations shows a mixture of pie charts and tree graphs). Most charts have configurable display options unique to the chart type. For example, a tree chart can be aligned left, center, or right in its display field.

InfoVis also provides a set of core utility functions, many of which are more or less duplicates of similar functions available in popular JavaScript libraries such as jQuery, Prototype, and MooTools. For example, InfoVis provides the each() function, which iterates over an array, repeatedly applying a function — useful for wholesale modifications of the results of a selection, like changing the text color of all instances of a specific <div> class.

Every chart type object has an associated updateJSON() method, which is how you update the chart’s data. Transitions — how a chart morphs from one set of data to another — are built into InfoVis’s visual objects. However, the library defines a set of controller methods you can invoke to set callback functions. These callbacks are executed at various stages in the animations that a chart will exhibit either through transition or user interaction. For example, you can define a callback function that’s called just prior to a node’s being drawn, causing perhaps the node’s shape to change just before the node object is plotted.

Similarly, you can embed functions in the chart’s initializing JSON object. For example, you can specify an onShow event handler, which will be triggered when the user hovers over an element. By passing the function a reference to the specific node, you can extract the data associated with the node and display a pop-up table of that data.

The API documentation is clearly arranged. The author has organized the Web page into a navigation pane on the left and content on the right. Entries are grouped by category — Core, Loader, Visualizations, and more — and heavily hyperlinked for easy browsing. But the best place to start with InfoVis is the demos Web page. All demonstrations are interactive, and the author has even provided trimmed, annotated code to explain important aspects of the specific demonstration.

InfoVis is a more approachable toolkit than D3. Initial development amounts to choosing a chart type and passing it some data in JSON — and there you are. As you become more familiar with the package, its configurable options let you tweak display and animation to produce customized effects.

Processing.js

Processing.js is a bit different from the other packages in a couple of ways. First, Processing.js is a JavaScript port of the Processing visualization language. The Processing language was originally developed at MIT, and its documentation describes it as “a simplified Java, with a simplified API for drawing and graphics.”

Second, while Processing.js can be used to draw graphs and charts, it’s also a respectable, general-purpose graphics and animation package. Processing (and therefore, Processing.js) goes beyond data visualization, providing both 2D and 3D graphics commands, and permitting the creation of animations, interactive digital artwork, and even video games. On the Processing.js Exhibition page, you’ll find links to animations of sea creatures, asteroids-like video games, sketch applications, and more.

Processing.js renders its images using HTML5’s canvas element. In a sense, Processing.js extends the capabilities of HTML5’s canvas, which Processing.js’s creators considered to be too low-level for developers to use efficiently. Working with Processing.js typically involves writing your code in the Processing language, and having Processing.js translate your code into JavaScript for execution. The translation actually occurs on the fly.

To develop Process.js applications, you’ll want to download and use the Processing IDE. (Versions are available for Windows, Linux, and Mac.) The IDE is basically an editor with Run and Stop buttons to display your Processing application in a pop-up window. The IDE also lets you export your application into a stand-alone executable. Best of all, if you’re new to Processing, the download includes the source code for numerous example applications.

In addition to the IDE, the Processing.js website also provides the Processing.js Helper page. Paste your Processing code into the page’s text box, then click Run to see how it will appear when executing on a Web page. The Helper page also provides a converter that will translate Processing code into the equivalent Processing.js JavaScript code.

Acceding to user requests, the developers of Processing.js have surfaced the API of the Processing.js engine that performs the graphical operations in a Processing.js application. That means you can skip the step of having to write your application in Processing and translating it into JavaScript. Instead, you can call the graphics engine directly from your JavaScript code. Tutorials on the Processing.js website demonstrate how to pass data back and forth between Processing instances (objects that execute in the Processing engine) and JavaScript functions running outside of the engine.

The Processing.js website provides links to copious documentation. Plus, links will guide you to more documentation for Processing itself. Best of all, there are plenty of demo applications (I counted more than 90). All include a live executable window of the visualization, as well as the source, and many provide explanations of the specific feature illustrated by the example.

Processing.js is unable to cut itself entirely free from its Java roots. It still feels like Java. Nevertheless, because Processing.js is JavaScript and because you can call the library’s API from any piece of JavaScript code, the result is that a Processing.js application has full access to all the DOM elements. In addition, nothing hinders you from mixing Processing.js and any other JavaScript library.

Recline.js

Recline.js is billed as a “simple but powerful library for building data applications in pure JavaScript and HTML.” It is primarily the work of Dr. Rufus Pollock (with his colleagues at the Open Knowledge Foundation) and Max Ogden.

Recline.js’s internals can be partitioned into three areas: models, back ends, and views. Model components — Datasets, Records, and Fields — impose structure on data;, a Dataset is a container that holds Record objects. In turn, Record objects hold Field objects, which represent the constituent data. A Field possesses a label, format specification, a flag to indicate whether the Field is calculated, and data type. Recline.js defines 13 data types, ranging from simple (string, integer, float) to complex (geo_point and geoson). A Field can also hold a collection or even an arbitrarily complex JSON object.

Recline.js’s Backend object furnishes the connection between a Dataset object and a data source. Put simply, you use a Backend object to “fill” a Dataset with records. Currently, Recline.js comes with eight back ends, including CSV files, ElasticSearch, CouchDB, Google Doc spreadsheets, and others. Recline.js even has a “memory” back end, which allows you to push data into Recline.js directly (hard-coded into your application).

Of course, Recline.js wouldn’t be a data visualization library if it couldn’t visualize data — and that’s where its Views come in. Recline.js supports two sorts of views: Dataset and Widget. I use the word “support” because Recline.js doesn’t provide View objects so much as it integrates with view objects from other frameworks. In fact, the documentation notes that “Recline.js views are instances of Backbone views.”

As its name implies, a Dataset view displays a Dataset object. For example, a Grid view is really a table view displaying rows with column headings. Examples of Dataset views on the Recline.js website show bar charts, line charts, timelines, and even geo-data displayed on maps.

A Widget view lets you build what other frameworks might simply call a widget. Widget views either display or control some aspect of a set of data. A Widget view would also be used to display or modify an application’s generic data. The example given for a Widget view in the Recline.js documentation is QueryEditor, a control that lets you view and modify the current query state of a Dataset.

Recline.js’s documentation consists of an overview page, which points you to more detailed explanations of Recline.js mechanics. The explanations are helpfully interleaved with code snippets. Although what’s currently available is good, the documentation appears to be a work in progress. For example, though Widget Views are described briefly, the only real explanation you’ll find is inside the source’s documentation. Finally, a comprehensive glossary would be useful. I often encountered a term that I’m sure someone familiar with Recline.js understood immediately, but was mysterious to me.

Recline.js takes an almost relational view of the world. Its Dataset, Record, and Field components are entities that you would imagine finding in a relational database library.

Recline.js makes no bones about its being built on (and therefore requiring) other JavaScript frameworks. Specifically, Recline.js makes heavy use of Backbone.js — a JavaScript framework that supplies entities that let you build MVP (model-view-presenter) applications. In turn, Backbone.js uses the utility JavaScript library Underscore.js.

Recline.js also enhances its back-end code with jQuery, as well as view code with libraries, including Leaflet, TimelineJS, and others. Recline.js is a marvelous example of incremental technology and code reuse. It stands on the shoulders of several powerful JavaScript libraries, inheriting and extending their capabilities.

Where HTML5 meets big data

If you need straightforward charts, manipulated in a straightforward fashion, then you should be pleased with InfoVis. Just package your data into JSON and feed it to the right chart object — you have your graph. On the other hand, if you’re looking for a library that will take you beyond data visualization — that can produce abstract graphic designs or even pure animations — then look no further than Processing.js.

If, however, you’re more interested in your data than in its visualization — that is, if your main objective is to explore your data rather than create animated and interactive charts and diagrams with it, and you only need a handful of basic, solid graph types — then consider Recline.js. It provides tools for getting your data into its library from numerous sources, and it provides routines for querying and analyzing the data once it’s there.

But for sheer panache, D3 is tough to beat. The variety and beauty of the graphics exhibited on the D3 website is simply dazzling. And because D3 uses existing DOM objects and Web browser infrastructure to work its magic, if you’re already comfortable with JavaScript (particularly if you use jQuery extensively), then you’ll probably pick D3 up quite quickly. Even if you’re not a JavaScript pro, the sheer volume of available examples means that you can probably cut and paste together what you need.

This article, “Review: 4 supercool JavaScript tools for data visualization,” was originally published at InfoWorld.com. Follow the latest news in software development, JavaScript, and HTML at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.