Heat-grid With Inset Rectangle Shapes

Shows how to use the aspect ratio and size to achieve shapes with equal horizontal and vertical margins.

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" />

JavaScript

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

    var cellMargin = 8; // on each side

    new pvc.HeatGridChart({
        canvas: "cccExample",
        width:  450,
        height: 350,
        selectable: true,
        hoverable:  true,
        useShapes:  true,
        shape:      'square',
        yAxisSize: 180,
        xAxisSize: 100,
        axisGrid: true,

        // By definition, size = radius * radius, 
        // thus being proportional area.
        dot_shapeSize: function() {
           var p = this.pvMark.parent,
               m = 2*cellMargin,
               rx = (p.width()  - m) / 2,
               ry = (p.height() - m) / 2;
           return rx * ry;
        }, 

        // Aspect ratio is processed 
        // such that shapeSize (area) is maintained.
        dot_aspectRatio: function() {
            var p = this.pvMark.parent,
                m = 2*cellMargin,
                rx = (p.width()  - m) / 2,
                ry = (p.height() - m) / 2;
            return rx/ry; 
        },
    })
    .setData(testHeatGrid, {crosstabMode: true})
    .render();
});