circle example

_.md

[ Launch: Tributary inlet ] fee067238f148faad837 by cornhundred

config.json

{"description":"circle example ","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/21wLorS.png"}

inlet.js

// this makes a svg 
//apprently there's no need to first select the body
var svg = d3.select('svg');

// defines the dataset
var data = [40, 50, 60];

// generate the groups that will hold the circles and labels 
var groups = svg.selectAll('g') 
	// do the data bind 
	.data(data)
	.enter()
	// append the groups (that now have bound data)
	.append('g');

// first move (transform with a translate) the groups functionally using the data 
groups.attr('transform', function(d,i) {
  // first calculate the translation that will occur 
  // using the data 
  var x = 50*i + 100;
  var y = 50*i + 100;
  // then return the result as a string in the correct format 
  return 'translate (' + [x,y] + ')';
})


// then append the circles to the groups 
groups.append('circle')
// set their required attributes by defining an object with name 
// value pairs 
.attr({
  cx:0,
  cy:0,
  r:20,
  fill:'coral',
  stroke:'black'
})

// then append the text 
var label = groups.append('text')
	.text(function(d){
      return d;
	})
.attr({
  'alignment-baseline':'middle',
  'text-anchor':'middle'
})