Heatgrid having Tooltip with % By Column and Row

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

CSS

.tipsy table { border-collapse: collapse; }
.tipsy tr, .tipsy table { padding:0px; }
.tipsy td {
    font-family: Helvetica, Arial, Sans-serif;
    text-align: left;
    vertical-align: top;
    padding: 5px 10px;
}

.tipsy td:first-child {
    font-size:   14px;
    color:       darkgray;
    font-weight: bold;
}

.tipsy td:nth-child(2) {
    border-left: 1px solid gray;
    font-size: 13px;
}

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    new pvc.waterfallChart({
        canvas: "cccExample",
        width:  600,
        height: 250,
        title: "Heatgrid having Tooltip with % By Column and Row",
        titleFont: "bold 14px sans-serif",
        clickable:  true,
        selectable: true,
        hoverable:  true,
        useShapes:  true,
        visualRoles: {color: 'value2', size: 'value'},
        shape:      'circle',
        colorNormByCategory: false,
        axisFont:'14px helvetica',
        axisComposite: true,
        yAxisSize: 60,
        xAxisSize: 100,
        tooltipFormat: function(scene) {
            // Scenes and its data are organized by: 
            // Category > Series
            var group = scene.group;
            if(!group) { return; }

            // Find the dimension to which the 
            // desired visual role is bound to.
            var visualRoleName = 'color';
            var valueDimName = this.panel.visualRoles[visualRoleName]
                  .firstDimensionName();
            var pctInCol = group.dimensions(valueDimName)
                .percentOverParent();

            // Obtain the inverted data: Series > Category
            var invData = this.panel.visibleData({inverted: true});

            // Find the corresponding leaf data on invData:
            var series   = group.key;
            var category = group.parent.key;

            var invGroup = invData.child(series).child(category);
            var pctInRow = invGroup.dimensions(valueDimName)
                .percentOverParent();

            var rows = [];
            var addRow = function(label, value) {
                rows.push(
                    '<tr><td>' + label + '</td><td>' +
                    def.html.escape(value) + 
                    '</td</tr>');
            };

            var vars = scene.vars;
            addRow("Series",   vars.series.label);
            addRow("Category",...