The JavaScript blog.


graphics visualization jvm dependency

Arbor, Mug, I, Ristretto

Posted on .


Arbor (GitHub: samizdatco / arbor) by Christian Swinehart is a
graph visualisation library that uses jQuery and web workers. It
provides a layout algorithm and graph organisation for building things
like this: Atlas demo.

Arbor has a particle system which manages the state of the simulation:

sys = arbor.ParticleSystem();
node = sys.addNode('mynode', { mass:2, myColor:'goldenrod' });

Arbor's API seems pretty easy to learn, so if you'd like to present data in a novel way or create some kind of
simulation it's worth checking out.


Mug (GitHub: timcameronryan / mug) by Tim Cameron Ryan is a JavaScript compiler for the JVM. The benefits
according to the author are:

  • Mug is faster than Rhino, favoring static compilation rather than a runtime interpreter.
  • Minimal overhead. Standard library mug-js.jar is ~150kb.
  • Mug's goal is that compiled code be as similar to Java as possible, and easily debuggable.
  • Mug uses CommonJS modules as its compilation units, allowing your code to be shared between Mug, node.js, RingoJS, and other implementations.

He also says the Mug compiler is written in Clojure, a language which I
enjoy getting time to use. Take a look at
compiler.clj if you're interested in what that might look like.


Michael Donohoe at the New York Times has released their open source
Emphasis library (GitHub: NYTimes /
). This library makes it
possible to "deep link" to specific article text -- double tapping the
shift key displays paragraph icons which can be clicked to highlight a
paragraph. Selecting a paragraph or a sentence within it updates the URL
hash with parameters that can be used to share the highlight.

This library requires Prototype. To see more open source code from New
York Times, take a look at the New York Times GitHub


I by Rob Robbins is a dependency manager with defer and async support. The name leads to some memorable
API method names: I.amDefined, I.require, etc.

The library comes with some Ruby tools to read source and generate
dependency files.


Ristretto by Adrien Friggeri is another dependency management tool with concatenation which can be
installed with npm. It can be used with JavaScript or Coffee. What made
this interesting to me is it allows developers to use CommonJS modules
and then write out a browser-friendly file.

If you've been following our Let's Make a Framework Series you'll know
I made a simplified CommonJS module-based testing system, but getting
modules to behave in a browser was tricky to say the least. Adding
support for CommonJS modules to Ristretto seems like a smart move.


graphics visualization data


Posted on .

Unveil by Michael Aufreiter is a data-driven visualization toolkit. In some ways it's similar to
InfoVis, but the data-driven design gives it a slightly different feel. The
documentation gives some examples of this through the collection API:

var countries = new Collection({
  "properties": "properties": {
    "name": {
      "name": "Country Name",
      "type": "string",
      "unique": true
    "official_language": {
      "name": "Official language",
      "type": "string",
      "unique": true
    // ...
  "items": {
    "arg": {
      "name": "Argentina",
      "official_language": "Spanish Language",
    // ...

The properties and items properties define a
Collection. These can be searched, sorted, and transformed:

var english = countries.all('item').select(function(key, i) {
 return i.value('official_language') === 'English'; 

The visualization API can then be used to render all kinds of graphs,
complete with animation:

This is a fairly new project, so I expect there should be a lot of
activity in the repository. The APIs have a pragmatic approach, but some
of the underlying JavaScript is a little bit... Ruby style?
Object is extended and global functions are used, rather
than keeping everything within a closure.


graphics visualization data

InfoVis Toolkit 2.0

Posted on .

Version 2.0 of the JavaScript InfoVis Toolkit
(License) has been released. InfoVis, by Nicolas Garcia Belmonte, ships with a wide range
of interesting data visualisation types, and can be used to create
customised visualisations or generic graphs. For examples, see the
extensive demos page.

Everything sits under \$jit, so the library should be easy
to slot into existing projects. To read more about the API, browse the
API documentation.

Version 2.0 adds:

  • New visualisations (AreaChart, BarChart, PieChart, Sunburst, Force-Directed)
  • Mobile support
  • An events system
  • Panning and zooming
  • Animation improvements
  • Cleaner API (the major change is the use of the global object, \$jit)

Read more in detail here: The JavaScript InfoVis Toolkit 2.0 is


libraries graphics visualization

JavaScript InfoVis Toolkit

Posted on .

The JavaScript InfoVis Toolkit provides a rich set of tools for creating interactive browser-based visualisations. The
project's site includes API documentation and tutorials.

The visualisations are based around a cross-browser canvas
. Each canvas
appears inside a block level element:

And is defined like this:

var canvas = new Canvas('mycanvas', {  
    'width': 900,  
    'styles': {  
    'fillStyle': '#ccddee',  
    'strokeStyle': '#772277'  

The visualisations are driven with a JSON
and use CSS for
styling. Check out the RGraph
to see how this comes

Although the APIs are extensible an interesting set has been provided,
so it's possible to create impressive results quickly. Data
representations include:

  • Treemaps
  • Radial layouts
  • HyperTrees
  • SpaceTrees
  • Charts, including pie and bar

There are demos on the site complete with