Metric Dot with Quadrants

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 y0 = 15;
    var x0 = 40;

    var baseColors = ['red', 'green', 'blue', 'yellow'];
    //var baseColors = pv.Colors.category10().range();
    var quadrantColors = pv.colors(baseColors.map(function(c) {
        return pv.color(c).alpha(0.2);
    }));

    new pvc.MetricDotChart({
        canvas:   "cccExample",
        width:    500,
        height:   400,
        axisGrid: true,
        axisZeroLine: false,
        selectable: true,
        //autoPaddingByDotSize: true, //axisOffset: 0.05,
        extensionPoints: {
            plotBg_add: function() {
                var panel = new pv.Panel()
                     .def('b0', function() {
                        var ccc = this.getContext();
                        var scale = ccc.chart.axes.ortho.scale;
                        var li = ccc.panel._layoutInfo;
                        return li.paddings.bottom + scale(y0);
                    })
                    .def('l0', function() {
                        var ccc = this.getContext();
                        var scale = ccc.chart.axes.base.scale;
                        var li = ccc.panel._layoutInfo;
                        return li.paddings.left + scale(x0);
                    });

                // Quadrants
                panel
                .add(pv.Panel)
                .data(function() { return [0, 1, 2, 3]; })
                .events('none')
                .height(null)
                .width(null)
                .strokeStyle(null)
                .lineWidth(0)
                .fillStyle(quadrantColors)
                .left(function(i) { 
                   return (i % 2) ? this.parent.l0() : 0;
                 })
                .right(function(i) {
                    return (i % 2) 
                        ? 0 
                        : (this.parent.width() - this.parent.l0());
                })
                .bottom(function(i) { 
             ...