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 6 of 11

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.

InfoVis displays a sunburst diagram of a directory tree. Hovering over a slice produces a pop-up with information about the directory or file.
| 1 2 3 4 5 6 7 8 9 10 11 Page 6
From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies