radial

_.md

[ Launch: radial ] c11d3c3df4f53880061d by tborychowski

config.json

{"description":"radial","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":true,"thumbnail":"http://i.imgur.com/XuGhwG2.png"}

inlet.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
  })