An SVG stacked Rose chart with unequal segment sizes

This is a mode of operation that the SVG Rose chart has but the canvas Rose chart doesn't. It's a stacked non-equi-angular variation. It's appropriate for when you have data that has an extra dimension that goes beyond just a straight-forward stacked or non-equi-angular chart.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.rose.js"></script>
Put this where you want the chart to show up:
<div style="width: 600px; height: 500px" id="chart-container"></div>
This is the code that generates the chart:
    new RGraph.SVG.Rose({
        id: 'chart-container',
        data: [ [[4,8,2],14], [[3,6,8],19], [[1,6,9],6], [[4,5,3],7], [[2,1,7],9], [[7,2,5],6], [[8,4,3],23], [[4,7,9],7], [[3,2,3],9], [[5,7,3],4] ],
        options: {
            backgroundGridRadialsCount: 0,
            colorsOpacity: 0.8,
            colors: ['red', 'blue','#f6f'],
            colorsStroke: 'rgba(0,0,0,0)',
            linewidth: 1,
            variant: 'non-equi-angular',
            amargin: 0.05,
            labels: ['Alf','Bert','Craig','Doug','Edgar','Fred','Gary','Harry','Indigo','Jay'],
            tooltips: [