drawing circles and using groups in d3

_.md

[ Launch Inlet ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"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 svg = d3.select("svg")
var data = [42,13,69];

var groups = svg.selectAll("g")
    .data(data)
    .enter()
    .append("g");

groups.attr("transform",function(d,i) {
  var x = 78*i +100;
  var y = 41*i+160;
  return "translate("+[x,y]+")";
  })
  
var circles = groups.append("circle")
    .attr({
      cx: function(d,i) {
        return 0;
        //return i*78+100;
      },
      cy:function(d,i) {
        return 0;
        //return i*30+160
      },
      r: 20,
      fill: "#BDB3B3",
      stroke:"#000000",
      "stroke-width":3
    })

//the use of groups means that the x
//and y values in the transform at the 
//top apply to both the text and circles
//but you can add an independent offset 
//to the text here by setting its x attr
//or offset the circles by setting their cx
//and cy to something other than 0
//alignment-baseline is vertical alignment along y
//text-anchor is horizontal alignment along x
//using groups allows binding multiple shapes/objects
//with your data
var label = groups.append("text")
    .text(function(d) {
    return d;
    }).attr({x:0,
             "alignment-baseline":"middle",
             "text-anchor":"middle"
            })