Sunday, August 21, 2011

Tool: Javascript InfoVis Toolkit

The Javascript InfoVis Toolkit is a free and open source javascript library that is able to create many different forms of web visualizations. It features over 10 different visualization types and can be easily integrated into existing sites. By heavily relying on HTML 5 it depends on the user using a modern browser.

Some examples:

Bar Chart:
Starburst Graph:
Browsable Tree:

Usage Example:

The following shows a simple pie chart being created in javascript within the "infovis" container:

var pieChart = new $jit.PieChart({
injectInto: 'infovis',
animate: true,
offset: 30,
sliceOffset: 0,
labelOffset: 20,
type: useGradients? 'stacked:gradient' : 'stacked',
resizeLabels: 7,
Label: {
type: labelType, //Native or HTML
size: 20,
family: 'Arial',
color: 'white'
Tips: {
enable: true,
onShow: function(tip, elem) {
tip.innerHTML = "" + + ": " + elem.value;

This library is written by Nicolas Garcia Belmonte, has been developed for the past two years, and is still fairly well maintained. Its home page is located at which provides many well described examples and extensive api documentation.