d3 multi-series donut / arc-ular graph

radial.js

var s = 1, e = s + 4;
var data = d3.range(s, e);
var col = d3.scale.category10();
var scal = d3.scale.linear()
	.domain([data[0], data[data.length-1]])
	.range([0, 1]);

var g = d3.select('svg');
var groups = g.selectAll('g').data(data).enter().append('g');

groups.attr({
  transform: function (d, i) {
    return 'translate(220, 219)';
  }
});


var r = 30,
	h = 15,    
    pad = 2,
	arc = d3.svg.arc()
		.innerRadius(function (d, i) {
          return r + h * i - h + pad;
		})
		.outerRadius(function (d, i) {
          return r + h * i;
		})
        .startAngle(-Math.PI)
		.endAngle(function (d) {
      return Math.PI * 0.1 + d - Math.PI; 
		});

var arcs = groups.append('path')
	.attr({
		d: arc,
        fill: function (d, i) {
          return col(i);
        }
    });


var labels = groups.append('text')
  .text(function (d, i) { return d; })
  .attr({
    fill: '#000',
    y: function (d, i) { return r + h * i - 2; },
    x: 5,
    'font-size': 11
  })