DailyJS

JavaScript InfoVis Toolkit

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries graphics visualization

JavaScript InfoVis Toolkit

Posted by Alex R. Young on .
Featured

libraries graphics visualization

JavaScript InfoVis Toolkit

Posted by Alex R. Young 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
widget
. Each canvas
appears inside a block level element:

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.