Three Circles Setup

_.md

[ Launch: Three Circles Setup ] cc617eaa11e8ac77cb3f by ahlusar1989
[ 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":[{"name":"d3.js","url":"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.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},"d3.js":{"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}

d3.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 = 56 * 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"
    })
    
    
    
    

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')
	

groups.attr("transform", function(d, i){
	var x = 78 * i +100;
	var y = 41 
}



var circles = groups.append('circle')
	.append('g')
	.attr({
            cx: 0,
            cy: 0,
            r: 20,
            fill: "coral",
            stroke: "black",
            "stroke-width": 3
          });

var labels = groups.append('text')
.text(function(d){
  return d;
})
.attr({
  "alignment-baseline" : "middle",
  "text-anchor": "middle"
  });