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

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.

This interactive display of winners of AFL/VFL (Australian Football) from 1897 to 2010 was created with Processing.js by Fink Labs. Each year is a concentric circle. Move the mouse to display the year and the team.
| 1 2 3 4 5 6 7 8 9 10 11 Page 8