Synced Pie Slices Selection

This mostly shows some techniques related to selection. However, note that the example would probably be better represented by a sunburst chart (see http://jsfiddle.net/duarteleao/82kC3/)

by archon88

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>
<div id="cccExample1"></div>
<div id="cccExample2"></div>

JavaScript

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

    var cdaData = {
        metadata: [
            {colName: 'group',    colType: 'string'},
            {colName: 'category', colType: 'string'},
            {colName: 'value',    colType: 'number'}
        ],
        resultset: [
            ['A', 'a', 10],
            ['A', 'b', 15],
            ['A', 'c', 15],
            ['A', 'd', 10],
            ['A', 'e', 20],
            ['A', 'f', 10],
            ['A', 'g',  5],
            ['B', 'h',  5],
            ['B', 'i',  5],
            ['B', 'j',  5]
        ]
    };

    var highlightCategValues = {}; // value -> value

    var pie1 = new pvc.PieChart({
        canvas: 'cccExample1',
        width:  400,
        height: 200,

        // Data source
        crosstabMode: false,
        readers: ['group', 'category', 'value'],

        // Visual Roles
        visualRoles: {color: 'group'},

        // Main plot
        valuesVisible: false,

        // This hides the separation between slices,
        // due to the transparent stroke of the default style...
        slice_strokeStyle: function(s) {
            if(this.sign.mayShowNotAmongSelected(s)) return null;

            var c = this.sign.defaultColorSceneScale()(s);
            return def.hasOwn(highlightCategValues, s.getCategory())
                ? c.brighter()
                : c;
        },

        // Distinguish the highlighted slices of the selected group. 
        slice_fillStyle: function(s) {
            var c = this.delegate();
            return def.hasOwn(highlightCategValues, s.getCategory())
                ? c.brighter()
                : c;
        },

        // Panels
        legend: true,

        // Chart/Interaction
        animate:    false,

        // NOTE: Pie1 is not directly selectable by the user.
        selectable: true,
        clearSelectionMode: 'manual',

        // NOTE: otherwise the user can tell the real slices...
       ...