protovis magical properties

Question

I am pretty new to protovis. I was trying to understand the example in http://mbostock.github.com/protovis/docs/panel.html I can understand left(function() this.index * 10)is actually left(function(){return this.index * 10;}) and when the function is called a scope is passed to it thats this well and fine till now. BUt data(function(array) array) doesn't takes the array from this. rather its passed to it. from where this array is passed ? I cannot understand the flow of the chain.

Answer 1

This is one of the many parts of Protovis that's a bit confusing at first. When you add data to a mark, e.g.:

var mark = new pv.Panel()
    .data([1,2,3]);

the mark will be duplicated once for each item in the data array, and passed the corresponding item as the first argument to its functions, e.g.:

new pv.Panel()
    .data([1,2,3])
    .title(function(d) { // <-- d is 1, 2, or 3
        return d;
    });

Any child mark you attach to mark will also receive this data point, which can then be used by the child mark as the input argument for its functions, e.g.:

new pv.Panel()
    .data([1,2,3])
  .add(pv.Label)
    .text(function(d) { // <-- d is 1, 2, or 3
        return d;
    });

But child marks can also define their own data(), which will duplicate that mark accordingly. A child mark's data can be totally independent, e.g.:

new pv.Panel()
    .data([1,2,3])
  .add(pv.Label)
    .data([3,4,5])
    .text(function(d) { // <-- d is 3, 4, or 5
        return d;
    });

But often, as in the example you link to, the parent will have a 2- or 3-d array as its data, and the child will base its data() on the sub-array it's passed:

new pv.Panel()
    .data([[1,2,3], [3,4,5]])
  .add(pv.Label)
    .data(function(d) { // <-- d is [1,2,3] or [3,4,5]
        return d;
    })
    .text(function(d) { // <-- d is either 1, 2, or 3, 
                        // OR 3, 4, or 5
        return d;
    });