Sunburst chart example

by duarteleao

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="cccExample"></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: [
            ['This', '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]
        ]
    };

    new pvc.SunburstChart({
        canvas: 'cccExample',
        width:  400,
        height: 400,

        // Data source
        crosstabMode: false,

        // Main plot
        valuesVisible: true,

        // Chart/Interaction
        selectable: true,
        hoverable:  true
    })
    .setData(cdaData)
    .render();
});