JavaScript InfoVis Toolkit

12 Dec 2009 | By Alex Young | Tags libraries visualization graphics

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 widget. Each canvas appears inside a block level element:

<div id="infovis"></div>

And is defined like this:

var canvas = new Canvas('mycanvas', {  
   'injectInto':'infovis',  
    'width': 900,  
    'height':500,  
    'styles': {  
    'fillStyle': '#ccddee',  
    'strokeStyle': '#772277'  
    }  
});

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

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 animations.


blog comments powered by Disqus