Simple Treemap

var jsondata = {
    row1 : {
      data1 : 10,
      data2 : 10,
    },
    row2 : {
      data3 : 20,
      data4 : 40,
    } 
};

var pvdom = pv.dom(jsondata);

//recursive functions
function title(d) {
  return d.parentNode ? (title(d.parentNode) + "." + d.nodeName) : d.nodeName;
}

var re = "",
    color = pv.Colors.category19().by(function(d) d.parentNode.nodeName),
    datanodes = pvdom.root("hanya-nama").nodes(); //change it to array

var vis = new pv.Panel()
    .width(400)
    .height(400);

var treemap = vis.add(pv.Layout.Treemap)
    .nodes(datanodes)
    .round(true);
 
treemap.leaf.add(pv.Panel)
  .fillStyle(function(d) color(d).alpha(title(d).match(re) ? 1 : .2))
  .strokeStyle("#fff")
  .lineWidth(1)
  .antialias(false);


treemap.label.add(pv.Label)
    .textStyle(function(d) pv.rgb(0, 0, 0, title(d).match(re) ? 1 : .2));

vis.render();

Reference :

• http://vis.stanford.edu/protovis/ex/treemap.html

JSON to DOM operator

JSON - as explained in protovis documentation - is a hierarchical Javascript object (map). And since some of the Provotis visualization need dom object instead of map, we then have pv.dom function exist to cover this transformation.

This article will show you not the actual usage of the function. But just show you what JSON object before and after transformed into using pv.dom function in Firebug's DOM console.

The JSON declaration code shown below.

var jsondata = {
    row1 : {
      data1 : 10,
      data2 : 20,
    },
    row2 : {
      data3 : 30,
      data4 : 40,
    } 
};

Firebug's DOM view on jsondata variable.

"jsondata" object map

Now let's continue our code by adding these lines. We will have a converted JSON object into array using nodes() function of a constructed DOM operator base on jsondata.

var pvdom = pv.dom(jsondata);
var jsonarray = pvdom.nodes();

Here we now have a pvdom object and a related multi dimensional arrays - jsonarray.

Let's see the internal of each object in Firebug.

As you can see, jsonarray is a converted array from object jsondata through pvdom DOM operator. If you look at the array you can see that each node is represented by an index (root = 0, row1=1, row2=4, data1=2, data2=3, data3=5, data4=6).

Now, with no further explanation I hope you are clearer on the usage of pv.dom operator to help you get started with it.

References

• http://vis.stanford.edu/protovis/jsdoc/symbols/pv.Dom.html