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

Page 9 of 11


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.

The Recline.js Data Explorer lets you import data into a Recline.js grid Dataset. You can select fields from the grid for display in various chart types. Here, weight data from Allen Downy’s book "Think Stats" is shown plotted in a bar chart.
| 1 2 3 4 5 6 7 8 9 10 11 Page 9