Overfloater

After many bug fixes, some tweaks to the documentation and new features the JavaScript InfoVis Toolkit 2.0.0 beta is ready!
Most of the bug fixes were on the TreeMap visualization, the generic graph morph operation, the Events system and the AreaChart visualization. If you’d like to see the commits in more detail you can take a look here.
Some API enhancements include the ability to add edge events. This is still kind of an experimental feature, but if you’d like to know more about this you can read the Options.Events documentation.
The main reason to tag this as a beta release is that besides some known issues this version has proved to be pretty stable. This version is currently being used at Exalead for customer projects and proved to be reliable. Google and Mozilla are also using the toolkit, which is great news.

Builder

With this beta release I’m also releasing a custom toolkit builder. The custom builder enables you to make your own build by choosing the visualizations you need and keeping out the code of the visualizations you don’t need. As more visualizations get added to the toolkit this will be a key component to optimize your web page loading. Currently the builder is on an experimental phase, but I strongly recommend you to check it out, custom builds can make a strong optimization difference.

While browsing the internet I got to the Guardian’s Datablog, a blog that gathers interesting information and datasets to explore and make visualizations. Latest post was about Every Doctor Who villain since 1963. There’s information about each villain’s first and last year of appearance, their motivation/evil plan, the name of the actors who played the role of Doctor Who while that villain was making an appearance, the title of the stories where that villain was in, etc.

I created a “dynamic” TreeMap visualization with that data. Here’s a short screencast I made explaining the TreeMap functionalities (I have a horrible english accent… I know). You can also play with the demo here.

The Code

For this example I used a special build of the Toolkit which is currently hosted at GitHub. The TreeMap example code looks just like the TreeMap demos code but I also added an onBeforeCompute callback that checks for the Doctor Actor Name and Villain Motivation filters to fade nodes respectively:

onBeforeCompute: function() {
  tm.graph.eachNode(function(n) {
    var prev = false;
    if(n.data.motivations) {
      prev = true;
      if(motivation != 'All'
        && n.data.motivations.indexOf(motivation) == -1) {
        n.setData('alpha', 0, 'end');
        n.ignore = true;
      } else {
        n.setData('alpha', 1, 'end');
        delete n.ignore;
      }
    }
    if(n.data.doctorActorNames) {
      if(doctorName != 'All'
        && n.data.doctorActorNames.indexOf(doctorName) == -1) {
        n.setData('alpha', 0, 'end');
        n.ignore = true;
      } else if(!prev) {
        n.setData('alpha', 1, 'end');
        delete n.ignore;
      }
    }
  });
},

The anchor click callbacks set the current selected value to the doctorName and motivation variables and also perform an animation by fading nodes and repositioning the remaining visible nodes:

anchors.addEvent('click', function(e) {
  doctorName = this.innerHTML;
  tm.compute('end');
  tm.fx.animate({
    modes: {
      position: 'linear',
      'node-property': ['alpha', 'width', 'height']
    },
    duration: 1000,
    fps: 50,
    transition: $jit.Trans.Quart.easeInOut
  });
});

The tm.compute(‘end’); call will trigger the onBeforeCompute callback that will set correct alpha values for the nodes. Then we perform an animation of node positions and node alpha, width and height properties.

I hope you have fun with the demo!

Update: The presentation page is here.

Just a quick post to tell you that I’ve been selected to speak at JSConf.eu 2010 in Berlin in September. JSConf.eu is the most important JavaScript conference held in Europe. Last year speakers included John Resig, Douglas Crockford and 280 north people among others. I’m very excited about this event and I can’t wait to meet everyone there!

More updates will come in the next few days. You can also follow feeds from the main page event or follow them on twitter. Oh, I have a twitter account, too

After more than a year of hard work I’m proud to announce the release of the JavaScript InfoVis Toolkit 2.0!

What’s the JavaScript InfoVis Toolkit?

The JavaScript InfoVis Toolkit provides web standard based tools to create interactive data visualizations for the Web.

What’s new in this version?

This version introduces radical new features, an API redesign and new visualizations. If you don’t want to read the whole article and just want to play with the examples you can go to the demos page.

New Visualizations

With this version of the Toolkit the number of available visualizations has doubled. Some of the new visualizations are the AreaChart, BarChart and PieChart, which were described in more detail in this article. I’ve also added Sunburst and Force-Directed visualizations. I wrote about these visualizations before here and here. I also want to thank Pablo Flouret, who contributed most of the code for the Icicle visualization, also a new addition to the toolkit.

You can play now with these visualizations at the demos page!

Features common to all visualizations

I’ve also enhanced all visualizations with new configuration options that enable new features. These features are:

• Panning and zooming across all visualizations.
• A new event system that enables you to attach events to DOM elements or to native canvas nodes and also add support for touch events, drag and drop, etc.
• Complex animations have the ability to animate any style property of a node, edge or label. There is also support for animating canvas specific properties like shadowBlur, shadowColor, fillStyle, etc.

A new TreeMap visualization

The underlying rendering functions in the TreeMap visualization have changed. While in prior versions of the Toolkit the TreeMap was DOM-based, this new version renders the TreeMap entirely in Canvas. This enables you to add custom nodes of any shape or nature you like (can be images, circles, polygons) and also to take advantage of the new animation engine of the toolkit to add smooth transitions for the drill-down. These new things can be tested at the TreeMap section in the demos page.

API Redesign

The old API was too low level. Before creating any visualization you had to manually create a Canvas widget and pass it as parameter to the visualization class. Also, many other parameters like width and height of the canvas were required. For Background canvases the API had a couple of flaws, and it wasn’t clear how to use it either. Many of these things have been solved with the new API design. The Canvas class became an inner class implicitly created when making a new visualization. Width and height of the canvas are set to the container’s offsetWidth and offsetHeight if they’re not provided, and background canvases are easier to attach to the visualization.
Most of all, there is now a single global object in the library: $jit. This declares the namespace for the library and makes sure you won’t have conflicts with any other JavaScript library.

A new Website

Last but not least, I worked on a website redesign, taking advantage of the new HTML5/CSS3 features supported by major browsers. There’s also a detailed documentation page to get you started.

It’s alpha

Finally I’d like to say that this is an alpha version. There are lots of known bugs and I’m counting on you to report bugs, send fixes, and collaborate in any aspect of the toolkit.

Thanks

To Pablo Flouret for contributing code to the toolkit, and to my wife, Luz Caballero for making me happy.

Now go get the Toolkit!

We’re not that far. Not at all. I was actually going to write some completion percentage, but I think I’ll just leave that as a mystery and surprise you when the time comes. But until then… some videos from the 2.0 world!

Animated TreeMaps

In order to show some of the new features I’ve been writing a simple example with TreeMap animations. TreeMap animations are integrated into the built-in classes of the Toolkit, but you can also create your own animations by altering either built-in Node/Edge params, or also canvas specific styles like shadows.

Here’s a short video of an Animated TreeMap, it also has animations when switching layouts. I think it’s better seen in fullscreen.

Zooming and Panning

The new Event system allows many customizations, such as Dragging and Dropping nodes, (right)clicking native Canvas nodes, etc. This will be the subject of a longer post, since there is a lot of machinery involving Native Canvas, SVG and HTML events, event delegation, etc. I’ve also been working in making a modular Canvas class enabling canvas background extensions.

Some of these changes had some desirable effects, such as enabling Panning and Zooming in a generic way, across all visualizations, as can be seen in this video:

A Force Directed Example

These features can be combined into useful and interesting examples. This Force Directed example uses the new Event system, zooming, panning and animations to make a complete graph editing tool. These are some of the graph interactions that can be made with the JavaScript InfoVis Toolkit (also better seen in fullscreen):

I hope you liked it. I know I’m having a great time working in this project.

I’ll be back with more updates.

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!

I had the chance to play with the JavaScript InfoVis Toolkit lately. It’s nice to be able to use the Toolkit instead of developing it. The main reason I built the Toolkit in the first place was to create specific visualizations I was needing for MusicTrails. At the end I got to code lots of features but didn’t have the chance to play with them for a long time.

I hope these examples can demonstrate that the Toolkit was really built upon the concepts of Modularity, Extensibility and Composability.

Stacked Bar Charts

One of the things I wanted to do for some time now was to adapt the Spacetree visualization to show Bar Charts.
By watching this example we can already tell that the Spacetree can be used to represent something similar to a Bar Chart. For the next example I created a BarChart class that uses a Spacetree with some special node rendering function to plot bars for each node:

What’s also interesting about this widget is that the custom node implementation I made allows it to show stacked values:

Stacked Bar Charts are useful when aggregated results are as meaninful information as knowing the specific value of each analyzed element. The JQuery team used these kind of charts for measuring performance in different browsers for different versions of JQuery. As you can a see in the next picture, the overall performance comparison is as useful as the specific browser performance improvements data.

Implementation
In order to make Stacked Bar Charts I stored multivalued information into the nodes’ data property and then accessed it to render each node like this:

//Here we implement custom node rendering types for the ST
ST.Plot.NodeTypes.implement({
  'stacked': function(node, canvas) {
    var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
    var cond = nconfig.overridable && data;
    var width  = cond && data.$width || nconfig.width;
    var height = cond && data.$height || nconfig.height;
    var algnPos = this.getAlignedPos(pos, width, height);
    var valueArray = data.valueArray;

    var ctx = canvas.getCtx();
    ctx.save();
    if(valueArray) {
     for(var i=0, l=valueArray.length, acum=0; i<l; i++) {
      var rgb = valueArray[i].color.hexToRgb(true);
      var rgbdark = rgb.map(function(e) { return (e * .3) >> 0; });

      var lgradient = ctx.createLinearGradient(algnPos.x, algnPos.y + acum,
        algnPos.x + width -1, algnPos.y + acum + (valueArray[i].hvalue || 0));

      lgradient.addColorStop(0, rgb.rgbToHex());
      lgradient.addColorStop(0.5, rgb.rgbToHex());
      lgradient.addColorStop(1, rgbdark.rgbToHex());

      ctx.fillStyle = lgradient;
      ctx.fillRect(algnPos.x, algnPos.y + acum, width, valueArray[i].hvalue || 0);
    }
    ctx.restore();
  }
});

That code also uses linear gradients to render nice gradients for each stacked bar.

Pie Charts + TreeMaps = Awesome TreeMaps

When lots of elements need to be compared the Stacked Bar Chart visualization can be confusing. This is due to the fact that each bar gets thinner and the aspect ratio for each bar tends to be very high. I wrote about the aspect ratio problem some time ago, and I also showed that it could be solved by using Squarified TreeMaps to show hierarchical structures in constrained space.
This is OK for replacing Bar Charts, but what about Stacked Bar Charts? Should we subdivide each TreeMap cell into the number of stacked elements? I didn’t find that solution very appealing: for each TreeMap node its subnodes would have the same color, same name, but different values. It seems like redundant information.
Instead, I opted to create Pie Charts inside each TreeMap node. Pie Charts are useful to compare values where the whole information also has a meaning.

Here’s an example I did with the same data collected from the second Stacked Bar Chart image (click on the image to enlarge):

Each TreeMap cell is proportional to the amount of aggregate information for each element. The Pie Chart compares the specific information of each element.
While the previous example isn’t too useful, this next example collects more data and thus makes this visualization more suitable (also click to enlarge):

Implementation
By taking a look at this example we can see that we can make Pie Charts by using RGraphs and adding a special node rendering function. We also know that we can make Squarified TreeMaps by looking at this example.

So how can we combine these two visualizations?

The TreeMap visualization accepts a controller method that is triggered on element creation. This means that for each created treemap node a callback is used that can post-process each TreeMap node. This method is called onCreateElement and I use it to append a pie chart for each TreeMap element like this:

onCreateElement: function(content, node, isLeaf, leaf) {
  if(isLeaf && node.data.valueArray) {
    var w = leaf.offsetWidth, h = leaf.offsetHeight;
    //create a canvas with unique id
    //and append it to the leaf TreeMap element
    var c = new Canvas("piechartcanvas_" + TMPieWidget.count++, {
      injectInto: leaf,
      width: w,
      height: h - 2*tm.config.titleHeight
    });
    //create a RGraph with nodepie node rendering
    //function
    var rg = new RGraph(c, {
        Node: {
            'overridable': true,
             'type': 'nodepie'
        },
        Edge: {
            'overridable': true
        },
        //Parent-children distance
        levelDistance: ((w > h? h : w) / 2) - 2*tm.config.titleHeight,  

        //Add styles to node labels on label creation
        onCreateLabel: function(domElement, node){
            domElement.innerHTML = '';//node.name;
            if(node.data.$aw)
                domElement.innerHTML += " " + node.data.$aw;
            var style = domElement.style;
            style.fontSize = "0.8em";
            style.color = "#fff";
        },
        //Add some offset to the labels when placed.
        onPlaceLabel: function(domElement, node){
            var r = rg.graph.getNode(rg.root);
            var style = domElement.style;
            var dw = domElement.offsetWidth;
            if(r.data.count == 1) {
              var dh = domElement.offsetHeight;
              style.left = (w/2 - dw / 2) + 'px';
              style.top = (h/2 - dh) + 'px';
            } else {
              var left = parseInt(style.left);
              style.left = (left - dw / 2) + 'px';
            }
        }
    });
    rg.loadJSON(that.createJSONPie(node));
    rg.refresh();
  }
}

And that’s it!

I hope these customizations inspired you enough to create your own wacky visualizations with the JavaScript InfoVis Toolkit. I honestly encourage all Toolkit users to try to extend the library with new crazy ideas and features; most of the library design was targeted at that!

PS: Some people posted a job offer at the JavaScript InfoVis Toolkit Google Group that you might find useful. To check or post about job offerings related to visualization or the JavaScript InfoVis Toolkit please join the group!

As you may have seen I’m back from vacations and trying to organize a little bit the code for the next version of the JavaScript InfoVis Toolkit, which is not there yet; although I did push the new visualizations over to GitHub so you can play with them

I also created a new project at GitHub that’s called DOMTreeMap. DOMTreeMap is a robust, library agnostic, JavaScript/HTML/CSS TreeMap library that allows you to easily create Squarified, Strip and SliceAndDice TreeMap layouts by using JSON input data. The only global object created by this library is TM and it consists on four main sub-objects/classes:

• TM.Util contains useful JSON Tree manipulation methods.
• TM.Squarified creates Squarified TreeMap tilings.
• TM.Strip creates Strip like tilings.
• TM.SliceAndDice creates Slice and Dice TreeMap tilings.

Each tiling algorithm has its pros and cons. The main criteria for determining if a tiling algorithm is good is to check for the aspect ratio of nodes, check if the result is ordered or not and check for stability (i.e whether the nodes maintain their relative positions when the TreeMap is being navigated).

Here’s a picture describing these points for the Strip, Squarified and SliceAndDice tiling algorithms:

As you may have noticed, DOMTreeMap is a standalone version of the JIT TreeMap component.

So why do this, then?

Well, I decided that for the next version of the library TreeMaps are going to be Canvas based. I’m already adapting the TreeMap tiling algorithms to render on Canvas and also plugging the rest of the TreeMap visualizations to an abstract Graph class that is also used by all other visualizations so I can use a lot of library code related to Tree Operations, Tree Animations, etc.
Also, not all TreeMap visualizations render nodes as rectangles. Some TreeMap implementations are based on Voronoi Tessellations for example:

So in order to maintain a more “abstract” notion of TreeMaps I think that having Canvas based TreeMaps would be a good idea. Anyway, now I’m working on adapting the code to be able to render TreeMaps on canvas, I must say that performance-wise things are looking promising:

You are welcome to participate on the DOMTreeMap project which will grow as a standalone solution for drawing TreeMaps solely based on HTML, CSS and JavaScript.

Don’t forget that if you want to know more about this project or the JavaScript InfoVis Toolkit you can follow me on Twitter or GitHub!

Just a quick post to thank everybody at the Informatics Research Laboratory for inviting me to the Parisian Seminar on InfoVis and HCI. I hope you liked my presentation . Here are the slides if anyone’s interested:

I also did a presentation of the JavaScript InfoVis Toolkit at work last friday, slides here:

This was much fun and I hope to be able to do it again sometime ,

Cheers!

Just a quick post to say that currently the Google Group for the JavaScript InfoVis Toolkit has more than 1000 messages!

The JavaScript InfoVis Toolkit Google Group is the main entry point for library related discussions.

Currently the Group has 265 members and more than 1000 messages.

About Searching the Google Group

Sometimes searching via Google Web can lead to more pertinent results than searching in the Group. So if searching for “hypertree labels” in the group doesn’t give you pertinent results you can always try:

Hypertree labels site:http://groups.google.com/group/javascript-information-visualization-toolkit

via Google Web.

I Wish…

…people would tell me about the projects they do with the JIT, either at the google group, or by mail. I’m very curious about the true potential of this library, and I’d like to know more about where and how it’s used. It’s disappointing to learn about JIT projects by chance.