Three Circles

_.md

[ Launch: Three Circles Setup ] 43071acf400ac6b936b4 by ahlusar1989
[ Launch: Three Circles Answer ] 6258892 by lewis500
[ Launch: Three Circles Answer ] 5565405 by lewis500

config.json

{"description":"Three Circles","endpoint":"","display":"svg","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"}],"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":true,"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 ];


var groups = svg.selectAll("g") //a set of groups, one for each circle
    .data(data)
    .enter()
    .append("g");

groups.attr("transform", function(d,i) {
  var x = 113 * i + 100;
  var y = 159 * i + 100;
  return "translate(" + [ x, y] + ")";  // translate all the circles by x and y
}) 

var circles = groups.append("circle") //adds a circle to each group
    .attr({
      cx: 0,
      cy: 0,
      r: 20,
      fill: "coral",
      stroke: "black",
      "stroke-width": 3
    })
    
var label = groups.append("text") //adds text to each group
    .text(function(d) {
      return d;
    })
    .attr({
      "alignment-baseline": "middle",
      "text-anchor": "middle"
    })