Three Circles Setup

_.md

[ Launch: Three Circles Setup ] c6a6d74703906368d8df by alatzl
[ Launch: Three Circles Answer ] 6258892 by lewis500
[ Launch: Three Circles Answer ] 5565405 by lewis500

config.json

{"description":"Three Circles Setup","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,"thumbnail":"http://i.imgur.com/DFgDX32.png","ajax-caching":true}

inlet.js

var svg = d3.select("svg");
var data = [ 42, 13, 69 ];

//make groups for each data point. put a circle in each group. add labels to each circle.
var groups = svg.selectAll('g')
	.data(data)
	.enter()
	.append('g')
	.attr('transform', function(d, i) {
		var x = 50 + i*100;
		var y = 50 + i*100;
		return "translate(" + [x,y] + ")";
	});

var circles = groups.append('circle')
  .attr({
    'cx': 0,
    'cy': 0,
    'r': 25,
    'fill': '#999',
    'stroke': '#111',
    'stroke-width': 2
  });
	
var labels = groups.append('text')
	.text(function(d, i) {
		return d;
	})
    .attr({
        'text-anchor': 'middle',
		'alignment-baseline': 'middle'
    });
    
circles.exit().remove();