Here we have a variation on a standard Rosse chart which produces a grouping effect. The property that causes the offset is called segmentsAngleOffset and on one Rose chart (there are two)it is set to -0.15 whilst on the other it is set at 0.15. This "rotates" one Rose chart backwards whilst the other is "rotated" forwards.
Both charts use the grow() animation effect.
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 id="cc" style="width: 1000px; height: 700px"></div>This is the code that generates the chart: