Overfloater

Today I’d like to announce the addition of three new components in the next version of the JavaScript InfoVis Toolkit: Area Charts, Bar Charts and Pie Charts. I hope these components will be widely used among the JIT user community.

All components support a simpler JSON format that I’ll describe later in this post. These components are easy-to-use, yet very powerful: they support live data updates and multi valued data as we will see next.

Area Charts

The Area Chart is a useful component to track the evolution of a bunch of categories at the same time. In addition, the aggregation of the values of all these categories is also presented in a meaningful way. This component supports live updates (as you’ll see in the first seconds of the video), filtering/restoring categories, tooltips and a legend. As usual this is all JavaScript:

The visualization is instanciated this way:

var areaChart = new $jit.AreaChart({
    //id of the container
    injectInto: 'infovis',
    //set animations
    animate: true,
    //visualization 'padding'
    offset: 5,
    //labels 'margin'
    labelOffset:10,
    //show aggregated values
    showAggregates:true,
    //show labels
    showLabels:true,
    //use gradients for rendering
    type:'stacked:gradient',
    //label styling
    Label: {
      size: 13,
      family: 'Arial',
      color: 'white'
    },
    //enable tips
    Tips: {
      enable: true,
      onShow: function(tip, elem) {
         tip.innerHTML = "" + elem.name + ": " + elem.value;
      }
    },
    //add leftclick handler
    filterOnClick: true,
    //add rightclick handler
    restoreOnRightClick:true
});

Additionally this visualization allows programmatic category filtering, JSON updating, selecting you own colors, etc.

Bar Charts

Bar Charts are similar to Area Charts, but they support additional styling and positioning. You can use vertical or horizontal Bar Charts. Here’s an example:

This object is created the same way you create an AreaChart:

var barChart = new $jit.BarChart({
    injectInto: 'infovis',
    animate: true,
    //set orientation vertical or horizontal
    orientation: 'horizontal',
    //bar separation
    barsOffset: 20,
    offset:10,
    labelOffset:5,
    type:'stacked:gradient',
    showAggregates:true,
    showLabels:true,
    Label: {
      size: 13,
      family: 'Arial',
      color: 'white'
    },
    Tips: {
      'enable': true,
      'onShow': function(tip, elem) {
         tip.innerHTML = "" + elem.name + ": " + elem.value;
      }
    }
});

Pie Charts / Rose Diagrams

Finally there’s the Pie Chart. But this is no regular Pie Chart. It can support simple data as well as more complex data. You can add multiple categories to this Pie Chart, combining them into something more like a Stacked Rose Diagram. They also support live updates as you’ll see in the first seconds of the video:

JSON Data Format

The JSON data format for these visualizations had to depict something like a contingency table, and so I decided to adopt something like this:

var json = {
    //category labels
    'label': ['label A', 'label B', 'label C', 'label D'],
    //each "stack" is described here
    'values': [
    {
      'label': 'date A',
      'values': [20, 40, 15, 5]
    },
    {
      'label': 'date B',
      'values': [30, 10, 45, 10]
    },
    {
      'label': 'date E',
      'values': [38, 20, 35, 17]
    },
    {
      'label': 'date F',
      'values': [58, 10, 35, 32]
    },
    {
      'label': 'date D',
      'values': [55, 60, 34, 38]
    },
    {
      'label': 'date C',
      'values': [26, 40, 25, 40]
    }]
};

I hope you find these visualizations useful, and if you can’t wait for the next version to come out to use these charts you can always build the project from GitHub. Here’s a wiki with some instructions on how to make your own build of the library while you’re waiting for an official release. If you ever find bugs please use the issue tracker at GitHub. If you need help or have any questions you can always go to the Google Group. Well, this got long enough.

Hope you enjoyed it!