Pie chart with Outside Centered Value Labels

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) {

    def.setDebug(16);

    new pvc.PieChart({
        canvas: 'cccExample',
        width:  500,
        height: 400,
        animate:    false,
        selectable: true,
        hoverable:  true,

        valuesVisible: true,
        valuesLabelStyle: 'inside',
        valuesMask: "{category}",
        valuesOptimizeLegibility: false,
        valuesAnchor: 'outer',
        valuesFont:   'bold 10px sans-serif',
        contentPaddings: '5%',

        extensionPoints: {
            slice_strokeStyle: 'black',
            label_textAngle:   0,
            label_textAlign:   function() {
                var cosDelta = Math.cos(Math.PI/2 - Math.PI/8);
                var pvSlice  = this.pvMark.target;
                var midAngle = pvSlice.startAngle() + 
                      pvSlice.angle() / 2;

                var cos = Math.cos(midAngle);
                if(Math.abs(cos) <= cosDelta) {
                    // Top or bottom centered
                    return 'center';
                }
                return cos > 0 ? 'left' : 'right';
            },
            label_textBaseline:   function() {
                var deltaSin = Math.sin(Math.PI/8);
                var pvSlice  = this.pvMark.target;
                var midAngle = pvSlice.startAngle() + 
                      pvSlice.angle() / 2;

                var sin = Math.sin(midAngle);
                if(Math.abs(sin) <= deltaSin) {
                    // Left or Right centered
                    return 'middle';
                }
                return sin > 0 ? 'top' : 'bottom';
            },
            label_textStyle: function(scene) {
                var colorScale = this.panel.axes.color.scale;
                return colorScale(scene.vars.category.value);
            }
        }
    })
    .setData(relational_03_b, {crosstabMode: false})
    .render();
});