Rainbow

_.md

[ Launch: Rainbow ] 5824505 by biovisualize

config.json

{"description":"Rainbow","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var w = 300, h = 300, arcInnerRadius = 40;
var svg = d3.select('svg');
var data = d3.range(6);
var colorScale = d3.scale.linear()
	.domain(data)
	.range(['purple', 'royalblue', 'limegreen', 'yellow', 'orange', 'red']);
var radiusScale = d3.scale.linear()
	.domain(d3.extent(data.reverse()))
	.range([arcInnerRadius*2, w]);

var clippedGroup = svg.append('clipPath')
	.attr('id', 'clip-path')
	.append('rect')
	.attr({
      width: w,
      height: h
    });
var defs = svg.append('defs');
defs.append('path')
  .attr({
    transform: 'translate(100, 90) rotate(0)',
    id: 'text-guide',
    d: 'M 10,90 Q 100,15 200,70 Q 340,140 400,30',
    stroke: 'black'
  });
var maskGroup = defs.append('mask')
	.attr({
      id: 'mask',
      width: 10,
      height: 10
    })
	.append('g');
maskGroup.append('circle')
	.attr({
      cx: 0,
      cy: h,
      r: 500,
      fill: 'white'
	});
maskGroup.append('circle')
	.attr({
      cx: 0,
      cy: h,
      r: arcInnerRadius,
      fill: 'black'
	});

svg.append('g')
	.attr({
		'clip-path': 'url(#clip-path)',
		mask: 'url(#mask)'
    })
	.selectAll('circle')
	.data(data)
	.enter().append('circle')
	.attr({
      cx: 0,
      cy: h,
      r: function(d, i){ return radiusScale(d); },
      fill: function(d, i){ return colorScale(d); }
    })

svg.append('text').append('textPath')
	.attr({
      'font-size': '25px',
		fill: 'brown',
		dy: 100,
		'xlink:href': "#text-guide"
    })
.style({'letter-spacing': 15 + 'px'})
	.text('Bonne fête Ennio!')